CSS布局

CSS布局

div标签

概念

特点

• 本身默认样式极少(只有默认块级元素这一项)
• 没有太多默认属性
• 默认宽度为100%

总结

本身不具有太多默认的样式或属性，对CSS来说，可塑性极强，可以实现任何想要的效果。比如布局的一部分，或者模块之类的。

标准盒模型

概念

CSS会把所有标签都当成一个个的“盒子”，通过CSS所提供的相关属性能够实现任意标签的尺寸设置以及定位，由这些属性构成的体系就是盒模型。

属性

• width：设置盒子的内容宽度
• height：设置盒子的内容高度
• border：设置盒子的边框
• padding：设置内边距，即内容和border的距离。四个内边距可统一设置也可分别设置。
• margin：设置外边距，即设置盒子和另一个挨着的盒子之间的距离。同样，四个外边距可统一设置也可分别设置。
  • 给父标签设置overflow:hidden即可防止给紧挨块级父元素的子标签设置margin-top时带跑其父标签。

需要注意的是，盒子的总宽高不只是width或height，还包括padding、border和margin。这些属性也不仅可以作用于盒子，也可以作用于盒子中的元素。

IE盒模型(怪异盒模型)

概念

和标准盒模型一样，使用一样的5个css属性来设置盒子的尺寸以及位置。

与标准盒模型的区别

IE盒模型的padding和border是计 算在width和height中的，盒子的总宽高是width或height和margin。

标准盒模型和IE盒模型的切换

在现代浏览器中，大多数标签都是默认用的标准盒模型，但仍可以用box-sizing 属性来切换，content-box为标准盒模型，border-box为IE盒模型。

需要注意的是，大部分元素都默认是content-box，但input、button元素默认border-box ，会导致尺寸问题。

CSS定位

概念

传统的盒模型不能处理固定的标签或者带有层叠效果的标签布局，借助CSS中的position属性能够实现标签处于任意的位置，并且可以实现标签的层叠效果，在div+CSS布局中，CSS定位起到一个辅助作用。

position属性

• static：默认定位，表示标签按照页面默认的布局方式进行定位。

• fixed：固定定位

  • 设置固定定位的标签会固定在屏幕上，不会随滚动条而滚动。
  • 固定定位标签会被视为“不占空间”，即类似播放器固定在最上层。
  • 固定定位的标签以body作为位置参考，分别以top、left、right和bottom设置距离body标签上下左右的距离。

• absolute：绝对定位

  • 与固定定位相比，绝对定位会随着页面滚动而滚动。

  • 与固定定位相同，绝对定位标签会被视为“不占空间”，即类似播放器固定在最上层。

  • 绝对定位的标签以已定位父标签作为位置参考，分别以top、left、right和bottom设置距离已定位父标签上下左右的距离(已定位父标签指postion为非static的父级标签或祖先标签。如果没有已定位父标签则会直接参考body标签进行定位)。

    • 特殊用法

      margin:auto;
      position:absolute;
      top:0;
      left:0;
      rigtht:0;
      bottom:0;
      

      • 对已设置宽高的标签可实现相对已定位的父标签垂直水平居中(相当于上下左右都在顶)。
      • 对于未设置宽高的标签可实现平铺整个相对已定位父标签(相当于拉伸以实现四周距离为0)。

• relative：相对定位

  • 与固定定位和绝对定位相比，相对定位标签仍会占据原来的空间，不会被视为“不占空间”，即设置了相对定位之后原页面布局不受影响。
  • 移动后仍可以类似播放器固定在最上层一样覆盖其他元素。
  • 分别以top、left、right和bottom设置距离原来位置上下左右的距离。

改变定位标签的显示层级

z-index：用于控制定位标签的显示顺序，以数字为单位。默认级别为0，数字越大，层级越高，层级高的优先显示，可以设置为负数，但只对非static 的定位标签有效果，且子元素的显示层级受限于父元素的显示层级。

总结

• 固定定位：需要固定在页面的标签，代码建议放在之前。
• 绝对定位：位置比较特殊并且不固定的标签。
  • 特殊位置：有层叠效果的标签，是参考父标签，本身不占空间
  • 一般情况，绝对定位会搭配相对定位使用。子绝父相
• 相对定位：有层叠效果的标签，同时自己需要占空间的。

文档流

概念

指HTML页面中标签的默认排列方式(从上往下、从左往右，行内和行内块级会同行显示，块级元素会独行显示)，默认情况下所有标签都处于文档流。

脱离文档流

当我们给标签设置固定定位或绝对定位或浮动时，该标签会脱离文档流，不受文档流的限制，也不属于文档流。文档流的标签会忽略脱离文档流的标签，当成不存在。在页面中脱离文档流的标签会表现为浮在文档流上面，就可能会挡住文档流中的标签。

需要注意的是，相对定位没有脱离文档流，只不过可以借助top等四个位置属性改变自己的位置，也可以有层叠的效果。

浮动

概念

90年代设计了CSS属性float来实现文字围绕图片的效果，译为浮动。目前在页面中表现为设置勒浮动的标签具有很多额外的特性，配合div可以实现页面布局，20年在国内普及的布局方式就是盒模型+浮动。

语法

float: left | right  |none(默认);

特性

• 浮动标签会和其他浮动标签同行显示，如果父标签宽度不够，浮动标签会自动换行显示。
• 浮动标签会尽量向左对齐(左浮动 )或向右对齐(右浮动)。
• 会脱离文档流(会覆盖)。
• 当上一个标签浮动后，下一个紧挨标签的空间已经顶上去了，但是该标签的内容会认为浮动元素还在，所以才会有标签空间移动但内容不动的情况。

清除浮动标签带来的影响

