宽高自适应
优点：元素自适应在布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
宽度自适应：
默认宽度100%的元素
width：；单位为%
高度自适应：
不写height：；（让内容撑起来）
height：；单位为%，（前提条件：html,body{height:100%;}）
min-height：最小高度
max-height：最大高度
min-width：最小宽度
max-width：最大宽度
当子集元素没有浮动，父级元素可以不写高度，高度由子集内容撑起。
问题：父级元素不给高度，子元素浮动，会造成父元素高度塌陷，如何解决？
解决办法：第一种：给父元素添加高度，
缺点：不灵活。
第二种：给父元素添加一个voerflow：hidden；(触发一个BFC)
缺点：定位出去的元素将会被隐藏。
第三种：在浮动元素下方（最后面）添加空div（块级元素），
并给该元素添加 声明：div{clear:left/reght/both; height:0; overflow:hidden；}
clear：left；/清除浮动 清除浮动带来的问题/
缺点：代码冗余。
第四种：万能清除浮动法：
.name : after{
content：“”；
display：block；
width：0；
height：0；
clear：both；
overflow：hidden；
visibility：hidden；}
visibility：显示隐藏；
hidden：隐藏 不占据文档流
visible：显示 占据文档流
visibility和display的区别：
1：都可以显示隐藏元素
2： visibility：hidden； 占据文档流。
display：none；不占据文档流。
伪对象：
：after{content：“”;}在。。。。之后
:after : 与content属性一起使用，定义在对象后的内容。
语法：选择符:：after{content:”文字”;}
选择符:：after{content:url(图片路径)；}
:before: 与content属性一起使用,定义在对象前 的内容。div::before{content:"在其前放内容";}
:first-letter 定义对象内第一个字符的样式。 说明：*(该伪元素只能用于块级元素)
:first-line:定义对象内第一行的样式。 *(该伪元素只能用于块级元素。)