目录
常规流
布局规则
块盒独占一行,行盒水平依次排列。
引入:包含块:每个盒子都有它的包含块,包含块决定了盒子的排列区域。
绝大部分情况下:盒子的包含块,为其父元素的内容盒
盒子尺寸
-
宽度
- 每个块盒的总宽度,必须刚好等于包含块的宽度。
- 宽度的默认值是auto——自适应。
- margin的取值也可以是auto——自适应,但默认值是0。
重点:使包含块居中
<style>
.header{
width: 300px; /*定宽,因为宽的吸收能力大于外边距 */
margin:0 auto; /*控制外边距,使其左右自适应*/
}
</style>
-
高度
- height:auto, 适应内容的高度
- margin:auto, 表示0
-
百分比取值
注:padding、宽、margin可以取值为百分比
- 原则:父有子才有
- 高度的百分比:
(1)包含块的高度是否取决于子元素的高度,设置百分比无效
(2)包含块的高度不取决于子元素的高度,百分比相对于父元素高度
-
外边距的合并
- 原则:两个常规流块盒,上下外边距相邻,会进行合并
- 结果:两个外边距取最大值
浮动
基本形式
float:left / right / none ;
引入:
float属性
- left:左浮动,元素靠上靠左
- right:右浮动,元素靠上靠右
- 默认值为none
重点:
1. 当一个元素浮动后,元素必定为块盒
2. 浮动元素的包含块,和常规流一样,为父元素的内容盒
盒子尺寸
- 宽度: 宽度为auto时,适应内容宽度;
- 高度:高度为auto时,与常规流一致,适应内容的高度;
- margin:margin为auto,为0;
- 其他:边框、内边距、百分比设置与常规流一样;
- 外边距:外边距不合并。
高度坍塌
-
根源:
常规流盒子的自动高度在计算时不会考虑浮动盒子
-
解决方式:
清除浮动,涉及css属性:clear
引入:clear属性
- 默认值:none
- left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
- right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
- both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
重点:
.clearfix::after{
content: "";
display: block;
clear: both;
}
/* 父文件引用:class="clearfix" */
定位
基本形式
position:relative / absolute / fixed;
引入:
position属性
- 默认值:static,静态定位(不定位)
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
注:
- 一个元素,只要position的取值不是static,认为该元素是一个定位元素。
- 定位元素会脱离文档流(相对定位除外)
重点:
1. 文档流中的元素摆放时,会忽略脱离了文档流的元素
2. 文档流中元素计算自动高度时,会忽略脱离了文档流的元素
-
相对定位
- 不会导致元素脱离文档流,只是让元素在原来位置上进行偏移。
-
可以通过四个CSS属性对设置其位置:
- left - right - top - bottom
(偏移后为距他原来的距离)
-
盒子的偏移不会对其他盒子造成任何影响。
-
绝对定位
1. 宽高为auto,适应内容
2. 包含块变化:找祖先中第一个定位元素,该元素的填充盒为其包含块。若找不到,则它的包含块为整个网页。
-
固定定位
其他情况和绝对定位完全一样。
包含块不同:固定为视口(浏览器的可视窗口),相对视口,位置不变
重点:
某个方向居中:
1. 定宽(高)
2. 将左右(上下)left/right距离设置为0
3. 将左右(上下)margin设置为auto
例如:
.xiaokuang{
height: 200px;
width: 200px;
background-color: brown;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
.dakuang{
height: 500px;
width: 500px;
background-color: cadetblue;
position: relative;
}
定位元素重叠
设置z-index,通常情况下,该值越大,越靠前。
注:只有定位元素设置z-index有效
z-index可以是负数,如果是负数,则遇到常规流、浮动元素,则会被其覆盖
补充
- 绝对定位、固定定位元素一定是块盒;
- 绝对定位、固定定位元素一定不是浮动;
- 外边距:没有外边距合并。