跳至主要內容

05.block和inline布局

12a2024/10/3大约 37 分钟HTML5前端

05.block和inline布局

5.1 标准盒模型

  • 盒子模型是CSS元素的基础，无论什么元素都被一个个的“盒子”包围着，一个元素中心是内容区域，四周有可选的内边距、边框、轮廓和外边距

    • 内容盒子：显示内容的区域；使用inline-size和block-size，或width和height等属性确定其大小
    • 内边距盒子：填充位于内容周围的空白处；使用padding和相关属性确定其大小
    • 边框盒子：边框盒子包住内容和任何填充；使用border和相关属性确定其大小
    • 外边距盒子：外边距是最外层，其包裹内容、内边距和边框，作为该盒子与其他元素之间的空白；使用margin和相关属性确定其大小
    盒子模型
    盒子模型

  • 在标准盒模型中，width和height被定义为内容盒子的宽高，这些属性的处理方式可以通过box-sizing调整

    • box-sizing默认值为：content-box，即为内容盒子设置宽高
    • box-sizing可选值包括content-box|padding-box|border-box

    IE盒模型

    当前除IE浏览器外都使用上面描述的标准盒模型，IE盒模型与标准盒模型的区别在于元素的宽高不是内容盒子的宽高而是边框盒子的宽高

    由于默认使用的是content-box方式，在计算本身大小和布局位置时应该另外考虑边距和边框

  • 虽然设置了盒子的宽高，但是当内容盒子装不下所有内容时，宽高会发生改变，以显示所有内容，毕竟谁也不希望元素中的内容缺失

5.1.1 格式化

  • 横向格式化包括的属性有width，margin-left，margin-right，padding-left，padding-right，border-left，border-right七个，这七个元素的值加起来要等于元素容纳块(或父元素)的宽，默认长度都是0
  • 纵向格式化包括的属性有height，margin-top，margin-bottom，padding-top，padding-bottom，border-top，border-bottom七个，这七个元素的值加起来要等于元素容纳块的高，默认长度都是0
  • 这七个值中height，width和margin的部分可以使用auto，margin甚至支持负数

  • 使用auto：auto的相关内容在auto的妙用中

  • 使用负值：使用负值的margin能够让元素从元素容纳块中溢出，让元素比容纳块更宽或更高，而且对应方向七个值相加等于总宽度或高度，并没有违背规范

  • 使用百分比：相关内容在百分比的用法中，要注意的是边框长度不支持百分比

    由于边框不支持百分比，想要通过百分比和block布局构建完全弹性的元素是不现实的

  • 使用特殊关键字：现在width和height可以使用一些关键字

    • fill：根据内容尽可能高，如果内容过多会溢出父元素
    • max-content：尽量确保内容不换行(width)或完全展示(height)
    • min-content：尽量压缩内容，英文、数字将根据空格分词，中文将对每个汉字分词
    • fit-content()：括号中可选填入长度，最终结果相当于min(max-content, max(min-content, 填入长度))
    • available：填充父容器剩余空间

  • 四边边距padding和margin的值数目可以是1-4个，含义如下：

    • 当只指定一个值时，该值会统一应用到全部四个边的边距上
    • 指定两个值时，第一个值会应用于上边和下边的边距，第二个值应用于左边和右边
    • 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的边距
    • 指定四个值时，依次(顺时针方向)作为上边，右边，下边，和左边的边距

    值复制的方式

    也可以认为，在提供的值不够的情况下，已提供的值会复制给之后的未提供的值

    值复制
    值复制

  • 如果希望设置针对书写方向的边距，可以使用padding-inline-start和padding-inline-end，margin-inline-start和margin-inline-end，还有对应的block-start和block-end

    • inline-start：文本书写起始方向的边距
    • inline-end：文本书写的结束方向的边距
    • block-start：文本块的起始方向边距，书写第一行侧面的边距
    • block-end：文本块的结束方向边距，书写最后一行侧面的边距
    • *-inline和*-block：缩写，接受两个值，对应start和end

