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可以加文字和小边框