属性名 | 效果 |
---|---|
float:left | 左浮动 |
float:right | 右浮动 |
::before | 在父元素内容的最前添加一个伪元素 |
---|---|
::after | 在父元素内容的最后添加一个伪元素 |
伪元素:一般页面中的非主体内容可以使用伪元素
1、在标准流的情况下,子元素的高度是可以撑开父元素的
2、一旦子元素浮动了,那么父元素就检测不到子元素,从而导致父元素高度为0
3、那么此时我们就需要清除浮动,让子元素可以把父亲撑开
方法 | 优点 | 缺点 |
---|---|---|
直接设置父元素高度 | 优点简单粗暴,方便 | 缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块 |
额外标签法 | 在父元素内容的最后添加一个块级元素。给添加的块级元素设置 clear:both | 会在页面中添加额外的标签,会让页面的HTML结构变得复杂 |
单伪元素清除法 | 项目中使用,直接给标签加类即可清除浮动 | 操作:用伪元素替代了额外标签 |
双伪元素清除法 | 项目中使用,直接给标签加类即可清除浮动 | |
给父元素设置overflow : hidden | 方便 | 操作:直接给父元素设置 overflow : hidden |
.box::after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
选择器 | 说明 |
---|---|
:first-child | 找到父元素的第一个子元素 |
:last-child | 找到父元素的最后一个子元素 |
:nth-child(n) | 找到父元素第n个子元素 |
:nth-last-child(n) | 找到父元素中倒数第n个子元素 |
:nth-of-type(n) | 找到父元素的子元素固定死 |
功能 | 公式 |
---|---|
偶数 | 2n、even |
奇数 | 2n+1、2n-1、odd |
找到前5个 | -n+5 |
找到从第5个往后 | n+5 |
1、浮动的元素找相邻浮动的元素,顶部对齐,在同一行内显示 要浮动都浮动(加强版的行内块)
2、浮动的元素脱离标准流 在页面中不占有位置
3、浮动的元素只会影响到后面的元素
4、浮动元素不会超出父元素,在父元素内部进行浮动
5、浮动的元素只会压住下面的盒子,压不住盒子里的内容
6、浮动的元素可以直接加宽高,默认宽度是内容宽度
通栏:从左贯穿到右的一个盒子,这个盒子只给高度,不给宽度,让宽度默认给浏览器一样宽
版心:一个有宽度,且居中的盒子