css整理

如何理解HTML语义化

让人更容易读懂(增加代码可读性)

让搜索引擎更容易读懂 (SEO )

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

• 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
• 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

对盒⼦模型的理解

当对⼀个⽂档进⾏布局（layout）的时候，浏览器的渲染引擎会根据 CSS 盒模型

（CSS basic box model），将所有元素表示为⼀个个矩形的盒⼦（box）

⼀个盒⼦由四个部分组成： content 、 padding 、 border 、 margin

content ，即实际内容，显示⽂本和图像

boreder ，即边框，围绕元素内容的内边距的⼀条或多条线，由粗细、样式、颜⾊三部分组成

padding ，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒⼦的 backgrou

nd 属性影响

margin ，即外边距，在元素外创建额外的空⽩，空⽩通常指不能放其他元素的区域

css隐藏元素的方法

overflow:hidden

opacity:0：设置透明度，但仍然占据位置，事件可响应

visibility:hidden：占据位置，但不响应事件

display:none：不占据位置

position:absolute

clip(clip-path):rect()/inset()/polygon()

z-index:-1000

transform:scaleY(0)：占据位置，不响应事件

标准盒模型与怪异盒模型

对于标准盒模型，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

对于IE盒模型（怪异盒模型），width 和 height 指的是内容区域+border+padding的宽度和高度。元素内容的宽度和高度是由已设定的宽度和高度分别减去边框和内边距后得到的。

下列box是一个怪异盒模型，可以看出，其content只有70px，加上padding和border才等于width: 100px

.box {
  height: 100px;
  width: 100px;
  margin: 10px;
  padding: 10px;
  border: 5px solid black;
  background-color: pink;
  box-sizing: border-box;
}

现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是W3C在css3中加入box-sizing：

box-sizing: content-box // 标准盒模型

box-sizing: border-box // 怪异盒模型

一句话总结就是：

标准盒模型的大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。

块级元素、行内元素、行内块元素区别

1. 块级元素 block

块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可自定义 width 和 height。除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。

块级元素有以下特点：

• 每个块级元素都是独自占一行；
• 高度，行高，外边距（margin）以及内边距（padding）都可以控制；
• 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%；
• 多个块状元素标签写在一起，默认排列方式为从上至下；

<address>  // 定义地址 
 <caption>  // 定义表格标题 
 <dd>      // 定义列表中定义条目 
 <div>     // 定义文档中的分区或节 
 <dl>    // 定义列表 
 <dt>     // 定义列表中的项目 
 <fieldset>  // 定义一个框架集 
 <form>  // 创建 HTML 表单 
 <h1>    // 定义最大的标题
 <h2>    // 定义副标题
 <h3>     // 定义标题
 <h4>     // 定义标题
 <h5>     // 定义标题
 <h6>     // 定义最小的标题
 <hr>     // 创建一条水平线
 <legend>    // 元素为 fieldset 元素定义标题
 <li>     // 标签定义列表项目
 <noframes>    // 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
 <noscript>    // 定义在脚本未被执行时的替代内容
 <ol>     // 定义有序列表
 <ul>    // 定义无序列表
 <p>     // 标签定义段落
 <pre>     // 定义预格式化的文本
 <table>     // 标签定义 HTML 表格
 <tbody>     // 标签表格主体（正文）
 <td>    // 表格中的标准单元格
 <tfoot>     // 定义表格的页脚（脚注或表注）
 <th>    // 定义表头单元格
 <thead>    // 标签定义表格的表头
 <tr>     // 定义表格中的行

2. 行内元素 inline

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。 行内元素有以下特点：

• 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；
• 高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效 上下无效；
• 设置行高有效，等同于给父级元素设置行高；
• 元素的宽度就是它包含的文字或图片的宽度，不可改变；
• 行内元素中不能放块级元素，a 链接里面不能再放链接；

<a>     // 标签可定义锚 
 <abbr>     // 表示一个缩写形式 
 <acronym>     // 定义只取首字母缩写 
 <b>     // 字体加粗 
 <bdo>     // 可覆盖默认的文本方向 
 <big>     // 大号字体加粗 
 <br>     // 换行 
 <cite>     // 引用进行定义 
 <code>    // 定义计算机代码文本
 <dfn>     // 定义一个定义项目
 <em>     // 定义为强调的内容
 <i>     // 斜体文本效果
 <kbd>     // 定义键盘文本
 <label>     // 标签为 input 元素定义标注（标记）
 <q>     // 定义短的引用
 <samp>     // 定义样本文本
 <select> // 创建单选或多选菜单
 <small>     // 呈现小号字体效果
 <span>     // 组合文档中的行内元素
 <strong> // 加粗
 <sub>     // 定义下标文本
 <sup>     // 定义上标文本
 <textarea>     // 多行的文本输入控件
 <tt>     // 打字机或者等宽的文本效果
 <var>    // 定义变量

3. 行内块级元素 inline-block

行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如：input、img就是行内块级元素，它可设置高宽以及一行多个。 具体特点如下：

• 高度、行高、外边距以及内边距都可以控制；
• 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；

<button> 
<input>   
<textarea> 
<select> 
<img>

4. 元素类型转换 display

display：block ，定义元素为块级元素

display : inline ，定义元素为行内元素

display：inline-block，定义元素为行内块级元素

5. 总结

不管块级元素还是行内元素，区别:一是排列方式，二是宽高边距设置，三是默认宽度。

• 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示；
• 块级元素和内联块元素可设置 width、height 属性，而内联元素设置无效；
• 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度；

而行内块级元素又同时拥有块级元素和行内元素的特点。

display属性值及其作用

display属性用于控制HTML元素的显示方式，它有多个取值。以下是常见的几种display属性取值及其作用：

• block：将元素显示为块级元素，即占据整个父容器的宽度，可以设置宽度、高度、边距和填充等属性。默认情况下，HTML的大多数元素（如div、h1、p）都是块级元素。
• inline：将元素显示为行内元素，即只占据必要的宽度，不可以设置宽度、高度和上下边距，但可以设置左右边距和填充等属性。默认情况下，HTML的一些元素（如a、span、img）都是行内元素。
• inline-block：将元素显示为行内块级元素，即占据必要的宽度，同时可以设置宽度、高度、边距和填充等属性。行内块级元素可以像行内元素一样放置在一行内，但是可以像块级元素一样设置宽度和高度等属性。
• none：元素不被显示，可以在DOM树中存在，但是不占据任何空间。通常用于JavaScript操作元素时，临时隐藏某个元素。
• flex：将元素显示为弹性容器，用于设置子元素的排列方式，可以设置主轴方向、子元素对齐方式、空白间隔等属性。flex布局目前被广泛应用于响应式网页设计中。
• grid：将元素显示为网格容器，用于设置子元素的排列方式，可以设置行列数、网格大小、子元素位置等属性。grid布局是最新的CSS布局方式，支持复杂的网格排列，可以方便地实现多列布局和响应式设计。

还有其他一些display属性的取值，如table、table-cell、table-row等，它们用于控制元素的表格布局。不同的display属性取值对应不同的元素布局方式，开发者可以根据需要选择最合适的display属性取值，实现理想的网页布局效果。

CSS选择器权重计算

CSS权重的计算分为四个等级a,b,c,d；

权重计算这个东西不麻烦，就是分 4 类:

1. inlineStyle: 行内样式
2. #ID: ID选择器
3. .Class: 类,属性和伪类选择器
4. Element: 标签和伪元素选择器

其中行内样式中定义的声明属于a级，id选择器属于b级，属性选择器、class类选择器和伪类选择器属于c级，标签选择器属于d级；

