1宽度自适应
div盒子宽度默认占满全屏或者父元素宽的100%
脱离文档流的时候,宽度由自身元素决定,所以使用浮动时,需要加宽高
2高度自适应
元素不设置高度的时候,高度由自身决定-无高度,被内部撑开
使用html,body{
width:100%;
height:100%
} 子集就可以设置百分比
min-height-设置最小高度属性
不兼容低版本浏览器,低版本浏览器中_height可以用作min-height,_代表过滤器,高版本浏览器不能识别_
3高度塌陷-解决方式
1.给塌陷元素设置高度-不可取,限制死无法被撑开
2.给塌陷元素使用overflow:hidden,不可取,盒子外的元素会被隐藏
3.给塌陷的盒子内部最后面添加一个元素,并且给其加clear:both属性值 ,不可取,网页冗余,容易造成布局混乱
4给塌陷元素增加一个类名.
chear-fix::after{
content:"";
width:100%;
height:0;
display:block;
overflow:hidden;
visibility:hidden
}
5visibility
删除显示,不删除html结构,而overflow删除结构
6伪对象
- ::after{content:''}
- 在xx之后
- content 内容 可写可不写
- ::before{content:''}
- 在xx之前
共同点：用伪对象选择器添加的文本，鼠标无法选中
- ::first-letter
- 定义第一个字符的样式
- ::first-line
- 定义第一行
