2-盒子模型
发表更新前端 / CSS25 分钟读完 (大约3726个字)

2-盒子模型

CSS盒子模型

盒模型

文档流（normalflow）

“文档流”指的是页面元素按照它们在HTML文档中的顺序自然排列的方式。

在文档流中，块级元素（如 <div>、<p>、<h1> 等）从上到下垂直堆叠，而行内元素（如 <span>、<a> 等）则在同一行水平排列，直到遇到换行符或空间不足导致换行。

文档流中的布局规则

  • 垂直堆叠：当一个块级元素位于另一个块级元素下方时，它们之间会有一定的垂直间距，这个间距通常是由元素的边距（margin）、内边距（padding）和边框（border）决定的。
  • 水平对齐：行内元素会在同一行内水平排列，当行内元素超出容器宽度时，它们会自动换行。
  • 元素尺寸：在文档流中，元素的尺寸（高度、宽度）可以根据内容自动调整，也可以通过CSS显式设定。

常见的脱离文档流的方法:

  • 浮动（float）：使用 float 属性可以让元素向左或向右浮动，这样它们就不会按照文档流正常堆叠。
  • 绝对定位（position: absolute）：绝对定位的元素可以放置在任意位置，而不受文档流的影响。
  • 相对定位（position: relative）：相对定位的元素仍然在文档流中，但它可以根据偏移量进行移动。
  • Flexbox（弹性盒子）：Flexbox是一种用于创建灵活、响应式布局的方法，它可以让子元素根据父容器的大小进行伸缩和排列。
  • Grid（网格布局）：Grid布局是一种二维布局系统，它可以更容易地控制元素的位置和大小。

块元素

  • 块元素会在页面中独占一行
  • 默认宽度是父元素的全部（会把父元素撑满）
  • 默认高度是被内容撑开（子元素）

行内元素

  • 行内元素不会独占页面的一行，只占自身的大小
  • 行内元素在页面中左向右水平排列（书写习惯一致）
  • 如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列
  • 行内元素的默认宽度和高度都是被内容撑开

行内块元素

  1. 行内显示：
    • 行内块元素像行内元素一样在同一行内显示，不会独占一行。
    • 多个行内块元素可以在同一行内水平排列，直到行满后自动换行。
  2. 可设置尺寸：
    • 行内块元素可以设置宽度（width）和高度（height）等尺寸属性。
    • 这使得行内块元素在布局时更加灵活，因为它们既可以作为行内元素使用，又可以控制其大小和位置。
  3. 垂直居中：
    • 行内块元素可以利用 vertical-align 属性来垂直对齐文本基线或上下边缘。
    • 这一点与纯行内元素不同，因为后者只能通过变换行高来间接影响垂直位置。
  4. 边距折叠：
    • 当行内块元素之间有垂直方向上的重叠时，它们之间的外边距（margin）会发生折叠现象，即两个相邻的外边距会合并为一个较大的外边距。

盒子模型

将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

每一个盒子都由一下几个部分组成：

  • 内容区（content）
  • 内边距（padding）
  • 边框（border）
  • 外边距（margin）

盒子模型

内容区（content）

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型

元素中的所有的子元素和文本内容都在内容区中

  • width和height 设置排列内容区的大小
  • width 设置内容区的宽度
  • height 设置内容区的高度

边框（border）

边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部

注意：边框的大小会影响到整个盒子的大小

  • border-width边框的宽度：默认 3px
    • border-top-width 上边框的宽度
    • border-right-width 右边框的宽度
    • border-bottom-width 下边框的宽度
    • border-left-width 左边框的宽度
  • border-color 边框的颜色：默认使用 color 的颜色值
  • border-top-color 上边框的颜色
  • border-right-color 右边框的颜色
  • border-bottom-color 下边框的颜色
  • border-left-color 左边框的颜色
  • border-style边框的样式：没有默认值，必须指定
    • border-top-style 上边框的样式
    • border-right-style 右边框的样式
    • border-bottom-style 下边框的样式
    • border-left-style 左边框的样式