5.1.2 纵向外边距重叠

  • block布局的区块的上下外边距有时会合并(折叠)为单个边距，其大小为两个边距中的最大值(或如果它们相等，则仅为其中一个)，这种行为称为外边距折叠
    • 注意：有设定浮动和绝对定位的元素不会发生外边距折叠
    • 现象
      • 如果两个外边距都是正数，最终外边距将为两个边距值中更大的一个
      • 如果两个外边距一正一负，最终外边距将为两个边距值之和
      • 如果两个外边距都是负数，最终外边距将为两个边距值中更小的一个
  • 同一层两个相邻元素之间：如果上下两个元素都在同一侧有外边距
    • 解决方法：让两个元素不直接接触
      • 使用BFC，在其中一个元素外包裹一层overflow: auto;的元素，这样两个元素不在同一层，不会发生外边距重叠
      • 只给一个元素设置外边距
      • 底部元素不使用block布局
  • 没有设定padding和border分隔的父元素和后代元素之间：对第一个或最后一个后代元素设置的margin将和父元素的marign发生重叠，后代元素可能和父元素内容块边缘贴着
    • 使用BFC，把父元素的外边距和子元素的外边距间隔开
    • 父元素使用padding或border，使用padding或border将子元素的外边距限制在父元素里，内边距和外边距不会重叠
    • 为父元素添加clearfix
    • 子元素不使用block布局

5.1.3 BFC与clearfix

  • 既然提到了BFC和clearfix，就在这里简单介绍一下
  • BFC：全称为Block Formatting Context，块格式化上下文
  • 触发方法：
    • 根元素
    • float值非none
    • overflow值非visible
    • display值为inline-block、table-cell、table-caption、flex、inline-flex
    • position值为absolute、fixed
  • 特性
    • 属于同一个BFC的两个相邻容器的上下margin会重叠
    • 计算BFC高度时浮动元素也参与计算
    • BFC的区域不会与浮动容器发生重叠
    • BFC内的容器在垂直方向依次排列
    • 其中的元素的margin-left与BFC包含块的border-left相接触
    • BFC是独立容器，容器内部元素不会影响容器外部元素
  • 功能
    • 解决两个相邻元素的上下margin重叠问题(特性6)
    • 解决高度塌陷问题(特性2)
    • 实现多栏布局(两栏、三栏、圣杯、双飞翼等)

  • clearfix：是一种CSS技巧，可以在不添加新的html标签的前提下，解决让父元素包含浮动的子元素的问题

  • 原理通过clear属性控制，清除浮动元素对之后元素造成的影响(高度塌陷，元素重叠)，可选值有

    • left：清除左侧浮动元素对当前元素的影响
    • right：清除右侧浮动元素对当前元素的影响
    • both：清除两侧浮动元素对当前元素的影响的那侧

    后续元素也将受到此影响，渲染在下方

  • 对需要防止高度塌陷的父元素添加after伪类修复影响

    /**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    contenteditable attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
    *zoom: 1;
}

5.1.4 边框与轮廓样式

  • 在元素内边距之外就是边框，边框是元素内容和内边距周围的一到多条线段，默认情况下元素的背景到边框外边界处终止
  • 边框有三个要素：宽度(厚度)、式样(外观)、颜色，默认值如下
    • 边框的宽度默认为medium，对应值视具体情况定，通常为2px
    • 边框的默认颜色是元素自身的前景色color，如果没有指定和文本元素颜色相同
    • 边框式样默认为none，也就是不存在
  • 边框支持对四个方向分别设置值，也就是这些属性都支持像边距那样，接收1-4个值；当然也有对应的四边属性值，比如border-bottom-width

主要的border属性

  • 边框的式样：式样是边框的重要的要素，如果没有式样，根本看不到边框

    • none：不显示边框。在这种情况下，如果没有设定背景图片，边框宽度将为0。在单元格边框重叠情况下，none值优先级最低，也就是有其他边框重叠时，显示其他边框
    • hidden：不显示边框。在这种情况下，如果没有设定背景图片，边框宽度将为0。在单元格边框重叠情况下，none值优先级最高，也就是有其他边框重叠时，不显示边框

    通过border-collapse属性可以设置能否重叠边框，默认是分隔模式separated，可以设置为collapsed与相邻元素共享边框，这时会发生边框重叠

    • dotted：显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是边框宽度计算值的一半
    • dashed：显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定
    • solid：显示为一条实线
    • double：显示为一条双实线
    • groove和ridge：显示为浮雕效果的边框
    • inset和outset：显示为塌陷效果的边框
    边框效果预览
    <table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
    /* 定义表格外观 */
table {
  background-color: #52e396;
}
tr,
td {
  padding: 2px;
}

