08-CSS核心布局

核心布局

网页默认按文档流的方式布局

传统的网页布局的三种方式：普通流（标准流）、浮动、定位

网易布局策略：先用标准流的父元素排列上下元素，之后内部子元素采取浮动排列左右位置

（1）、多个块级元素纵向排列找标准流，多个块级元素横排列找浮动。

（2）、先设置盒子大小，之后设置盒子的位置

一、文档流

也可以称为标准流、普通流

描述

• 网页可以理解为层层叠加的效果，文档流处在网页的最底层

• 我们创建的元素默认都在文档流中

• 按照标签规定好的默认方式排列

文档流的特点

• 块元素

  • 块元素在文档流中默认独占一行，自上而下排列，如果脱离文档流会变化

  • 块元素默认在文档流中的宽度是父元素的宽度

  • 块元素默认在文档中的高度被内容撑开，是元素内容的高度

• 行内元素：

  • 行内元素在文档流中只占自身大小，从左向右依次排开，碰到父级元素边缘后自动换行

  • 行内元素在文档流中默认的宽和高都被内容撑开

元素默认的宽度和高度

描述

• 如果width或height设置为auto，再添加padding或border,可视区域不变，内容区域被压缩

• 如果width或height设置为100%。再添加padding或border,可视区域变大，内容区域不变

• 如果不设置宽和高，则默认值为auto

二、浮动

为什么需要浮动

• 如何让多个块级盒子（div)水平排列成一行？

• 转换为行内块元素可实现一排显示，但他们之间会有空白缝隙，很难控制（利用margin）

• 实现两个盒子左右对齐

描述

• 块元素默认在文档流中独占一行，垂直排列

• 如果块级元素没有设置宽度，默认宽度和父级一样宽，如果添加了浮动，他的大小根据内容来决定

• 浮动的盒子之间是没有缝隙的，紧挨一起（行内元素同理）

• 如果需要让元素在页面中，水平排列，则需要让块级元素，脱离文档流

• 使用float属性,属性值为非none，让元素脱离文档流

浮动特性

浮动：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

• 浮动元素会一行内显示，并且元素顶部对齐

• 浮动元素会脱离文档流（拖标）

• 浮动元素会具有行内块元素的特性

• 浮动的元素不会在保留原先的位置

• 如果多个盒子都设置了浮动，则他们会按照属相只一行内显示并且顶端对齐排列

  • 注意:浮动的元素，漂浮在普通流的上面，不占位置。

  • 浮动的元素是相互贴在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐

• 任何元素都可以浮动，不管原先模式是什么模式的元素，添加浮动后会具有行内块元素相似的特性

float

• 可选值

  • left

  • right

  • none（默认，没用）

浮动特点

1. 设置元素的属性为非none，则元素脱离文档流

2. 当元素脱离文档流，紧跟着下面的元素会向上移动

3. 元素浮动后，会向左上或者右上浮动，直到遇到父元素或其他浮动元素的边框，则停靠在该位置

4. 如果浮动元素上面有未浮动的块级元素，则浮动元素不会超过块元素

5. 块元素浮动之后，宽度不在默认占整行，宽度为设置的值

6. 如果浮动元素在一行放置不下，则自动换行

7. 浮动元素不会超过它上面的兄弟元素，最多并排显示

8. 当父元素设置浮动后，宽度和高度被子元素撑开

9. 浮动元素只影响浮动盒子后面的标准流，对前面的元素是没影响的

10. 元素脱离文档流后，宽度和高度由子元素内容撑开

11. 元素设置浮动后，元素显示模式就具备了行内块元素的特性，宽度和高度就会起作用，可以设置

清楚浮动

如果父盒子本身有高度，则不需要清楚浮动，父级有了高度就不会影响下面的标准流。

父盒子清楚浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流

描述

元素设置浮动后，不占位置，就会脱离文档流，后面的元素就会升上来，造成布局错乱，所以需要清楚浮动

产品很多时候不方便给父盒子设置高度。清除浮动

• 清楚浮动，即清楚元素浮动对后面元素造成的影响

• 清楚浮动：闭合浮动，只让浮动在父盒子内部影响，不影响盒子外面的其他盒子

• 清楚浮动，元素退回原始的位置

• 清楚两侧浮动，以最大影响为影响为主

• clear属性可以设置清楚浮动

用清楚浮动解决高度塌陷

• 额外标签法：使用div+clear的方式解决父元素高度塌陷，会添加多余元素的设置

• 使用overflow:hidden/auto/scroll,,给父级添加属性也可清楚浮动，代码简洁但是会将溢出的内容隐藏掉

• 我们可以设置伪类的方式，清楚多余元素的设置

• 

同时解决高度塌陷和外边距传递（双伪元素清除浮动）

解决外边距传递

• 相邻的子元素和父元素的垂直外边距发生重叠，子元素的外边距会传递给父元素

• 设置padding可以解决外边距传递问题，但影响父元素可见框的高度

• 父元素内添加内容也可以隔离子父元素的外边距重叠问题

• 添加div标签不能隔离子父元素，依然能传递

• 添加table标签，可以隔离字符元素，解决传递问题，但是添加了多余的结构标签

• 使用伪类添加table标签

