前端学习打卡Day06

1.浮动元素高度自适应
        1）设置父盒子高度为定值，缺点：如果浮动过多，换行，就出现问题
        2）在子盒子后加一个空div，clear：both，缺点：增加了新的空标签，降低了浏览器性能
        3）溢出隐藏 overflow：hidden，缺点：会隐藏溢出的元素，例如下拉二级菜单
        4）伪元素 ：：双冒号，代码如下

        .box::after{
            content: "";
            clear: both;
            display: block;
            width: 0;
            height: 0;
            visibility: hidden;
        }

2.两种隐藏 display与visibility
        display：none 不占位隐藏，看不见摸不着
        visibility：hidden 占位隐藏，看不见摸得着

3.窗口自适应
        窗口高度无法继承，不能使用百分比，因为body的高度为0，所以应当设置为
        html，body{ height：100% }

4.多栏布局
        1）两栏布局，可使用calc()函数，动态计算长度值，运算符前后加空格，width:calc(100% - 10px)，然后结合高度自适应代码块
        2）三栏以上布局，全部设置左浮动，通过Dom声明顺序布局，通过calc计算盒子大小

5.选框
        1）单选框 input type=“radio”，可以使用lable for=“id”标签，实现点击文本选中
        2）多选框 input type="checkbox",checked默认选中

6.上传文件
        1）type=“file” 弹出上传文件框
        2）type=“image” src=“图片地址”，使用自定义的图片代替提交按钮（type=“submit”）
        3）type=“hidden” 隐藏按钮，通过设置value值带给后端个人的信息
        4）disabled和readonly，禁用和只读

7.下拉菜单 <select>+<option>
        select的属性，size显示几个，multiple多选
        option的属性，value提供给后端的value值，select默认选中

8.文本域 textarea
        多行文本输入设置，resize属性重新设置大小，vertical,horizontal，both，none
        textarea默认value值写在双标签内部，注意换行空格问题

9.字段集<fieldset>+<legend>
        可以实现集合输入的效果，边框上通过设置legend可以加文字和小边框