/* border-style 示例 */
.b1 {
  border-style: none;
}
.b2 {
  border-style: hidden;
}
.b3 {
  border-style: dotted;
}
.b4 {
  border-style: dashed;
}
.b5 {
  border-style: solid;
}
.b6 {
  border-style: double;
}
.b7 {
  border-style: groove;
}
.b8 {
  border-style: ridge;
}
.b9 {
  border-style: inset;
}
.b10 {
  border-style: outset;
}

  • 边框的宽度border-width：宽度支持使用以下值

    • 非负数的长度：实际上这个值可能和实际渲染存在微小像素差距(可能和屏幕的分辨率window.devicePixelRatio有关，边框的渲染像素会受到分辨率影响，真实的宽度为设置宽度/window.devicePixelRatio)，其他绘制阶段的像素也是这样，比如阴影
    • thin、medium、thick关键字之一

    规范中没有明确定义每个关键字所表示的确切厚度，因此使用其中一个关键字的确切结果取决于具体实现。尽管如此，它们始终遵循thin ≤ medium ≤ thick这一模式，并且这些值在同一文档中是恒定的

    特殊的边框情况

    可以通过将边框宽度设置地比元素宽度大，实现边框包裹元素的效果，配合颜色，可以得到有趣的图形

    • 需要注意的是，当元素自身大小为0时，仅单边边框无法使边框绘制出来，至少需要设置相邻的两个边框宽度
    • 下图2就展示了一个设置了左下两个相邻边框的情况，这时只有左下角有边框
    边框宽度过大预览
    <div class="container">
  <div class="triangle"></div>
  <div class="triangle-down"></div>
  <div class="diamond"></div>
  <div class="trapezoid"></div>
</div>
    .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.triangle { 
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px;
  border-color: red green blue yellow;
}
.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  /* border-right: 50px solid transparent; */
  border-bottom: 100px solid red;
}

.diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;  /* 四条边都透明 */
  border-top: 0;
  border-bottom-color: red;        /* 底边红色 */
  position: relative;
}

.diamond::after {
  content: '';
  position: absolute;
  top: 50px;                       /* 和上边框对齐 */
  left: -50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 0;
  border-top-color: red;           /* 顶边红色 */
}

.trapezoid {
  width: 100px;                     /* 下边宽 */
  height: 0;                        /* 高度为0 */
  margin-top: 50px;            /* 与其他图像对齐 100px */
  border-bottom: 50px solid blue;   /* 梯形高度由 border-bottom 决定 */
  border-left: 25px solid transparent; 
  border-right: 25px solid transparent;
}

    :::

  • 边框的颜色border-color：仅支持设置颜色值，如果希望边框消失可以设置透明值transparent

这三个属性可以通过border统一设定

其他的border属性

  • 边框的其他属性

  • 圆角边框border-radius：默认的元素边框角是直角，此属性让边框有圆滑的边角

    • 边框角支持1-4个长度值或长度值对
    /* 支持长度值 */
border-radius: 1em;

/* 支持长度对 */
border-radius: 4px 3px 6px / 2px 4px;

/* 长度对等价于： */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
    • 计算方法：如果是长度对，第一个参数对应横轴(椭圆中心点与左右边框的距离)，第二个参数对应纵轴(椭圆中心点与上下边框的距离)
      • 如果提供非百分数长度值，实际上在对应角通过内切椭圆的方式将边角弯曲成圆弧，圆的半径为长度值
      • 如果提供百分数，百分数将换算为对应长宽经此百分数比例后的长度值
    • 不同数值个数对应的数值含义，实际上是从左上角按顺时针补全四角对应值
      • 一个值，四边边角
      • 两个值，左上右下角、右上左下角
      • 三个值，左上角、右上左下角、右下角
      • 四个值，左上角、右上角、右下角、左上角
    • 即使没有边框，圆角也可以对背景产生影响，具体效果与background-clip相关
    • 如果四边边框不同，浏览器会有一个过渡效果，并尽量平滑，较粗的曲线到较窄的曲线，边框会慢慢收窄

