高度塌陷
2019-01-15 本文已影响13人
persistlu
1、自适应宽高
(1)块级元素宽度设置为100%,或者不设置,默认为父元素的宽
(2)高度自适应:不设置父元素的高度或者height:auto,父元素的高度由子元素撑开,高度自适应窗口:一定设置html,body{height:100%},div{height:100%}.
2、高度塌陷(子元素浮动导致父元素高度塌陷)
解决方法:(1)给父元素设置overflow:hidden
(2)给浮动元素的后面添加空div(标签),并且样式div{overflow:hidden;clear:both;hight:0}
(3)万能清除法(只有有浮动,就给浮动的父元素添加class,class名为clearfix)
.clearfix::after{
content:"";
display:block;
overflow:hidden;
height:0;
clear:both;
visibility:hidden;
}
3、伪对象选择器
(1)选择符::after{
content="文字";
content=url(图片);
}
添加为选择符的最后子元素
不能设置宽高
(2)选择符::before{
content:""
}
添加为选择符的第一个元素
(3)::first-letter 改变第一个字符的样式
(4)::first-line 改变第一行样式
注意点:(3)(4)只能给块级元素添加