不论是border-width 、 border-color 、border-style 还是其衍生出来的属性写法，都可以指定每个方向的边框情况

设定几个值就决定了对应方向的宽度、颜色或样式

  • 四个值：上 右 下 左
  • 三个值：上 左右 下
  • 两个值：上下 左右
  • 一个值：上下左右

其实不管设置几个值，只要记住：其顺序是按顺时针方向设置的，剩下的可以由矩形的对称性推导出来

border：简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

  • border-top 上边框的宽度、颜色和样式
  • border-right 右边框的宽度、颜色和样式
  • border-bottom 下边框的宽度、颜色和样式
  • border-left 左边框的宽度、颜色和样式
1
2
3
.box1 {
  border: 10px red solid;
}

内边距(padding）

内边距，也叫填充，是内容区和边框之间的空间

  • padding-top 上内边距
  • padding-right 右内边距
  • padding-bottom 下内边距
  • padding-left 左内边距

padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和边框中属性值设置一样

注意：内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距

外边距（margin）

外边距，也叫空白边，位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是 CSS 布局的一个重要手段

注意：外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置和占用空间

一共有四个方向的外边距：

1
margin-top

上外边距

  • 设置正值，元素自身向下移动
  • 设置负值，元素自身向上移动
1
margin-right

右外边距

  • 设置正值，其右边的元素向右移动
  • 设置负值，其右边的元素向左移动
  • 上述说法并不准确，对于块元素，设置margin-right不会产生任何效果 
    1
    margin-bottom

下外边距

  • 设置正值，其下边的元素向下移动
  • 设置负值，其下边的元素向上移动
  • 上述说法并不准确，对于块元素，会有垂直方向上的边距重叠问题（后面会细说）
1
margin-left

左外边距

  • 设置正值，元素自身向右移动
  • 设置负值，元素自身向左移动

元素在页面中是按照自左向右的顺序排列的，所以默认情况下

  • 如果我们设置的左和上外边距则会移动元素自身
  • 而设置下和右外边距会移动其他元素

水平方向布局

元素在其父元素中水平方向的位置由以下几个属性共同决定

  • margin-left
  • border-left
  • padding-left
  • width
  • padding-right
  • border-right
  • margin-right

一个元素在其父元素中，水平布局必须要满足以下的等式

1
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的宽度

以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束

则等式会自动调整调整的情况：

  • 如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式满足

    100 + 0 + 0 + 200 + 0 + 0 + 0 = 800 ==> 100 + 0 + 0 + 200 + 0 + 0 + 500 = 800

  • 如果这七个值中有auto的情况，则会自动调整auto值以使等式成立

    这七个值中有三个值可以设置为auto ：width、margin-left、maring-right

    1. 如果某个值为 auto，则会自动调整auto的那个值以使等式成立
      200 + 0 + 0 + auto + 0 + 0 + 200 = 600 ==> 200 + 0 + 0 + 400 + 0 + 0 + 200 = 800

      auto + 0 + 0 + 200 + 0 + 0 + 200 = 600 ==> 400 + 0 + 0 + 200 + 0 + 0 + 200 = 800

      200 + 0 + 0 + 200 + 0 + 0 + auto = 600 ==> 200 + 0 + 0 + 200 + 0 + 0 + 400 = 800

    2. 如果宽度为auto，则宽度会调整到最大，其他auto的外边距会自动设置为 0

      auto + 0 + 0 + auto + 0 + 0 + 200 = 600 ==> 0 + 0 + 0 + 600 + 0 + 0 + 200 = 800

      200 + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 200 + 0 + 0 + 600 + 0 + 0 + 0 = 800

      auto + 0 + 0 + auto + 0 + 0 + auto = 600 ==> 0 + 0 + 0 + 800 + 0 + 0 + 0 = 800

    3. 如果外边距都为auto，则auto的外边距会自动均分以使等式成立

      auto + 0 + 0 + 200 + 0 + 0 + auto = 600 ==> 300 + 0 + 0 + 200 + 0 + 0 + 300 = 800

垂直方向布局

元素溢出

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出

使用overflow/overflow-x/overflow-y属性来设置父元素如何处理溢出的子元素

可选值：visible/hidden/scroll/auto

  • visible 溢出内容会在父元素外部位置显示，默认值
  • hidden 溢出内容会被裁剪，不会显示
  • scroll 生成两个滚动条，通过滚动条来查看完整的内容
  • auto 根据需要生成滚动条

边距折叠

垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象

兄弟元素

兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值）

特殊情况：

  • 如果相邻的外边距一正一负，则取两者的和
  • 如果相邻的外边距都是负值，则取两者中绝对值较大的

父子元素

父子元素间相邻外边距，子元素会传递给父元素（上外边距）

行内元素的盒模型

  • 行内元素不支持设置宽度和高度

    1
    2
    3
    4
    5
    6
    .s1 {
      /* 行内元素设置了宽高也没用，不会生效 */
      width: 100px;
      height: 100px;
      background-color: yellow;
    }

  • 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

  • 行内元素可以设置border，垂直方向的border不会影响页面的布局

  • 行内元素可以设置margin，垂直方向的margin不会影响页面的布局

display用来设置元素显示的类型

  • inline将元素设置为行内元素

  • block 将元素设置为块元素

  • inline-block 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行

  • table将元素设置为一个表格

  • none元素不在页面中显示

  • visibility用来设置元素的显示状态

    • visible默认值，元素在页面中正常显示

    • hidden元素在页面中隐藏不显示，但是依然占据页面的位置

      1
      2
      3
      4
      5
      6
      .s1 {
        margin: 100px;
        background-color: yellow;
        display: block;
        visibility: hidden;
      }

盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing用来设置盒子尺寸的计算方式（设置 width 和 height 的作用）

1
2
3
4
5
6
7
8
.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: 10px red solid;
  /* box-sizing: content-box; */
  box-sizing: border-box;
}