图像边框

  • 图像边框border-image-source：默认为none，即使用普通边框样式，不添加图片边框，如果使用图片值，将额外把对应图片作为边框，受其他border-image-*的影响

    • border-image-slice属性用于分隔边框图像，除了最后的fill可选关键字外，可以有1-4个输入值

      边框图像分割
      边框图像分割
      • 如果只提供一个参数，那么上、右、下、左都将使用该值进行分割
      • 如果提供两个参数，那么第一个参数用于上方和下方，第二个参数用于左、右两个
      • 如果提供三个参数，那么第一个参数用于上方，第二个参数用于左、右两侧，第三个参数用于下方
      • 如果提供全部四个参数值，那么将按上、右、下、左的顺序对图像进行分割

    • border-image-width属性用于修改四边的边框厚度，可以接受1-4个参数值

      • 如果只提供一个参数，那么上、右、下、左都将使用该值设置图像边框的宽度
      • 如果提供两个参数，那么第一个参数用于上、下两个边框，第二个参数用于左、右两个边框
      • 如果提供三个参数，那么第一个参数用于上边框，第二个参数用于左、右两个边框，第三个参数用于下边框
      • 如果提供全部四个参数值，那么将按照上、右、下、左的顺序设置图像边框四个方向上的宽度

    • border-image-outset属性定义边框图像可超出边框盒的大小

      • 如果只提供一个参数，那么该参数将同时作用于四边
      • 如果提供两个参数，那么第一个参数将用于上、下两个边框，第二个参数将用于左、右两个边框
      • 如果提供三个参数值，那么第一个参数将用于上边框，第二个参数将用于左、右两个边框，第三个参数将用于下边框
      • 如果提供全部四个参数值，那么将按上、右、下、左的顺序作用于四边

    • border-image-repeat属性用于设置边框的图像的填充效果

      • stretch：将被分割的图像使用拉伸的方式来填充满边框区域
      • repeat：将被分割的图像使用重复平铺的方式来填充满边框区域，当图像碰到边界时，超出的部分会被截断
      • round：与repeat关键字类似，不同之处在于，当背景图像不能以整数次平铺时，会根据情况缩放图像
      • space：与repeat关键字类似，不同之处在于，当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围

      属性能够接受1-2个参数值：如果提供两个参数，那么第一个参数将用于水平方向，第二个将用于垂直方向；如果只提供一个参数，那么将在水平和垂直方向都应用该值

轮廓

  • 轮廓outline，在实际使用中，轮廓一般直接绘制在边框外侧，但轮廓和边框不同
    • 轮廓不占空间
    • 轮廓可以不是矩形，行内非置换元素的轮廓会因为换行变成多边形
    • 轮廓不能单独设置某一边
  • 轮廓的设置很简单，和边框一样，有三种主要属性，这三个值可以通过outline属性统一设定
    • outline-color：设置一个元素轮廓的颜色，支持单一颜色值
    • outline-style：设置一个元素轮廓的样式，取值相比border减少了hidden，增加了auto，对应用户代理的自定义效果
    • outline-width：设置一个元素轮廓的宽度，仅允许单一非负数长度值或thin、medium、thick关键字
  • outline-offset：用于设置轮廓与元素边缘或边框之间的间距，默认是0，没有间距，支持单一长度值

5.1.5 投影

  • box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开，每个阴影可以设置X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色，一般地一个阴影的属性为inset 长度列表 颜色
    • 当给出两个、三个或四个长度值时
      • 如果只给出两个值，那么这两个值将会被当作X和Y轴偏移量来解释
      • 如果给出了第三个值，那么第三个值将会被当作模糊半径解释
      • 如果给出了第四个值，那么第四个值将会被当作扩散半径来解释
      • inset是可选的，如果没有设置，阴影在边框外，如果设置，阴影在边框内
      • 颜色是可选的，如果不设置将由浏览器决定，safari目前取值为透明
    • 模糊半径值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利
    • 取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大
    • inset可以在开头，也可以在结尾，不能在长度列表和颜色之间设置

    当未设置inset，盒子投影看起来有部分在元素下面，但实际上投影不是一个完整的图形，会被元素裁切，透过元素能够看到父元素的背景，却不会看到元素自身设置的投影

5.2 block布局

  • block布局是大多数元素的默认布局方式，在完全默认的情况下有几个特点
    • 每个块级元素各占一行，下一个块级元素在当前块级元素的下方另起一行
    • 可以设置盒子模型中的所有14个值
    • 默认情况下，块级元素会占据父元素100%的宽度，并且高度根据子元素内容自适应。元素的总宽度和高度是边框盒子的宽度和高度
    • 两个块级元素通过上下外边距分隔，可能发生外边距折叠

5.3 inline布局

  • 块级元素相对比较简单，生成的块级框通常不和其他元素共处一行，行内元素就没有那么简单了，比如文本行，行内格式化模型会更复杂，常见的行内元素有匿名文本(不在任何行内元素中的字符串)、span、a和img，有以下几个特点
    • 如果一行空间不够大，放不下一个长行内元素，行内节点将自动分段换行
    • 如果一行空间足够放下接下来的多个行内元素，那么它和相邻的行内元素会一起放在同一行
    • 如果一行空间放不下多个行内元素，且需要分段的是图片这种无法拆分的内容，图片会另起一行
    • 行内非置换元素不能改变宽高，宽高根据内容决定
    • 行内非置换元素外上下边距设置无效，外左右边距和内边距正常
    • 行内置换元素底部将和本行基线对齐