• 给受影响的非浮动标签设置CSS属性:clear。clear专门用于清除浮动标签带来的影响。

  clear:left | right |both;
  

• 通过空白div添加clear属性将浮动元素和非浮动元素给分隔开。

• 通过< br clear="all" >将浮动元素和非浮动元素分隔开。

• 父元素添加伪元素可以动态添加一个子元素，完成清除浮动的操作。

浮动子标签带来的父标签的的高度塌陷问题

当父标签高度自适应，子标签浮动时，因子标签脱离文档流，父标签认为没有该子标签，高度会塌陷。给父标签设置overflow:hidden;。

dispaly:inline-block和float的异同

• 相同点：

  • 都可以让块级元素同行显示，根据父标签的宽度自动换行

• 不同点：

  • dispaly:inline-block需要考虑行内块级元素之间的空隙、垂直对齐。

  • display:inline-block标签会留在文档流，float标签会脱离文档流(因脱离文档流，float需注意父标签高度塌陷问题)。

  • float标签需考虑对其他非浮动标签的影响问题。

  • float标签换行需注意float标签高度要一致，不然有换行问题。

  • float可以直接实现右对齐或左对齐。

div+CSS布局

概念

以CSS盒模型为核心，以div来设计和实现页面的一种布局技术。把页面所有内容都换分到不同的盒子中借助CSS盒模型完成页面布局。

流程

1. 对psd原稿进行切片

2. 进行框架分析，确定页面大致有几个模块

3. 实现框架

   • 宽高

   • 边框或背景

   • 间距

4. 从上往下依次填充模块内容以及对应的样式

   • 建议每个模块都有一个id，对其子标签设置样式尽量用组合选择器

5. 细微调节

   • 盒子间的距离
   • 文字字体大小
   • 文字和边框间的距离

弹性布局

概念

div+CSS布局没有自适应、大量时间花在水平或垂直居中、需要清理浮动。弹性布局是CSS第三代布局技术，具有自适应特点，用于替代div+CSS布局或起到辅助作用。弹性布局能够使元素适应不同的容器宽度，比如浏览器宽度，且可以实现内容快速的居中。

弹性布局的标准使用模式

• 将富余空间作为弹性子项目的空隙进行对齐处理，弹性子项目宽高固定，间隙自适应。
• 将富余空间按比例分配给弹性子项目作为其尺寸的一部分，尺寸自适应，间隙可使用margin。

语法

给容器标签设置display:flex |inline-flex都可以将该容器变为弹性容器，通过设置弹性布局提供的CSS属性能够对弹性容器的直接子标签进行布局的控制。直接子标签也称为弹性子项目。

• display:flex：其兄弟标签会将该弹性容器视作一个普通的块级元素。
• display:inline-flex：其兄弟标签会将该弹性容器视作一个普通的行内块级元素。

另外，一般不会对弹性容器设置高度，因为自适应。

主轴和侧轴

默认情况下，水平方向为其主轴，垂直方向为其侧轴。也可通过相关属性进行设置。

弹性布局相关CSS属性

• flex-direction：设置弹性容器的主轴，默认是row，即水平。

  flex-direction:row | row-reserve | column | column-reserve;
  

  • row和row-reserve将主轴设置为水平，row-reserve是水平向左，侧轴是主轴的垂直方向。

• flex-wrap：对弹性容器设置是否允许直接子标签换行。

  flex-wrap:nowrap | wrap;
  

• justify-content：设置弹性子项目在主轴上的对齐方式(是给弹性容器设置)。

  justify-content:center | flex-start | flex-end | space-between | space-around | space-evenly;
  

  • center：水平居中。
  • flex-start：从主轴开头进行排列。
  • flex-end：从主轴结尾处进行排列。
  • space-between：弹性子项目中间均分主轴上的空余空间。
  • space-around：弹性子项目两边均分主轴上的空余空间。
  • space-evenly：弹性子项目所有空隙均分主轴上的空余空间。

• align-content：设置弹性子项目在侧轴上的对齐方式(是给弹性容器设置)。

  align-content:center | flex-start | flex-end | space-between | space-around | space-evenly | stretch;
  

  • 必须保证弹性子项目可以换行。
  • 如果设置为stretch，弹性子项目的默认高度就是弹性容器的高度。

• align-items：设置弹性子项目之间的对齐方式。

  align-items:stretch | baseline | flex-end | flex-start | center;
  

  • stretch：当弹性子项目高度为auto或没设高度时，会自动拉伸高度，高度会刚好容得下内容。

弹性空间

弹性空间指的是一个弹性子项目本身的尺寸与通过分配所得到的富余空间的总和。对主轴或侧轴的富余空间的处理不再是对齐，而是直接分配给弹性子项目作为其空间的一部分，间隙可使用margin。

相关CSS属性

• flex-grow：弹性子项目的成长因子，简称弹性因子，指的是分配到赋予空间的 比例。弹性因子越大，分配的空间越多。给弹性子项目设置。如果因子都为1，那么富余空间平均分配。 如果因子不一样，那么直接按比例进行分配。

弹性布局细节处理

• order：能够改变某个弹性子项目的显示顺序。数字越小，显示越靠前。
• flex-shrink：控制弹性子项目的收缩比例，如果弹性子项目所需要的宽度超过了弹性容器的宽度，那么默认情况下，弹性子项目会收缩同样的尺寸来匹配弹性容器的宽度。如果某个子项目收缩比例大，那么被分摊的尺寸也更多，即会让出更多的空间(是给弹性子项目设置)。
• flex-basis：弹性子项目的默认宽度。

弹性布局的应用场景

• 水平导航
• 带有重复标签的列表，比如商品列表、课程列表
• 标签的快速水平垂直居中