可选值：

  • content-box 默认值，宽度和高度用来设置内容区的大小

    image-20210523192824864

  • border-box 宽度和高度用来设置整个盒子可见框的大小

    image-20210523192847224

width和height指的是内容区、内边距和边框的总大小

轮廓

outline用来设置元素的轮廓线，用法和border一模一样

轮廓和边框不同点是，轮廓不会影响到可见框的大小

边框

1
2
3
4
5
6
.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: 10px red solid;
}

image-20210523193426492

轮廓

1
2
3
4
5
6
.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  outline: 10px red solid;
}

image-20210523193328096

可以很明显看到outline与border的区别

我们一般不会直接这么设置轮廓，而是下面这种场景

1
2
3
.box:hover {
  outline: 10px red solid;
}

动画2021-47

从上面的动态图也可以很清晰地看出，outline属性并没有改变盒子的布局

阴影

box-shadow属性用于在一个元素的框架周围添加阴影效果

你可以设置多个由逗号分隔的效果

一个盒状阴影由相对于元素的 X 和 Y 的偏移量、模糊和扩散半径以及颜色来描述

box-shadow用来设置元素的阴影效果，阴影不会影响页面布局

1
2
3
4
5
6
.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
  box-shadow: 10px 10px orange;
}

image-20210523200019261

1
box-shadow: 10px 10px 5px orange;

image-20210523200055142

1
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);

image-20210523200335892

  • 第一个值-水平偏移量：设置阴影的水平位置
    • 正值向右移动
    • 负值向左移动
  • 第二个值-垂直偏移量：设置阴影的垂直位置
    • 正值向下移动
    • 负值向上移动
  • 第三个值-阴影的模糊半径
  • 第四个值-阴影的颜色

圆角

border-radius属性使一个元素的外边框边缘的角变圆

你可以设置一个半径来做圆角，或者设置两个半径来做椭圆角

border-radius 用来设置圆角，圆角设置的是圆的半径大小

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius
1
border-radius: 20px;

image-20210523200759864

#
关注我

最新文章

分类

×