5.3.1 行内格式化

  • 先考虑只含文本的行内元素和匿名文本元素，这些元素也被称为行内非置换元素(内容直接显示，不会被置换)

    行框和行高
    行框和行高

  • 这些元素对外边距的设置受限，需要通过line-height设置行高，实现设置上下外边距的效果，属性取值在line-height部分介绍过

    • 每个元素无论是否是行内元素都有line-height属性，只是此属性只对行内文本元素有效
    • 如果行高比字体大小font-size更小，文字将可能和前后文本重合
    • 一行的行框高度将取该行行内元素的行内框高度最大值

  • 可以通过vertical-align控制行内框和行框的对齐方式，默认是baseline对齐，也就是上图中的效果，有以下的可选值，对齐下图中的各种线条

    基线情况
    基线情况
    • top：使元素及其后代元素的顶部与行框的顶部对齐
    • bottom：使元素及其后代元素的底部与行框的底部对齐
    • baseline：使元素的基线与父元素的基线对齐
    • middle：使元素的中部与父元素的基线加上父元素 x-height 的一半对齐
    • text-top：使元素的顶部与父元素的字体顶部对齐
    • text-bottom：使元素的底部与父元素的字体底部对齐
    • sub：使元素的基线与父元素的下标基线对齐
    • super：使元素的基线与父元素的上标基线对齐
    • 还可以使用长度单位，使元素的基线对齐到父元素的基线之上的给定长度或百分比。可以是负数。百分比是line-height属性的百分比

    如果是inline-block布局，只能使用top和bottom

  • 可以利用盒模型设置边框背景内边距等，但有以下几点需要注意

    • 对行内非置换元素设置内边距和边框不会影响行高，因此同时设置内边距和边框背景将导致行的背景或边框和相邻内容重叠
    • 在行内非置换元素断行显示时，默认是直接切开(slice)，如果设置的背景是重复的图片或使用边框时，可以考虑设置box-decoration-break属性，除slice有另外一个取值为clone，将每个断行片段视为独立部分单独运用装饰效果，这样可以保证装饰不会截断
    • 使用左右外边距的效果和块元素类似，相当于横向将文本推开，如果是负的值会使相邻文本靠近甚至折叠

  • 接下来考虑行内置换元素，比如图像，它们自身是有高度和宽度的，也支持通过盒子模型修改所有的边距、边框、宽度和高度，内边距和边框也像块元素一样占据空间

  • 默认情况下，行内置换元素将和文字基线对齐，通过修改外下边框可以设置元素距离基线的长度

    行内格式化模型的历史溯源

    CSS行内格式化模型确实过于复杂了，让人捉摸不透，究其原因是CSS规范要考虑向后兼容性，有许多历史遗留，也需要避免由修改决策带来其他的不良后果

5.3.2 inline-block元素

  • 这种元素是块级元素和行内元素的混合产物，从CSS2.1开始引入
    • 行内块级元素与其他内容的关系按行内框处理，也就是说，它在布局中和图像是一样的，底边默认和基线对齐，且内部不会断行
    • 行内块级元素的内容按块级元素处理，宽高等属性都可以应用到行内块级元素上

    行内块元素之间默认会存在空白间隙

    产生间隙的原因：

    • 元素被当成行内元素排版的时候，元素之间的空白符(空格、回车换行)都会被浏览器处理
    • 这些元素之间的间距会随着字体的大小而变化 解决办法：
    • 给父元素添加font-size:0px，同时子元素重写font-size(推荐)
    • 给元素添加float，脱离文档流会带来高度塌陷等问题
    • 图片底部的空隙，给图片添加display:block;使它成为block元素

5.3.3 display属性

  • display属性用于设置元素和子元素的布局方式，支持的属性值很多，所有属性值可以通过display所有属性简单了解和使用查看

    • 预组合值：包括block，inline，flex，grid，以及它们与inline-混合的值，用于指定对应的的布局方法，还包括flow-root
      • flow-root：在该元素生成一个块级元素盒，建立一个新的上下文
    • 盒值：包括content，使元素不产生任何边界框，内外边距、背景和边框都不会渲染；none将元素移出布局，就好像不存在一样，如果希望保留位置空间，应该使用visibility样式属性代替display
    • 列表值list-item：元素将作为列表li显示

    预定义值的双关键字语法

    预组合值还有对应的双关键字语法，对相同布局模式的内部和外部显示类型需要单独的关键字，但似乎大多数人都使用传统的单值指定，常见的单值和对应的多值见下表，后面的值为内部显示类型

    单值语法多值语法
    blockblock flow
    flow-rootblock flow-root
    inlineinline flow
    inline-blockinline flow-root
    flexblock flex
    inline-flexinline flex
    gridblock grid
    inline-gridinline grid

  • 如果元素是浮动或绝对定位的，display的值可能会改变，改变关系如下图

    display计算值
    display计算值