四级当中a级权重值最高，d级权重值最低。权重值根据每个级别出现的数量进行计数，每个等级出现1次，就计数1次。

注意事项：

• !important声明的样式的优先级最高；
• 如果优先级相同，则最后出现的样式生效；
• 继承得到的样式的优先级最低；
• 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
• 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

计算出具体的权重后就可以进行比较：当两个权值进行比较的时候，是从A到D逐级将等级位上的权重值（如 权值 1,0,0,0 对应--> A，B，C，D）来进行比较的，如果相同等级下的值PK出结果，就不会进行后面的比较了。如果相同等级的数字相同，则继续比较下级的数字大小。低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的;

其中有些选择器是不参与优先级的计算，其中包括：通用选择器『*』号，，组合选择器中的子类选择器、相邻兄弟选择器、普通兄弟选择器。包含!important的CSS声明是特殊的存在，不参与权重值的计算，比a,b,c,d四个等级都高；在同时都包含!important时，又会根据选择器的匹配规则计算权重值。谁的权重值高，应用谁的样式。

推荐一个权重计算图

在 W3C 最新版的 选择器文档 中，行内样式已经从权重中移出了，权重变成了三类 [#ID, .Class, Element]

CSS中可继承与不可继承属性有哪些

可继承属性：
1.字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
2.文本系列属性
text-indent:文本缩进
text-align:文本水平对刘
line-height:行高
word-spacing:增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
3.元素可见性
visibility
4.表格布局属性
caption-side定位表格标题位置
border-collapse合并表格边框
border-spacing设置相邻单元格的边框间的距离
empty-cells单元格的边框的出现与消失
table-layout表格的宽度由什么决定<automatic.fixed.inherit>
5.列表布局属性
list-style-type文字前面的小点点样式
list-style-position小点点位置
list-style以上的属性可通过这属性集合
6.引用
quotes设置嵌套引用的引号类型
7.光标属性
cursor:箭头可以变成需要的形状

不可继承属性
1.display
2.文本属性
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
3.盒子模型属性
width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4.背景属性
background、background-color、background-image、background-repeat、background-position、background-attachment
5.定位属性
float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

常见的CSS定位布局

segmentfault.com/a/119000004…

默认文档流

默认文档流，指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式，其中每一个块元素都独占一行，行内元素则在一行之内从左到右排列，直到在当前行遇到了边界后，换到下一行的起点起点继续排列。

脱离文档流，即将元素从普通的布局排版（普通文档流）中脱离出来，其他盒子在定位的时候，会当做没看到它，两者位置重叠都是可以的，但是依然在DOM树中存在。

定位实现

我们可以通过设置css中position属性的值来设定元素的定位类型。position的值分为以下几种：

• static 默认(非定位元素)
• inherit 从父元素继承 position 属性的值
• relative 相对(定位元素)
• absolute 绝对(定位元素)
• fixed 固定(定位元素)
• sticky 粘滞(定位元素)

定位元素的特点: 可以使用定位规则。通过top、right、bottom、left来设置偏移量。绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

1.相对布局 position: relative;

• 不脱离文档流。
• 相对于它原来的位置移动。

案例： 想要达到下图的偏移效果，该如何实现呢？

从代码看出，只要在紫色div的样式属性设置了 position:relative; 之后，就可以使用left和 top设置与原来文档布局位置的偏移量。

实现代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .box {
        width: 500px;
        height: 500px;
        border: 2px solid black;
      }
      .box > div {
        width: 200px;
        height: 100px;
      }
      .one {
        background-color: blueviolet;

        position:relative;
        left: 50px;
        top: 50px;
      }
      .two {
        background-color: cyan;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="one"></div>
      <div class="two"></div>
    </div>
  </body>
</html>

2.绝对布局 position: absolute;

• 脱离文档流。
• 相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式），如果没有则以body为参照。(一般情况下，绝对定位元素都是嵌套在相对定位元素内容来使用)

案例： 我们将上述代码中的设置相对定位的代码改成绝对定位看看。

当设置紫色的div为绝对定位之后，发现蓝色的div不见了。
其实，蓝色的div并不是不见了，而是跟紫色的div重叠了。因为当紫色div被设置为绝对定位之后，就会脱离文档流布局，此时它就相当于漂浮了起来，而蓝色div的因为没有了紫色div的挤压，自然就上去与紫色div重叠在一起了。
接下来，让我们为紫色的div设置偏移量。

此时，我们发现紫色的div出现在了父元素外面，页面的左上角。这是因为它的父元素中没有定位元素，所以它的偏移量是相对于body来进行调整的。
接下来，我们将其父元素设置为相对定位，看看会发生什么？

这个时候我们看到紫色的div回到了它父元素中。

3.固定布局 position: fixed;

• 脱离文档流。
• 它相对于浏览器窗口进行定位，相当于就是把这个元素钉在了浏览器窗口上了，无论我们怎么操作滚动条都无法改变他的位置。

我们继续使用上面的代码，将紫色div中的绝对布局改成固定布局，并将其父元素的高度变大。

从上述GIF中，我们可以看出无论我们怎么操作滚动条，紫色div都在整个浏览器页面的固定位置。

这种定位方式最适合用于放置广告。

4.粘滞布局 position: sticky;

• 在没有达到阈值的时候是不脱离文档流（相对），达到阈值脱离文档流（固定），可以通过left、top、right、bottom来设定阈值。

了解了上述几种布局后，我们再来看看什么是粘滞布局。将一个定位元素设置为粘滞布局后，当我们没有到达设定的阈值后，它就像正常的文档流一样，显示在该出现的位置，一旦我们到达它设置的阈值后，他就会一直停留在我们设定好的位置上。效果图如下：

css代码如下：

.two {
        width: 100%;
        height: 100px;
        background-color: lightcoral;
        position: sticky;/* 设置为粘滞定位 */
        top: 0; /* 当该元素到达整个页面距离顶端0px的时候，他会一直停留在此位置 */
    }

定位元素层级 z-index
定位元素是浮动于正常的文档流上面的，我们可以通过z-index属性来设置元素的层级。
在哪些场景里我们会用到z-index这个属性呢？比如说，当我们做一个供用户输入登录信息的弹框时，我们希望当用户点击登录后，弹出的框不会被其他任何元素覆盖时，我们可以通过设置它的z-index属性，将其层级设置为最高即可。

下面这个案例将会帮助我们学习和理解z-index属性。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 600px;
            margin: 50px auto;
            border: 2px solid black;
            position: relative;
        }
        .box > div {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .one {
            background-color: red;
            top: 20px;
            left: 20px;
        }
        .two {
            background-color: orange;
            top: 40px;
            left: 40px;
        }
        .three {
            background-color: yellow;
            top: 60px;
            left: 60px;
        }
        .four {
            background-color: green;
            top: 80px;
            left: 80px;
        }
        .five {
            background-color: cyan;
            top: 100px;
            left: 100px;
        }
        .six {
            background-color: blue;
            top: 120px;
            left: 120px;
        }
        .seven {
            background-color: violet;
            top: 140px;
            left: 140px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
        <div class="six"></div>
        <div class="seven"></div>
    </div>
</body>
</html>

我们可以看到从顶到底依次是：紫、蓝、青、绿、黄、橙、赤。
如果我们想要从顶到底依次是：赤、橙、黄、绿、青、蓝、紫的话，只需要在每个div中设置z-index属性，就可以轻松实现。如下图所示：

部分CSS代码如下：

.one {
    background-color: red;
    top: 20px;
    left: 20px;
    z-index: 7;
}
.two {
    background-color: orange;
    top: 40px;
    left: 40px;
    z-index: 6;
}
.three {
    background-color: yellow;
    top: 60px;
    left: 60px;
    z-index: 5;
}
.four {
    background-color: green;
    top: 80px;
    left: 80px;
    z-index: 4;
}
.five {
    background-color: cyan;
    top: 100px;
    left: 100px;
    z-index: 3;
}
.six {
    background-color: blue;
    top: 120px;
    left: 120px;
    z-index: 2;
}
.seven {
    background-color: violet;
    top: 140px;
    left: 140px;
    z-index: 1;
}

margin取负值会怎样

item1设置margin-top: -20px

item3设置margin-left: -20px;

item1设置margin-bottom: -20px

item3设置margin-right: -20px;

讲一下BFC

BFC是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。为一个元素创建BFC，可以包含内部浮动。排除外部浮动，阻止外边距重叠。

理解BFC

理解BFC（块级格式化上下文）之前，先看一下FC（格式化上下文）是什么意思：

格式化上下文是决定盒子之间如何布局的环境，不同的格式化上下文如何布局盒子由自身的规则来决定。正常文档流下，盒模型归属到格式化上下文。块级盒子参加块级格式化上下文

BFC块格式化上下文 是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。因此BFC是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。

理解BFC的本质：为一个元素创建BFC，可以包含内部浮动。排除外部浮动，阻止外边距重叠。

BFC规则

内部盒子会在垂直方向排列

在同一个BFC中，垂直方向上，相邻两个盒子的margin会重叠，值取两者中较大的

BFC就是页面上的一个隔离的独立容器，里外互相不受影响

计算BFC元素的高度时，考虑BFC所包含的所有子元素，连浮动元素也要参与计算。

当元素不是BFC的子元素时，浮动元素高度不参与BFC计算（常见的盒子塌陷问题）

在一个BFC中，每个元素的左边缘都会紧贴着包含块的左边缘

BFC的区域不会与float box重叠。

BFC触发条件

• 根元素html
• 浮动元素（float不为none的元素）
• 绝对定位元素（position为absolute或fixed）
• overflow不为visible或clip的块级元素
• 行内块元素（display为inline-block）, 表格单元格（display为table-cell）
• display值为table-caption, flex, inline-flex
• display 值为 flow-root 的元素

使用 overflow: auto; 触发 BFC 的方法缺点在于不够直观，其次可能产生不必要的滚动条或剪切阴影等副作用。

因此mdn指出，使用 display: flow-root （或 display: flow-root list-item）将创建一个新的 BFC，而不会产生任何其他潜在的问题副作用。flow-root 关键字的意义是，创建的内容本质上类似于一个新的根元素（如 所做），并确定这个新的上下文如何创建及其流布局如何实现。

BFC应用1: 解决margin重叠

<head>
  <meta charset="UTF-8">
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: green;
      margin-bottom: 30px;
    }
    .box2 {
      width: 200px;
      height: 100px;
      background-color: green;
      margin-top: 50px;
    }

  </style>
</head>
<body>
  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
</body>

如下图所示，box1和box1此时同处于html的BFC中，并且box1和box2在垂直方向上相邻，所以会出现margin重叠，取两者其中较大的值50px

同⼀个 BFC 的俩个相邻的盒⼦的 margin 会发⽣重叠

那么如何解决呢？错误做法是直接给box1添加一个BFC，此时box1确实是已经形成了BFC（可以理解成box1内部形成了BFC），但是对于box1这个元素的本身，还是和box2同属于html的BFC中，所以还是会发生margin重叠

正确做法：要给box1套一层，然后给box1外层的盒子设置BFC

<head>
  <meta charset="UTF-8">
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: green;
      margin-bottom: 30px;
    }
    .box2 {
      width: 200px;
      height: 100px;
      background-color: green;
      margin-top: 50px;
    }
    .container {
      overflow: hidden;
    }

  </style>
</head>
<body>
  <div class="container">
    <div class="box1">盒子1</div>
  </div>
  <div class="box2">盒子2</div>
</body>

此时成功解决上下margin塌陷问题

BFC应用2：解决浮动高度塌陷问题

考虑如下场景

当给container里面的box设置浮动的时候，该div元素会脱离文档流，此时container不会有高度。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      background-color: yellowgreen;
      border: 2px solid black;
    }
    .box {
      border: 1px solid black;
      width: 100px;
      height: 100px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">盒子1</div>
  </div>
</body>

当元素不是BFC的子元素时，浮动元素高度不参与BFC计算（常见的盒子塌陷问题）

BFC能解决浮动元素塌陷问题的原因在于：BFC计算元素的高度时，考虑BFC所包含的所有子元素，连浮动元素也要参与计算。所以为container元素添加overflow属性来设置BFC，此时container是一个新的BFC，计算高度时会包含浮动的子元素，因此解决浮动塌陷问题。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      background-color: yellowgreen;
      border: 2px solid black;
      overflow: hidden;
    }
    .box {
      border: 1px solid black;
      width: 100px;
      height: 100px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">盒子1</div>
  </div>
</body>

BFC应用3：自适应两栏布局

每个元素的左外边距与包含块的左边界相接触。即使元素浮动，也会同样。

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .left {
      width: 100px;
      height: 150px;
      float: left;
      background: gray;
    }

    .right {
      height: 300px;
      background: rgb(170, 54, 236);
      background: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="left">LEFT</div>
  <div class="right">RIGHT</div>
</body>

创建一个新的BFC会排除外部浮动，因此为right创建BFC可以实现自适应两栏布局。为right元素添加overflow:hidden来创建一个新的BFC

.right {
  height: 300px;
  background: rgb(170, 54, 236);
  background: yellowgreen;
  overflow: hidden;
}

参考：

juejin.cn/post/711708…

fe.okki.com/post/622d99…

清除浮动的多种方法

当父容器自身没有高度时（高度为auto），且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动的本质就是清除浮动元素造成的影响。清除浮动之后，父级盒子会根据浮动的子盒子自动检测高度，父级盒子有高度后就不会影响下面的标准流。

额外标签法

在浮动元素的下面添加一个额外标签，并结合CSS属性clear来完成清除浮动的操作。需要注意空标签一定要是块级元素

在html中浮动元素后面加一个兄弟元素。clear 属性规定元素的哪一侧不允许其他浮动元素 。

<div class="wrapper">
    <div class="float"></div>
    <div class="clear"></div>
</div>

css

.wrapper {
    width: 500px;
    background-color: purple;
}

.son {
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
}

.clear {
    clear: both;
    background-color: pink;
}

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

利用BFC父级添加overflow

给父级添加overflow属性，值可以为hidden、auto、scroll。本质相当于为父级元素创建了一个新的BFC。

BFC能解决浮动元素塌陷问题的原因在于：BFC计算元素的高度时，考虑BFC所包含的所有子元素，连浮动元素也要参与计算。所以为container元素添加overflow属性来设置BFC，此时container是一个新的BFC，计算高度时会包含浮动的子元素，因此解决浮动塌陷问题。

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
  <img src="news-pic.jpg" />
  <p>some text</p>
</div>

伪元素clearfix清除浮动

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的父容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。（本质和额外标签法类似）

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clearfix:after{
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }

<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

在这里需要注意的是，.clearfix:after实际上是伪元素语法，CSS3中引入了.clearfix::after来将伪类和伪元素语法区分开，但是浏览器仍旧接受单冒号的写法。

双伪元素清除浮动

使用伪元素选择器，给浮动元素的父容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。以及添加一个:before伪元素，在开头也插入一个看不见的块元素。并应用clear:both属性。

.clearfix:before,
.clearfix:after {
    content: ””;
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

这里display: table作用是：让after 和 before 插入的两个伪元素位于一行显示，实现包夹住中间浮动元素的效果

设置父元素浮动触发 BFC

将包裹浮动元素的父元素设置为浮动元素，从而触发 BFC

缺点：会产生新的浮动问题。这样会使其整体浮动，影响布局，不推荐使用。

本质上就有两类方法，一类是利用CSS的clear属性来排除浮动，另一类则是利用BFC来清除浮动。其他一些所谓的方法本质也不过是以上两种而已。

什么是外边距折叠？如何解决外边距重叠问题

icodex.me/docs/css/%E…

www.zhihu.com/question/19…

tech.youzan.com/css-margin-…

两个或者多个普通流中相邻盒子的边距在垂直方向上会发生折叠的这种现象叫做外边距折叠。外边距折叠分为父子外边距折叠及兄弟外边距折叠。例如第一个盒子的margin-bottom为50px，下面盒子的margin-top为30px，两盒子之间的距离最终为50px，这个现象就是外边距折叠。

第一种情况： 两个相邻元素的下边距和上边距折叠

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相邻兄弟元素的外边距重叠</title>
    <style>
      .box {
        width: 600px;
        height: 100px;
        line-height: 50px;
        text-align: center;
        color: #333;
      }
      .box1 {
        background-color: #f60;
        margin-bottom: 100px;
      }
      .box2 {
        background-color: #a90;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </body>
</html>

第二种情况：父元素与子元素发生边距折叠：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>父级与子级的外边距重叠</title>
    <style>
      .box {
        line-height: 50px;
        text-align: center;
        color: #333;
      }
      .parent {
        width: 600px;
        height: 100px;
        background-color: #f60;
        margin-top: 100px;
      }
      .child {
        width: 600px;
        height: 50px;
        background-color: #a90;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box parent">
      <div class="box child">child</div>
    </div>
  </body>
</html>

如果仅仅只看我们的代码的话，父级的 margin-top 为 100px ，子级的 margin-top 为 50px，，如果相加的话为 150px，但实际结果如下所示：

外边距重叠的计算规则如下：

两个正数的外边距取最大的边距作为外边距。

如果一个为正数，一个为负数，最终的外边距为两者之和。

如果两个值都是负数的话，最终的外边距取绝对值最大的值。

什么时候会发生外边距折叠

都是普通流中的元素且属于同一个 BFC

没有被padding、border、clear和line box分隔开

两个或两个以上垂直方向的「相邻元素」(这里的相邻元素可能是兄弟节点也可能是父子节点)

• 盒子的margin-top和它第一个普通流子元素的margin-top
• 盒子的margin-bottom和它下一个普通流兄弟的margin-top
• 盒子的margin-bottom和它父元素的margin-bottom
• 盒子的top margin和bottom margin，且没有创建一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素

第四种情况是下列这种方式：

.demo {
    height: 30px;
    background: red;
}
.margin-test {
    margin: 20px 0 30px;
}

<div class="container">  
    <div class="demo"></div>
    <div class="margin-test"></div>
    <div class="demo"></div>
</div>  

这个demo是上面的第四种情况，元素自身的外边距top和bottom发生折叠，我们可以看出.container的高度为90px，这里可以看到margin-test的top和bottom外边距发生了折叠。

如何避免外边距折叠

上面讲了外边距的叠加，那如何避免呢，其实只要破坏上面讲到的四个条件中的任何一个即可：毗邻、属于同一个BFC、普通流和垂直方向。

前面已经提到了触发外边距折叠的条件，如果要避免外边距折叠只需破坏掉触发的条件即可，比如

解决相邻元素重叠：

1.在解决相邻元素外边距重叠时，将其中一个元素用div包裹，并在外层创建新的 BFC。

可以通过如下方式创建 BFC：

• float 的值不为 none
• overflow 的值不为 visible
• position 的值不为 static 或者 relative
• display 的值为 table-cell, table-caption, inline-block, flex 或 inline-flex 其中之一

2.底部元素设置为浮动 float:left;，float的元素和其他元素之间不会发生外边距折叠，

3.底部元素的position的值为absolute/fixed，position:absolute或者position:fixed的绝对定位元素其他元素之间不会发生外边距折叠

4.设置margin-top/margin-bottom时统一设置向上或向下

解决父子元素外边距折叠：

外层元素添加padding来将多个元素分隔开

外层元素添加 overflow:hidden等来创建新BFC，

外层元素添加透明边框 border:1px solid transparent来将元素分隔开。

内层元素绝对定位 postion:absolute:

内层元素 加float:left;或display:inline-block;

总之，解决外边距重叠大致可以分为通过创建BFC，以及设置浮动、绝对定位、固定定位等来脱离文档流，或者添加padding或border来将元素分隔开这三大类方法。

zoom:1的作用和原理

zoom属性是ie浏览器的专有属性，它可以设置或者检索对象的缩放比例。设置或者更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。

除了可以设置缩放比例，还可以触发ie的haslayout属性。这一点在清除浮动时很有用。

当浮动子元素导致父元素塌陷的时候，只要给父元素加上overflow: hidden;来解决，但是对于IE不行，需要触发其hasLayout属性才可以。 因此zoom:1常常用于处理清除浮动场景下，对IE浏览器做兼容性处理。

zoom在ie浏览器中常见作用总结

1、检查页面的标签是否闭合

2、样式排除法

3、模块确认法

4、检查是否清除浮动

5、检查ie下是否触发haslayout

6、边框背景调试法

CSS中clear属性的作用

clear 属性规定元素的哪一侧不允许其他浮动元素 。

clear语法：

clear : none | left | right | both

取值：

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

什么是响应式布局？响应式布局的基本原理是什么？如何做

juejin.cn/post/684490…

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，网站的布局会根据视口来调整模块的大小和位置。缺点就是CSS比较重。

响应式设计与自适应设计的区别

响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

响应式布局的实现方式

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

为了处理移动端，页面头部必须有meta声明viewport

视口配置代码示例：

<meta
  name="viewport"
  content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, width=device-width, user-scalable=no"
/>

上述代码示例的指令说明：

• width=device-width 表示自适应手机屏幕的尺寸宽度
• maximum-scale 表示网页缩放比例的最大值
• initial-scale 表示网页缩放的初始化比例
• user-scalable 表示用户是否可以进行缩放操作

完整指令说明：

媒体查询

以媒体查询实现响应式布局是痛通过 CSS3 @media 规则设置不同分辨率下的样式属性，来适配不同尺寸的屏幕设备。

不管是移动端优先还是 PC 优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是 min-width，PC 端优先使用的 max-width。

用具体代码举例：@media only screen and (min-width: 375px) and (max-width: 413px): 当屏幕宽度介于375px和413px之间时，将html元素的字体大小设置为100px。这一区间通常适用于iPhone 6/7/8和iPhone X等设备。

/* iPhone 6 7 8 */
body {
  background-color: yellow;
}

/* iPhone 5 */
@media screen and (max-width: 320px) {
  body {
    background-color: red;
  }
}

/* iPhoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
  body {
    background-color: orange;
  }
}

/* iPhone6 7 8 Plus */
@media screen and (min-width: 414px) {
  body {
    background-color: blue;
  }
}
/* iPad */
@media screen and (min-width: 768px) {
  body {
    background-color: green;
  }
}

/* iPad Pro */
@media screen and (min-width: 1024px) {
  body {
    background-color: gray;
  }
}

/* PC */
@media screen and (min-width: 1100px) {
  body {
    background-color: black;
  }
}

代码示例说明：

百分比布局

通过百分比单位 % 来实现响应式的效果。比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

height、width 属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：

• 子元素的 top/left 和 bottom/right 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度/宽度；
• 子元素的 padding 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 width，而与父元素的 height 无关；
• 子元素的 margin 如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的 width；
• border-radius 不一样，如果设置 border-radius 为百分比，则是相对于自身的宽度。
• translate、background-size等都是相对于自身的

有明显的以下两个缺点：

• 计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
• 可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

rem布局

rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要利用媒体查询，在不同分辨率下给 元素的 font-size 赋值，根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。

rem响应式的布局思想：

• 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
• 高度值可以设置固定值，设计稿有多大，我们就严格有多大
• 所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)
• 除媒体查询外，也可以用js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了

rem布局缺点：在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前

/*上述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。*/
function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

视口单位

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）。例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px

使用视口单位来实现响应式有两种做法：

仅使用vw

将设计稿的尺寸转换为 vw 单位，以适应不同视口宽度的设备。使用 Sass 函数编译，将设计稿的像素值转换为相应的 vw 单位值。

在 CSS 中，所有尺寸（如布局宽度、间距、字体大小等）都使用 vw 作为单位。这样，在不同尺寸的设备上，元素的大小和间距都会根据视口宽度进行自适应调整。

对于高清屏幕下的物理像素线，采用 transform: scaleY(0.5); 实现，使其在高清屏幕上显示为半个物理像素。

对于需要保持宽高比的图像，使用 padding-top 实现，保证图像的宽高比在不同设备上保持一致。

对于需要保持宽高比的图，应该用padding-top实现

.mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用 padding-top
    height: 0;  // 设置高度为 0，使得内容区域没有高度
    overflow: hidden;  // 隐藏超出内容区域的内容
}

.mod_banner img {
    width: 100%;  // 图片宽度占满父容器
    height: auto;  // 图片高度自适应，保持原始宽高比
    position: absolute;  // 绝对定位，相对于其第一个非 static 祖先元素进行定位
    left: 0;  // 图片相对于父容器左侧定位
    top: 0;  // 图片相对于父容器顶部定位
}

.mod_banner 类是图片容器的样式，通过设置 position: relative; 实现相对定位，后续绝对定位的图片将相对于该容器进行定位。设置 padding-top: percentage(100/700); 实现了一个特殊的技巧，即利用 padding-top 属性的百分比值来保持容器的高度和宽度的比例关系。percentage(100/700) 表示容器高度与宽度的比例为 700:100，也就是高度是宽度的 7 倍。因为 padding-top 的百分比值是相对于父容器宽度来计算的，所以通过这种方式可以保持容器的宽高比。

height: 0; 和 overflow: hidden; 用于隐藏容器的内容区域，这样容器的高度就由 padding-top 的百分比值确定了，而不是由其中的内容撑开。

.mod_banner img 类是图片的样式，通过设置 width: 100%; 让图片的宽度占满父容器，同时设置 height: auto; 让图片的高度根据宽度自适应，保持图片的原始宽高比。然后使用 position: absolute; 将图片相对于父容器进行绝对定位，这样可以使图片完全覆盖整个容器，并且不影响其他元素的布局。最后，通过 left: 0; 和 top: 0; 让图片定位到父容器的左上角。

结合rem与vw

可以结合rem和vw来实现布局

• 给根元素大小设置随着视口变化而变化的vw单位，这样就可以实现动态改变其大小
• 限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度

// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

图片实现响应式

图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

使用max-width（图片自适应）:

图片自适应意思就是图片能随着容器的大小进行缩放，可以采用如下代码：

img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

inline-block 元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。 max-width保证了图片能够随着容器的进行等宽扩充（即保证所有图片最大显示为其自身的 100%。此时，如果包含图片的元素比图片固有宽度小，图片会缩放占满最大可用空间），而height为auto可以保证图片进行等比缩放而不至于失真。如果是背景图片的话要灵活运用background-size属性。

那么为什么不能用width：100%呢？因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下，图片会被无谓地拉伸。

使用srcset

<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">

srcset 是 HTML 中 标签的一个属性，用于提供一组备选图像，让浏览器根据设备的像素密度选择合适的图像进行加载。

在这个属性中，每个备选图像都包含两部分：图像的 URL 和图像的密度描述符。密度描述符表示了图像的像素密度与屏幕的像素密度的比值。通常有两种取值：1x 表示图像的像素密度与屏幕的像素密度相等，2x 表示图像的像素密度是屏幕像素密度的两倍。在实际应用中，还可以使用其他倍数。

如果屏幕的dpi = 1的话则加载1倍图，而dpi = 2则加载2倍图，手机和mac基本上dpi都达到了2以上，这样子对于普通屏幕来说不会浪费流量，而对于视网膜屏来说又有高清的体验。

如果浏览器不支持srcset，则默认加载src里面的图片。

但是你会发现实际情况并不是如此，在Mac上的Chrome它会同时加载srcset里面的那张2x的，还会再去加载src里面的那张，加载两张图片。顺序是先把所有srcset里面的加载完了，再去加载src的。这个策略比较奇怪，它居然会加载两张图片，如果不写src，则不会加载两张，但是兼容性就没那么好。这个可能是因为浏览器认为，既然有srcset就不用写src了，如果写了src，用户可能是有用的。而使用picture就不会加载两张

使用background-image+媒体查询

.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}

在屏幕宽度小于或等于 767px 时，.banner 类就会应用 /static/small.jpg 作为背景图片，从而实现了在小屏幕设备上加载小尺寸的图片，以节省带宽和加快页面加载速度

使用picture标签

搭配picturefill.min.js ：解决IE等浏览器不支持 的问题

<picture>
  <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
  <source srcset="banner_w800.jpg" media="(max-width: 800px)">
  <img src="banner_w800.jpg" alt="">
</picture>

<!-- picturefill.min.js 解决IE等浏览器不支持 <picture> 的问题 -->
<script type="text/javascript" src="js/vendor/picturefill.min.js"></script>

picture必须要写img标签，否则无法显示，对picture的操作最后都是在img上面，例如onload事件是在img标签触发的，picture和source是不会进行layout的，它们的宽和高都是0。

另外使用source，还可以对图片格式做一些兼容处理：

响应式布局的成型方案

实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案：

• 利用上面的方法自己来实现，比如CSS3 Media Query,rem，vw等
• Flex弹性布局，兼容性较差
• Grid网格布局，兼容性较差
• Columns栅格系统，往往需要依赖某个UI库，如Bootstrap

在实际项目中，我们可能需要综合上面的方案，比如用rem来做字体的适配，用srcset来做图片的响应式，宽度可以用rem，flex，栅格系统等来实现响应式，然后可能还需要利用媒体查询来作为响应式布局的基础，因此综合上面的实现方案，项目中实现响应式布局需要注意下面几点：

• 设置viewport
• 媒体查询
• 字体的适配（字体单位）
• 百分比布局
• 图片的适配（图片的响应式）
• 结合flex，grid，BFC，栅格系统等已经成型的方案

px em rem rpx vw/vh 百分比%区别

px：绝对长度单位，来描述一个元素的宽高以及定位信息

rpx：微信小程序独有的、解决屏幕自适应的尺寸单位

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认16px）em作为字体单位，相对于父元素字体大小；em作为行高单位时，相对于自身字体大小，整个页面内 1em 不是一个固定的值。

rem：相对单位，可理解为”root em”，相对根节点html的字体大小来计算，CSS3新加属性，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊

vw/vh：viewpoint width / viewpoint height，vw 相对于视窗的宽度，vh 相对于视窗的高度，1vw等于视窗宽度的1%

百分比：百分比%是百分比布局中的单位，height、width 属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素。

px

绝对长度单位，根据维基百科解释：它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。很多时候，px 也常被称为 CSS 像素，在 PC 中，通常认为 1px 的真实长度是固定的

那 px 真的是一个设备无关，跟长度单位米和分米一样是固定大小的吗？

一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：

CSS 像素：为 Web 开发者提供，在 CSS 中使用的一个抽象单位

物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的

转换关系：CSS像素 = 物理像素／分辨率

假设PC 端：750 * 1134的视觉稿： 1 CSS像素 = 物理像素／分辨率 = 750 ／ 980 =0.76

假设移动端（iphone6为例），分辨率为375 * 667：1 CSS像素 = 物理像素 ／分辨率 = 750 ／ 375 = 2

所以 PC 端，一个CSS像素可以用0.76个物理像素来表示，而iphone6中 一个CSS像素表示了2个物理像素。此外不同的移动设备分辨率不同，也就是1个CSS像素可以表示的物理像素是不同的

注意，当浏览器页面缩放时，px 并不能跟随变大。当前网页的布局就会被打破。

rpx

rpx是微信小程序独有的、解决屏幕自适应的尺寸单位

可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为 750rpx

通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

rpx 和 px之间的区别：

在普通网页开发中，最常用的像素单位是px

在小程序开发中，推荐使用 rpx 这种响应式的像素单位进行开发

设计师在出设计稿的时候，出的都是二倍图，也就是说如果在这个设计稿上有一个宽高为 200px 的盒子，那么它最终画到页面上实际上是一个宽高为 100px 的盒子，那么再换算成 rpx 需要乘以 2 ，就又变成了 200rpx ，跟设计稿上的数字是一样的，所以我们可以保持数字不变，直接将单位 px 替换成 rpx

微信规定：屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。

em

相对长度单位，em只有与font-size属性搭配使用时，是相对于其父元素的 font-size 进行计算,如果当前元素未设置则相对于浏览器的默认字体尺寸。

用em设置其他属性单位的时候, 是相对于自身的字体属性大小,

<div class="a">A
    <div class="b">B
        <div class="c">C</div>
    </div>
</div>

<style>
	.a{ font-size:16px;}
	.b{ font-size:2em;} /* 相当于32px */
	.c{ font-size:1em;} /* 相当于32px */
</style>

rem

相对长度单位，CSS3 新增的一个相对单位，rem 是相对于根元素（html）的 font-size 进行计算，rem 不仅可设置字体大小，也可以设置元素宽高属性。

vw与vh

CSS3 特性 vh 和 vw：

vh 相对于视窗（网页视口高度）的高度，视窗高度是100vh

vw 相对于视窗（网页视口高度）的宽度，视窗宽度是100vw

这里是视窗指的是浏览器内部的可视区域大小，即 window.innerWidth/window.innerHeight 大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

百分比

通常认为子元素的百分比完全相对于直接父元素：

<div class="a">
    <div class="b"></div>
</div>
<style>
    .a{ width:200px; height:100px; background-color: aqua; } 
    .b{ width:50%; height:50%; background-color: blueviolet; }
</style>

需要注意的是，如果设置了top、margin、padding等：

• 子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位(默认定位)的父元素的高度
• 子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位(默认定位的)父元素的宽度
• 子元素的 padding/margin 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 padding/margin ，而与父元素的 height 无关。

CSS中的vw与vh

对于如下图，要准确区分几个概念，即网页视口高度、屏幕高度、body高度，

window.screen.height 表示 屏幕高度

window.innerHeight 表示网页视口高度

document.body.clientHeight 表示body元素的内容高度

vh 表示视口高度的百分比，其中 1vh 等于视口高度的1%

vw 表示视口宽度的百分比，其中 1vw 等于视口宽度的1%

vmax 取 vw 和 vh 中的较大值; vmin 取两者最小值

需要注意的是，如果设置了top、margin、padding等：

• 子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位(默认定位)的父元素的高度
• 子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位(默认定位的)父元素的宽度
• 子元素的 padding/margin 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 padding/margin ，而与父元素的 height 无关。

vw 与 %区别

vw、vh是相对于屏幕视口高度而言

vh 表示视口高度的百分比，其中 1vh 等于视口高度的1%

vw 表示视口宽度的百分比，其中 1vw 等于视口宽度的1%

%则是相对于直接父元素而言，子元素的百分比完全相对于直接父元素：

nth-child和nth-of-type的区别

nth-child(n)选择器匹配属于其父元素的第n个子元素，无论它的类型是什么，n可以是数字，关键词或公式。

nth-of-type(n)选择器匹配父元素中的特定类型的第n个子元素，它只考虑与给定类型匹配的子元素。n可以是数字，关键词或公式。

额外补充一点：nth-child会给所有子元素排序号，但是如果对应的元素和nth-child前面的标签不匹配，则无效。

<div class="content">
  <div>123</div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
</div>

对于下列样式，p:nth-child(1)匹配到div，但是它不是p，所以这个不会起作用。改为.content p:nth-child(2)可以，因为第二个标签<p>1</p>确实是一个p元素。

.content p:nth-child(1) {
  background-color: blue;
}
.content p:nth-of-type(2) {
  background-color: pink;
}

p:nth-of-type(7) 选择的 p元素所在的父元素下的第7个P元素 即：

第7个p

p:nth-child(6) 选择的 p元素所在的父元素下的第6个子元素，且该元素是P元素 即：

第5个p

flex布局

什么是flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex常见属性

容器属性

以下6个属性设置在容器上。

• flex-direction：主轴的方向
• flex-wrap：超出父容器的项目的排列方式
• flex-flow：flex-direction和flex-wrap属性的简写
• justify-content：项目在主轴的对齐方式
• align-items：项目在交叉轴的对齐方式
• align-content：多根轴线的对齐方式

flex-direction属性决定主轴的方向（即项目的排列方向）。主轴的方向不一定是水平的，这个属性就是设置主轴的方向，主轴默认是水平方向，从左至右，如果主轴方向设置完毕，那么交叉轴就不需要设置，交叉轴永远是主轴顺时针旋转 90°

.ele {
  flex-direction: row;                // 默认值，主轴为水平方向，起点在左端。
  flex-direction: row-reverse;        // 主轴为水平方向，起点在右端。
  flex-direction: column;             // 主轴为垂直方向，起点在上。
  flex-direction: column-reverse;     // 主轴为垂直方向，起点在下。
}

flex-wrap属性：默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果项目在一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性定义项目在交叉轴上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。也可以理解为用于设置子项在交叉轴的排列方式，并且只能用于子项出现换行的情况，在单行下没有效果。

该属性可能取6个值。

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

项目属性

以下6个属性设置在项目上。

• order：定义项目排列顺序
• flex-grow：定义项目的放大比例
• flex-shrink：定义项目缩小比例
• flex-basis：定义分配多余空间之前，项目占据的主轴空间
• flex：flex-grow，flex-shrink，flex-basis的简写
• align-self：用于设置单个项目有与其他项目不同的对齐方式

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目原本大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex:1具体代表什么

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto（后两个属性可选）。

flex:1 经常用作自适应布局，将父容器的 display：flex，侧边栏大小固定后，将内容区 flex：1，内容区则会自动放大占满剩余空间。

flex:1 其实是flex: 1 1 0%的简写。

flex-grow : 1;
flex-shrink : 1;
flex-basis : 0%;

翻阅MDN文档时写到，flex:1并不是只定义了flex-grow的值，而是同时定义了三个属性的值的一种简写方式。

flex单值语法，填写一个flex-grow的有效值时，简写会扩展为 flex: 1 0。

同时通过浏览器验证也可以得出：

当一个容器设置display:flex变成一个flex容器后，如果容器没有被占满，换言之有剩余空间，则flex-grow起作用。

相反，若空间不足，则flex-shrink起作用。

在计算放大或缩小比例时，要根据flex-basis的值来计算比例。

<div class="parent">
	<div class="item-1"></div>
	<div class="item-2"></div>
	<div class="item-3"></div>
</div>

<style type="text/css">
	.parent {
		display: flex;
		width: 600px;
	}
	.parent > div {
		height: 100px;
	}
	.item-1 {
		width: 140px;
		flex: 2 1 0%;
		background: blue;
	}
	.item-2 {
		width: 100px;
		flex: 2 1 auto;
		background: darkblue;
	}
	.item-3 {
		flex: 1 1 200px;
		background: lightblue;
	}
</style>

主轴上父容器总尺寸为 600px。

子元素的总基准值是：0% + auto + 200px = 300px，其中

0% 即 0 宽度

auto 对应取原尺寸即 100px

故剩余空间为600px - 300px = 300px

伸缩放大系数之和为2 + 2 + 1 = 5

每个项目的剩余空间分配如下

item-1 和 item-2 各分配 2/5，各得 120px
item-3 分配 1/5，得 60px

因此各项目最终宽度为：

item-1 = 0% + 120px = 120px
item-2 = auto + 120px = 220px
item-3 = 200px + 60px = 260px

当 item-1 基准值取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设。

而 item-2 基准值取 auto 的时候，根据规则基准值使用值是主尺寸值即 100px，故这 100px 不会纳入剩余空间。

flex属性的缩写规则

juejin.cn/post/696979…

developer.mozilla.org/zh-CN/docs/…

flex 为一个非负数字 n：该数字为 flex-grow 的值

flex ：n；
/* 等同于: */
flex-grow ：n；
flex-shrink ：1；
flex-basis ：0%；

flex 为两个非负数字 n1，n2:

分别为 flex-grow 和 flex-shrink 的值

flex ：n1 n2;
/* 等同于: */
flex-grow ：n1；
flex-shrink ：n2；
flex-basis ：0%；

flex 为一个长度或百分比 L：

视为 flex-basis 的值

flex : L;
/* 等同于: */
flex-grow ：1；
flex-shrink ：1；
flex-basis ：L；

flex 为一个非负数字 n 和一个长度或百分比 L：

分别为 flex-grow 和 flex-basis 的值

flex ：n L；
/* 等同于: */
flex-grow：n；
flex-shrink：1；
flex-basis：L;

可以发现，flex-grow 和 flex-shrink 在 flex 属性中不规定值则为 1，flex-basis 为 0%。

flex:1和flex:auto的区别

flex:1

flex-grow : 1;
flex-shrink : 1;
flex-basis : 0%;

flex:auto是提供的一种属性简写的方式，分别代表

flex-grow : 1;
flex-shrink : 1;
flex-basis : auto;

flex布局中 align-content和align-items的区别

align-items适用于单行情况下，只有上对齐，下对齐，居中和拉伸

align-comtent适应于换行（多行）的情况下（单行情况下无效）,可以设置上对齐，下对齐，居中，拉伸以及平均分配剩余空间等属性

总结就是单行使用align-items，多行使用align-content

Grid布局

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

基本概念

容器和项目：

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面代码中，最外层的<div>元素就是容器，内层的三个

div {
  display: grid;
}

div {
  display: inline-grid;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

grid-template-columns: repeat(2, 100px 20px 80px);

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

grid-template-columns: 100px auto 100px;

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

grid-template-columns: repeat(12, 1fr);

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

grid-gap: <grid-row-gap> <grid-column-gap>;

.container {
  grid-gap: 20px 20px;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

grid-auto-flow: column;

grid-auto-flow: row dense;

grid-auto-flow: column dense;

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

.container {
  justify-items: start;
}

.container {
  align-items: start;
}

place-items: <align-items> <justify-items>;

place-items: start end;

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

place-content: <align-content> <justify-content>

place-content: space-around space-evenly;

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

.item-1 {
  grid-column-start: span 2;
}

.item-1 {
  grid-column-end: span 2;
}

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

.item-1 {
  grid-area: e;
}

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

.item-1  {
  justify-self: start;
}

place-self: <align-self> <justify-self>;

place-self: center center;

<style>
  .outer {
    position: relative;
    width: 300px;
    height: 300px;
    background: red;
  }
  
  .inner {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
  }
</style>
<div class="outer">
  <div class="inner">
    12345
  </div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}

.inner {
  position: absolute;
  width: 200px;
  height: 200px;
  background: yellow;
  left: calc(50% - 100px);
  right: calc(50% - 100px);
}

<style>
		.outer {
			position: relative;
			width: 300px;
			height: 300px;
			background: red;
		}

		.inner {
			position: absolute;
			width: 200px;
			height: 200px;
			background: yellow;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
  }
</style>
<div class="outer">
		<div class="inner">
			12345
		</div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}

.inner {
  position: absolute;
  width: 200px;
  height: 200px;
  background: yellow;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.outer {
  width: 300px;
  height: 300px;
  background: red;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: yellow;
}

.outer {
  display: flex;
  width: 300px;
  height: 300px;
  justify-content: center;
  align-items: center;
  background: red;
}

.inner {
  width: 100px;
  height: 100px;
  background: yellow;
}

.outer {
  display: flex;
}

.inner {
  margin: auto;
}

// 父元素指定子元素对齐方式
.outer {
  display: grid;
  align-content: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  background: red;
}
.inner {
  width: 200px;
  height: 200px;
  background: yellow;
}

// 子元素自己指定对齐方式
.outer {
  display: grid;
  width: 300px;
  height: 300px;
  background: red;
}
.inner {
  width: 200px;
  height: 200px;
  align-self: center;
  justify-self: center;
  background: yellow;
}

outer {
  border: 1px solid red;
  width: 300px;
  height: 200px;
  display: grid;
}
.inner {
  border: 1px solid blue;
  background-color: yellow;
  margin: auto;
}

<div class="outer">
  <div class="inner">
    <div class="content"></div>
  </div>
</div>

.outer {
  writing-mode: vertical-lr;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 100%;
  height: auto;
  writing-mode: horizontal-tb;
  text-align: center;
}

.content {
  display: inline-block;
  text-align: left; /* 重置文字位置（如果需要） */
}

  <div class="parent">
    <span class="child">111</span>
  </div>

<div id="parent">
    <div id="child">我是行内元素</div>
</div>

.parent {
  height: 300px;
  width: 400px;
  background:  #fcc;
}
.child {
  display: block; 
  height: 100px;
  width: 100px; //确保该块级元素定宽
  background: #f66;
  margin: 0 auto;
}

/* 这里引用复用代码 */

.outer {
  text-align: center;
}

.inner {
  display: inline-block;
  text-align: left; /* 重置文字位置（如果需要） */
}

/* 这里引用复用代码 */

.outer {
  width: fit-content;
  margin: auto;
}

/* 这里引用复用代码 */

.inner {
  width: fit-content;
  margin: auto;
}

<div class="parent">
  <div class="child">我是块级元素</div>
</div>

.parent {
  height: 300px;
  width: 400px;
  background:  #fcc;
}
.child {
  display: table;
  background: #f66;
  margin: 0 auto;
}

<style>
  .outer {
    position: relative;
    width: 300px;
    height: 300px;
    background: red;
  }
  
  .inner {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    margin-left: -50px;
  }
</style>
<div class="outer">
  <div class="inner">
    12345
  </div>
</div>

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}

.inner {
  position: absolute;
  width: 200px;
  height: 200px;
  background: yellow;
  left: calc(50% - 100px);
}

<div class="parent">
  <div class="child">我是块级元素</div>
</div>

.parent {
  height: 300px;
  width: 400px;
  position: relative;
  background:  #fcc;
}
.child {
  position: absolute;
  background: #f66;
  width: 200px;
  height: 100px;
  margin: 0 auto; /*水平居中*/
  left: 0; /*此处不能省略，且为0*/
  right: 0;/*此处不能省略，且为0*/
}

<div class="parent">
    <div class="child">我是块级元素</div>
</div>

.parent {
  height: 300px;
  width: 400px;
  position: relative;
  background:  #fcc;
}
.child {
  position: absolute;
  background: #f66;
  left: 50%;
  transform: translateX(-50%);
}

.parent {
  height: 300px;
  width: 400px;
  display: flex;
  justify-content: center;
  background:  #fcc;
}
.child {
  height: 100px;
  width: 100px;
  background: #f66;
}

<div id="box">
    <div id="child"></div>
</div>

#box {
    width: 300px;
    background: #ddd;
    padding: 100px 0;
}
#child {
    width: 200px;
    height: 100px;
    background: orange;
}

