CSS基础 2

目录

常规流

布局规则

盒子尺寸

宽度

高度

 百分比取值

外边距的合并

浮动

基本形式

盒子尺寸

高度坍塌

根源：

解决方式：

定位

基本形式

相对定位

绝对定位

固定定位

定位元素重叠

补充

---

常规流

布局规则

块盒独占一行，行盒水平依次排列。

引入：包含块：每个盒子都有它的包含块，包含块决定了盒子的排列区域。

绝大部分情况下：盒子的包含块，为其父元素的内容盒

盒子尺寸

• 宽度

1. 每个块盒的总宽度，必须刚好等于包含块的宽度。
2. 宽度的默认值是auto——自适应。
3. margin的取值也可以是auto——自适应，但默认值是0。

重点：使包含块居中

<style>
    .header{
         width: 300px;  /*定宽，因为宽的吸收能力大于外边距 */
        margin:0 auto;  /*控制外边距，使其左右自适应*/
    }
</style>

• 高度

1. height：auto， 适应内容的高度
2. margin：auto， 表示0

•  百分比取值

注：padding、宽、margin可以取值为百分比

1. 原则：父有子才有
2. 高度的百分比：

（1）包含块的高度是否取决于子元素的高度，设置百分比无效

（2）包含块的高度不取决于子元素的高度，百分比相对于父元素高度

• 外边距的合并

1. 原则：两个常规流块盒，上下外边距相邻，会进行合并
2. 结果：两个外边距取最大值

浮动

基本形式

float：left / right / none ;

引入：

float属性

- left：左浮动，元素靠上靠左

- right：右浮动，元素靠上靠右

- 默认值为none

重点：

1. 当一个元素浮动后，元素必定为块盒

2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

1. 宽度： 宽度为auto时，适应内容宽度；
2. 高度：高度为auto时，与常规流一致，适应内容的高度；
3. margin：margin为auto，为0；
4. 其他：边框、内边距、百分比设置与常规流一样；
5. 外边距：外边距不合并。

高度坍塌

• 根源：

常规流盒子的自动高度在计算时不会考虑浮动盒子

• 解决方式：

清除浮动，涉及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：固定定位

注：

1. 一个元素，只要position的取值不是static，认为该元素是一个定位元素。
2. 定位元素会脱离文档流（相对定位除外）

重点：

1. 文档流中的元素摆放时，会忽略脱离了文档流的元素

2. 文档流中元素计算自动高度时，会忽略脱离了文档流的元素

• 相对定位

1. 不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。

2. 可以通过四个CSS属性对设置其位置：

   - left     - right     - top     - bottom

   (偏移后为距他原来的距离)

3. 盒子的偏移不会对其他盒子造成任何影响。

• 绝对定位

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可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

补充

1. 绝对定位、固定定位元素一定是块盒；
2. 绝对定位、固定定位元素一定不是浮动；
3. 外边距：没有外边距合并。