5.4 浮动及其形状

  • 浮动的元素将脱离文档流，但对布局还有影响

    • 在很长一段时间里，浮动是布局的重要内容，但把浮动当做布局方法是无奈之选，现在已经有更好的布局方法
    • 但浮动还是很有趣的，可以快速完成文字环绕图片效果，通过浮动形状还可以定义浮动所占的位置形状
    • 同时如果希望网页兼容非常早期的浏览器，这种浏览器对弹性布局和网格布局的支持不一定完善，还是需要浮动

    脱离文档流的方法

    脱离文档流可以避免影响之后的布局，也可以用于避免元素大小变化撑开空间，常用的实现如下

    • 浮动float：使元素不占用父元素空间，如果不希望可以为父元素的after伪类添加clear属性修复，见BFC与clearfix
    • position: absolute：使元素使用绝对定位，脱离文档流
    • position: fixed：使元素使用固定定位，脱离文档流
    • 设置父元素固定宽高，然后在子元素中设置更大的宽高：因为父元素的宽高固定，子元素就可以超出父元素范围，其他父元素的兄弟元素不会改变位置、祖先元素也不会改变大小

  • 通过float属性可以方便地为元素设置浮动

    • 默认属性是none也就是不使用浮动
    • 可以使用left关键字设置向左浮动，浮动的元素将向左横向排列
    • 可以使用right关键字设置向右浮动，浮动的元素将向右横向排列

    设置了float属性的元素将强制按照块级元素display: block显示，但子元素按照display继承

  • 设置了浮动的元素将和之后的布局元素在同一行，可以在之后的元素通过clear属性控制是否同行，可以使用之前提到的clearfix

    • clear指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear属性适用于浮动和非浮动元素
      • none：元素不会被向下移动以清除浮动
      • left：元素被向下移动以清除左浮动
      • right：元素被向下移动以清除右浮动
      • both：元素被向下移动以清除左右浮动
      • inline-start：元素被向下移动以清除其包含块的起始侧浮动，即ltr时清除左浮动，rtl时清除右浮动
      • inline-end：元素被向下移动以清除其包含块的结束侧浮动，即ltr时清除右浮动，rtl时清除左浮动
  • 浮动详解
  • 浮动的容纳块：浮动元素的容纳块是最近的块级祖先元素
  • 浮动元素的位置受一系列规则约束
    • 浮动元素的外边界不能超过容纳块的内边界，除非设置了负的外边距。但最好不要设置负的外边距，因为CSS规范中写用户代理无需为后面的元素腾出空间而重排前面的元素，前面元素将被遮住
    • 浮动元素不会重叠，除非之后的浮动元素顶边在前一个浮动元素的底边下，后一个设置左/右浮动的元素的位置一定在前一个元素的右/左边，避免同行同边浮动的元素相互重叠
    • 左浮动元素的右外边界不能在右浮动元素的左边界的右边，避免同行左右浮动的元素相互重叠
    • 浮动元素的顶边不会比父元素的顶边高，如果浮动元素在两个会发生外边距折叠的元素之间，给浮动元素增加一个块级父元素
    • 浮动元素的顶边不比前方任何一个浮动或块级元素的顶边高
    • 浮动元素的顶边不能高于前一个元素的行框顶边
    • 如果浮动元素一行放不下，将挤到新的一行
    • 浮动元素将在满足前面条件的情况下尽量上移
    • 浮动元素将尽量向左向右移
  • 浮动元素与内容重叠处理：对于使用负外边距导致元素重叠的时候，前面的元素是行内元素和块级元素会影响最终显示效果
    • 行内元素和浮动元素重叠，边框、背景和内容都在浮动元素之上
    • 块级元素和浮动元素重叠，内容在浮动元素之上，边框和背景都在浮动元素之下
  • 浮动形状：浮动元素占据的空间可以是非矩形的，这使元素能够告别千篇一律的矩形
  • shape-outside属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了浮动元素所包裹的形状
    • 默认值none：浮动元素除了外边框没有其他形状
    • 形状盒关键字：根据浮动元素的边缘形状计算出浮动的区域，计算包括了border-radius制造出来的弧度
      • margin-box：定义一个由外边距的外边缘封闭形成的形状
      • border-box：定义一个由边界的外边缘封闭形成的形状
      • padding-box：定义一个由内边距的外边缘封闭形成的形状
      • content-box：定义一个由内容区域的外边缘封闭形成的形状
    • 基于形状函数创造出来的形状计算出的区域
    • 图片：提取并计算指定图片的非完全透明区域，作为浮动区域，png等图片格式有透明区域
      • 默认将图片完全透明部分剔除，可以通过shape-image-threshold设置透明度低于多少的区域应该被剔除，支持在[0,1]之间的值，超过这个范围将重置
  • shape-margin属性用于设定由shape-outside创建的CSS形状的外边距，支持单个长度值
    • 如果是百分比是相对容纳块元素width的百分比得到的长度值，设置超过浮动元素大小的margin将得到元素未裁剪的占位效果，默认值是0
    • 由于百分比将转换成对应的长度值，较大的百分比margin应该都会得到未裁剪的占位效果