/* 这里引用复用代码 */

.outer {
  line-height: 300px;
}

.inner {
  line-height: initial; /* 重置 */
  vertical-align: middle;
  display: inline-block;
}

.outer::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.inner {
  display: inline-block;
  vertical-align: middle;
}

<div id="box">
    <img src="smallpotato.jpg">
</div>

#box{
    width: 300px;
    height: 300px;
    background: #ddd;
    line-height: 300px;
}
#box img {
    width: 200px;
    height: 200px;
    vertical-align: middle;
}

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 150px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
    margin: -50px 0 0 0; 
}

 <div class="parent">
    <div class="child">我是块级元素</div>
  </div>

  .parent {
    height: 300px;
    width: 400px;
    position: relative;
    background:  #fcc;
  }
  .child {
    position: absolute;
    background: #f66;
    width: 200px;
    height: 100px;
    top: 0;
    bottom: 0;
    margin: auto;
  }

<div class="parent">
    <div class="child">我是块级元素</div>
</div>

  .parent {
    height: 300px;
    width: 400px;
    position: relative;
    background:  #fcc;
  }
  .child {
    position: absolute;
    background: #f66;
    width: 200px;
    height: 100px;
    top: 50%;
    transform: translateY(-50%)
  }

.parent {
  height: 300px;
  width: 400px;
  display: flex;
  align-items: center;
  background:  #fcc;
}
.child {
  height: 100px;
  width: 100px;
  background: #f66;
}

  <div class="parent">
    <div class="child">我是块级元素</div>
  </div>

