2020-09-25 CSS3的学习4

CSS3第三天

---

布局

1.掌握默认文档流
2.掌握浮动布局
3.掌握定位布局

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、默认文档流

默认文档流就是对页面布局不加任何修饰，元素自动的布局方式，其特点如下

1. 元素在页面中的显示顺序与元素在代码中出现的顺序是一致的。
2. 块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。
3. 行内元素与其他元素共享一行空间，宽高由其内容所决定。
   可以通过如下属性该变布局
   display：block，inline ，inline-block
   float：left，right
   position：relative，absolute，fixed

二、浮动布局（Floats）

浮动布局的主要用法是为了让块级元素在一行中显示（列级布局），或者让文字在 图片的周围显示。

float:left;/*向左浮动*/
float:right;/*向右浮动*/
float:none;/*默认，不浮动*/
float:inherit;/*浮动方式继承父元素*/

清除浮动
位于浮动元素下的非浮动元素会显示到浮动元素的下面，非浮动元素中的文字会环 绕在浮动元素周围，这并不是我们想要的。要想让该非浮动元素位于浮动元素之后 （单独一行）需要清除浮动。

clear:both;
overflow:hidden;/*父元素*/

三、定位布局（ Positioning）

相对定位、绝对定位、固定定位元素都有定位属性left,right,top,bottom。

1.静态定位（ Static positioning）

是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。 position: static;

2.相对定位 （ Relative positioning ）

• 与静态定位相似
• 不脱离文档流，原先位置保留
• 如果不设置top, bottom, left, right属性，依然在原位置
• 对于相对定位的元素我们可以通过属性top, bottom, left, right来改变元素最终的 位置。元素移动的时候是相对于【当前元素所在的位置】进行移动。

position: relative;

3.固定定位（Fixed positioning）

• 固定定位元素相对于浏览器视口区进行定位，脱离文档流，原先位置不保留，没有设置 定位属性的情况下，默认是在原先位置固定定位。
• 不会随着浏览器的滚动而滚动

position: fixed;

4.绝对定位（Absolute positioning）

• 元素脱离了文档流，即不在原来的位置上。在没有设置定位属性的情况下，默认在原先的 位置脱离文档流。不干扰其他元素在页面中的位置，显示在其他元素的上方。
• 没有定位祖先元素的，相对于视口区的左上角定位。
• 有定位祖先元素的，相对于定位祖先元素进行定位。

position: absolute;

5.粘性定位（ Sticky positioning ）

• 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特 殊场景。
• 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
• 设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果设 置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再 向上移动（此时相当于fixed定位）。
• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以 滚动，那么是相对于viewport(视口区)来计算元素的偏移量。

position: sticky;