解决高度塌陷问题

设置子元素浮动，父元素没有宽高，发生塌陷

• （额外标签法）添加div标签解决父元素塌陷，但添加了多余的结构标签

• 使用伪元素标签法

同时解决外边距传递和父元素高度塌陷问题

定位

定位的概念

为什么需要定位

• 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子（提高层级）

• 当我们滚动窗口时，盒子固定在屏幕某个位置

• 定位可以让盒子自由的在某个盒子内移动位置或者固定到屏幕中某个位置，并且可以压住其他盒子。

描述

• 定义：定位将指定的元素放到页面中的任意位置

• 定位组成：定位模式（position）+边偏移（top、right、bottom、left）

  • 定位模式用于指定一个元素在文档中的定位方式，边偏移决定该元素最终的位置

• 通过position属性设置属性

• 可选值：

  • static：默认值，表示没有开启定位

  • relative:开启相对定位（自身）

  • absolute:开启绝对定位（父级）

  • fixed:开启固定定位（可视区）

  • sticky：开启粘性定位（CSS3新增/）

• 开启定位：position的属性值不为static

• 可选值：

  • 可以使用left\top\right\bottom四个属性设置元素的位置

  • left:表示相对于定位位置左侧的偏移量

  • top:表示相对于定位位置上侧的偏移量

  • right:表示相对于定位位置右侧的偏移量

  • bottom:表示相对于定位位置下侧的偏移量

• 通常使用两个偏移量就可以定位，一个水平位置，一个垂直位置进行定位

1、相对定位（relative）

1. 当开启元素的相对定位，而不设置偏移量则元素的位置不会发生任何移动

2. 相对定位是相对于元素在文档流中的原来的位置进行定位

3. 相对定位的元素，不会脱离文档流，原始位置会被保留

4. 相对定位的元素会提升一个层级

5. 相对定位不会改变元素的状态，块和内联元素不会改变

2、绝对定位（absolute）

1. position属性值设置为absolute时，开启绝对定位

2. 绝对定位的元素会脱离文档流

3. 开启绝对定位，如果不设置偏移量，则位置保持不变，（在原来的默认位置）

4. 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位，如果所有祖先元素都没有开启定位，则相对于网页的左上角（即document）进行定位

5. 绝对定位会提升元素的层级

6. left和top不设置和left=0,top=0不相同

7. 绝对定位会改变元素的状态

   1. 块元素变成内联元素，默认宽和高被内容撑开

   2. 内联元素变成块元素

8. 我们使用子元素绝对定位时，都会给父元素相对定位（子绝父相）

3、固定定位（fixed）

• 当元素的position设置为fixed，则开启固定定位

• 固定定位是元素固定在浏览器可视区的位置，以浏览器的可视窗口为参照点移动元素

• 不随滚动条滚动

• 固定定位也是一种绝对定位，大部分特征和绝对定位相同

• 相同点

  • 元素脱离文档流

  • 不设置偏移量，默认位置保持不变

  • 会使元素提升层级

• 不同点：

  • 相对于浏览器窗口进行定位

  • 在浏览器窗口某个位置，不会随滚动条移动

• 主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

4、粘性定位（sticky)

可以说是相对定位relative 和 固定定位fixed 的结合

#sticky-nav {
    position: sticky;
    top: 100px;
}
复制代码
设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

• 当元素的position设置为fixed，则开启粘定位

• position:sticky是css定位新增属性

• 它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置

• 父元素不能overflow:hidden或者overflow:auto属性。

• 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

• 父元素的高度不能低于sticky元素的高度

• sticky元素仅在其父元素内生效 ，相对于浏览器可视窗口为参照点。跟页面搭配使用

元素的层级

z-index:number(数字越大越在上面，用于定位的层级)

• 如果元素都开启定位，则会提升层级

• 默认按照元素从上往下布局顺序，进行层次叠加，越往后层级越高

• 可以通过Z-index：设置元素的层级，数值越大，层级越高

• 没有开启定位的元素，z-index属性不起作用

• 父元素层级再高，他也不会覆盖子元素

• 层级在定位后相对于同级元素而言

应用场景

• 在使用定位布局时，可能会出现盒子重叠的情况，此时可以用z-index来控制盒子的前后顺序（Z轴）

总结：

• 绝对定位、固定定位会完全的压住盒子。

• 浮动元素不同，只会压住它下面标准的盒子，但是不会压住下面标准盒子里面的文字（图片）。但是绝对定位、固定定位会压住下面标准流所有的内容

• 浮动之所以不会压住文字，因为浮动产生的目的最初就是为了做文字环绕效果的，文字会围绕浮动元素

透明度

1. opcity设置元素的透明度

2. 值是0——1之间

   • 0表示完全透明

   • 1表示完全不透明

3. -IE8之下不支持opcity属性，可以使用如下属性代替

   1. filter:alpha(opcity:100)/滤镜

   2. filter:alpha(0-1)

   3. 值是0——100之间的数字

4.background:rgba(r,g,b,alpha)设置背景透明度

盒子居中

1. 设置父元素定位，作为子元素的参考点

2. 子元素开启绝对定位，

   • top:50%

   • margin-top:-的盒子宽度的一半