使用单选框、复选框，让用户选择

语法：
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:
  当 type="radio" 时，控件为单选框
  当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中

单选时，name的取值要一致

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

例子：

<form
 <label for="email">输入你的邮箱地址</label>
 <input type="email" id="email" placeholder="Enter email">
</form>

.box1 {
       border: 1px solid red;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

水平垂直居中

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%。

3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：

3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

<style>
div{
   border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
   
   width:200px;/*定宽*/
   margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}

</style>

技术点的解释：

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效。

竖轴

align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：默认值，左对齐

flex-end：交叉轴的终点对齐

center： 交叉轴的中点对齐

baseline：项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

目的第一行文字的基线对齐。

这一章节我们来学习justify-content属性，本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解，属性值分别为：

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start：交叉轴的起点对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

1、参照定位的元素必须是相对定位元素的前辈元素

<div id="box1"><!--参照定位的元素-->
   <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

2、参照定位的元素必须加入position:relative;

#box1{

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{    position:absolute;

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）