.parent {
    height: 300px;
    width: 400px;
    background:  #fcc;
    display: grid;
    align-content: center;
  }
.child {
  background: #f66;
  width: 200px;
  height: 100px;
}

  .parent {
    height: 300px;
    width: 400px;
    background:  #fcc;
    display: grid;
  }
  .child {
    background: #f66;
    width: 200px;
    height: 100px;
    align-self: center;
  }

/* 这里引用复用代码 */

.outer {
  display: table-cell;
  vertical-align: middle;
}

<style type="text/css">
  body {
    font-size: 20px;
    line-height: 15px;
  }
  p {
    background-color: #ccc;
    font-size: 16px;
  }
</style>

<body>
  <p>一行文字</p>
</body>

<style type="text/css">
  body {
    font-size: 20px;
    line-height: 2;
  }
  p {
    background-color: #ccc;
    font-size: 16px;
  }
</style>

<body>
  <p>一行文字</p>
</body>

<style type="text/css">
  body {
    font-size: 20px;
    line-height: 200%;
  }
  p {
    background-color: #ccc;
    font-size: 16px;
  }
</style>

<body>
  <p>一行文字</p>
</body>

<style>
    .box{
        overflow: hidden; 添加BFC
    }
    .left {
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right {
        margin-left: 210px;
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .left {
      width: 100px;
      height: 150px;
      float: left;
      background: gray;
    }

    .right {
      height: 300px;
      background: rgb(170, 54, 236);
      background: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="left">LEFT</div>
  <div class="right">RIGHT</div>
</body>

<style>
  .container {
    position: relative;
  }
  .left {
    position: absolute;
    left: 0;
    top: 0;
    height: 400px;
    width: 200px;
    background-color: gray;
  }
  .right {
    position: absolute;
    top: 0;
    right: 0;
    left: 200px;
    height: 300px;
    background-color: pink;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
</body>

<style>
  .container {
    display: flex;
    align-items: flex-start;
  }
  .left {
    height: 400px;
    width: 200px;
    background-color: gray;
  }
  .right {
    height: 300px;
    background-color: pink;
    flex: 1;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
</body>

<style>
    .container {
      display: grid;
      grid-template-columns: 200px auto;
      width: 100%;
    }
    .left {
      height: 200px;
      background-color: gray;
    }
    .right {
      height: 400px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
</body>

<style>
        div {
          height: 100px;
        }
        .left {
            float: left;
            width: 200px;
            background-color: red;
        }
        .middle {
            float: left;
            width: calc(100% - 400px);
            background-color: green;
        }
        .right {
            float: right;
            width: 200px;
            background-color: blue;
        }
       
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左边</div>
        <div class="middle">中间</div>
        <div class="right">右边</div>
    </div>    
</body>

<style>
  .box {
    /* 应用浮动记得清除浮动 */
    overflow: hidden;
  }
  .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: gray;
  }
  .right {
    float: right;
    width: 200px;
    height: 200px;
    background-color: pink;
  }
  .middle {
    margin-left: 210px;
    margin-right: 210px;
    background-color: green;
    height: 300px;
  }
</style>
</head>
<body>
  <div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="middle">中间</div>
  </div>    
</body>

<style>
  .container {
    display: flex;
  }
  .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: red;
  }
  .middle {
    float: left;
    height: 200px;
    flex: 1;
    background-color: green;
  }
  .right {
    float: right;
    width: 200px;
    height: 200px;
    background-color: blue;
  }

</style>
</head>
<body>
  <div class="container">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
  </div>    
</body>

<style>
  .container {
    display: grid;
    grid-template-columns: 200px auto 200px;
  }
  .left {
    float: left;
    height: 200px;
    background-color: red;
  }
  .middle {
    float: left;
    height: 200px;
    background-color: green;
  }
  .right {
    float: right;
    height: 200px;
    background-color: blue;
  }

</style>
</head>
<body>
  <div class="container">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
  </div>    
</body>

<style>
  .header {
    background-color: gray;
  }
  .container {
    padding-left: 200px;
    padding-right: 150px;
  }
  .clearfix::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
  }
  .center {
    float: left;
    width: 100%;
    background-color: red;
  }
  .left {
    float: left;
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
    background-color: pink;
  }
  .right {
    float: left;
    width: 150px;
    margin-right: -150px;
    background-color: yellow;
  }
  .footer {
    background-color: goldenrod;
  }
</style>
</head>
<body>
  <div class="header">header</div>
  <div class="container clearfix">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
</body>

<style>
  .container {
  }
  .clearfix::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
  }
  .center {
    float: left;
    width: 100%;
    height: 200px;
    background-color: red;
  }
  .center-wrap {
    height: 200px;
    margin-left: 200px;
    margin-right: 150px;
  }
  .left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-left: -100%;
  }
  .right {
    float: left;
    width: 150px;
    height: 200px;
    background-color: yellow;
    margin-left: -150px;
  }
</style>
</head>
<body>
  <div class="container clearfix">
    <div class="center">
      <div class="center-wrap">
        center
      </div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>