一般情况下，浮动区域配合裁剪clip-path使用，具体见裁剪

设定百分比对应长度的例子
<span>内容块宽度为450px, 2% 对应 9px</span>
<select id="shapeMarginSelector">
    <option value="9px">9px</option>
    <option value="2%">2%</option>
    <option value="100%">100%</option>
</select>
<section>
  <div class="shape" style="shape-margin:9px;"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if one exists, probably
  knows its truth as we know it.
</section>
const selector = document.getElementById('shapeMarginSelector');
const shape = document.querySelector('.shape');

selector.addEventListener('change', (event) => {
  const selectedValue = event.target.value;
  shape.style.shapeMargin = selectedValue;
});
section {
  width: 450px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  transition: shape-margin 0.3s ease-in-out;
}

5.5 定位

  • position属性用于指定一个元素在文档中的定位方式。top，right，bottom和left属性则决定了该元素的最终位置
  • 可取值：
    • static：元素正常的布局行为，即元素在文档常规流中当前的布局位置。此时top, right, bottom, left和z-index属性无效
    • relative：在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移，因此会在此元素未添加定位时所在位置留下空白，上下左右决定元素偏移量，top是向下偏移，left是向右偏移
    • absolute：绝对定位的元素脱离了文档流，在布置文档流中其他元素时，绝对定位元素不占据空间
    • fix：与绝对定位类似，只是元素的包含块为viewport视口，该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素
    • sticky：可以被认为是relative定位和absolute定位的混合，元素在跨越特定阈值前为relative定位，之后为absolute定位，上下左右决定离视口边框多近时改为absolute定位，必须提供至少一个值

包含块

包含块是position布局元素的关键

  • 对于static和relative元素，包含块是最近的块级、表单元格或行内块祖先的内容边缘
  • 对于absolute元素，包含块是最近的非static定位元素
    • 如果是块级元素，就是相对元素的内边距区域边缘(和边框区域相交的边缘)
    • 如果是行内元素，就是相对元素的内容区域
      • 在从左向右LTR的书写中，包含块的上边和左边取自祖先的第一个盒子的内容区的上边和左边，而下边和右边则取自祖先的最后一个盒子的内容区的下边和右边
      • 在从右向左RTL的书写中，包含块的右边取自祖先第一个盒子的内容区右边，而左边取自祖先最后一个盒子的内容区左边，上边和下边的规则与LTR情况相同
    • 如果找不到就相对于初始包含块，初始包含块是包裹住整页面的<html>元素的包裹块，默认和视口大小相同，如果其中元素高度更高，初始包含块大小也会扩大
  • 对于fixed元素，包含块是视口，如果是像打印这样的分页媒体，包含块是页区域(每页都有)
  • 对于sticky元素，包含块规则类似absolute元素，但有特殊粘性约束矩形，只有满足限制条件后效果才生效
    • 粘性约束矩形是通过top、right、bottom、left属性设置的，规定了元素最少只能相对包含块视觉区域边缘距离多少，如果超过限制就会固定在那里
    • 比如设置top: 2em;，如果元素将接近顶部2em，将固定在离顶部2em的位置
  • 如果元素是absolute元素或fixed元素，包含块还可以通过一下条件形成
    • 具有以下任意属性的值不为none：filter、backdrop-filter、transform或perspective
    • 具有contain属性，且其值为layout、paint、strict或content(例如：contain: paint;)
    • 具有container-type属性，且其值不是normal
    • 具有will-change属性，且该属性包含某个非初始值会创建包含块的属性(例如：filter或transform)
    • 具有content-visibility属性，且其值为auto
  • 定位类型：
    • 定位元素positioned element是其计算后位置属性为relative，absolute，fixed或sticky的一个元素(换句话说，除static以外的任何东西)
    • 相对定位元素relatively positioned element是计算后位置属性为relative的元素
    • 绝对定位元素absolutely positioned element是计算后位置属性为absolute或fixed的元素
    • 粘性定位元素stickily positioned element是计算后位置属性为sticky的元素

    通过定位可以让一些元素重叠，可以通过z-index设置重叠次序，支持整数值，包括负数，数字大的展示在上面，默认情况下，绝对定位absolute元素显示在static元素上面

  • 定位元素的定位方法：使用top、right、bottom、left属性可以调节元素外边框盒子margin-box的位置

    • 这些属性在不同的position值下有不同的语义
      • relative：元素在正常位置的基础上，通过top、right、bottom、left属性调节偏移位置
      • absolute：通过top、right、bottom、left属性调节相对包含块的位置
      • fixed：通过top、right、bottom、left属性调节相对于视口位置
      • sticky：元素在正常位置的基础上，通过top、right、bottom、left属性调节相对包含块的位置，当元素距离包含块的这些边界距离短于指定值时，会固定在对应的位置
    • 可以使用inset属性统一调节，和padding属性一样，这个属性按照top、right、bottom、left属性的顺序依次调节，支持类似的值复制规则

  • 定位单位

    • 百分比单位：四周距离可以使用百分比作为值，对应着包含块的宽高的百分比
      • 元素的宽高也是基于包含块的宽高进行百分比计算
      • 元素的padding和margin属性也变为基于包含块的宽度进行百分比计算
    • 负值：负值表示向包含块外的对应方向移动
    • 默认值：auto
      • top：默认和元素的静态位置上外边距边界到容纳块顶边的距离相等，静态位置指的是元素在常规文档流中的位置，也就是static元素且float为none，clear为none的情况
      • left等属性也类似

    绝对定位的尺寸调节

    大多数情况下，宽高被设定为auto的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通过指定top和bottom，保留height未指定(即auto)，来填充可用的垂直空间。它们同样可以通过指定left和right并将width指定为auto来填充可用的水平空间

    除了刚刚描述的情况，一旦元素设置了宽高：

    • 如果top和bottom都被指定(严格来说，这里指定的值不能为auto)，top优先
    • 如果指定了left和right，当direction设置为 ltr(水平书写的中文、英语)时left优先，当direction设置为rtl(阿拉伯语、希伯来语、波斯语由右向左书写)时right优先

5.6 表格布局

5.7 列表

  • 下面的属性只支持列表元素使用

    值描述
    list-style-type定义列表所使用的项目符号的类型，如果希望自定义效果，可以考虑@counter-style
    list-style-position设置列表项目符号的位置及列表项的对齐方式
    list-style-image定义一幅图像，取代项目符号
    list-style上述list-style-*合并简写形式

5.7 滚动条

  • 在WebKit内核的浏览器中(包含谷歌系和苹果的浏览器)，滚动条的样式可以通过::-webkit-scrollbar-*选择器进行设置；在Firefox浏览器中，滚动条的样式可以通过scrollbar-*属性设置

5.7.1 webkit

  • 滚动条::-webkit-scrollbar选择器：这个选择器主要是设置滚动条的垂直条宽度width和水平条高度height，如果自定义样式的话，必须设置两个属性才能生效
  • 滚动条滑块::-webkit-scrollbar-thumb选择器：这个选择器主要是设置滚动条的滑块样式，滑块的样式包括滑块的背景颜色、滑块的圆角、滑块的阴影
  • 滚动条轨道::-webkit-scrollbar-track选择器：这个选择器主要是设置滚动条的轨道样式，轨道的样式包括轨道的背景颜色、轨道的圆角、轨道的阴影
  • 悬停状态::-webkit-scrollbar-thumb:hover选择器：这个选择器主要是设置滚动条滑块的悬停样式，

5.7.2 firefox

  • Firefox浏览器的滚动条样式仅支持设置滚动条宽度和颜色
    • scrollbar-width：设置滚动条的宽度，可选值有thin(细)、auto(默认)、none(无)
    • scrollbar-color：设置滚动条的样式，可选值有滚动条的背景颜色和滚动条的轨道颜色
最近更新