牛客面试题HTML与CSS部分

一、说一说HTML语义化

二、说一说盒模型

三、说一说BFC

补充：什么是高度塌陷，如何解决高度塌陷：

补充：块级元素和行内元素

补充：文档流

四、说一说浮动

五、说一说样式优先级的规则是什么

六、说一说CSS尺寸设计的单位

七、说几个未知宽高元素水平垂直居中的方法

八、说一说三栏布局的实现方案

一、说一说HTML语义化

HTML语义化就是指在使用HTML标签构建页面时，避免大篇幅的使用无语义的标签，比如`div`，要求尽可能的使用具有语义的标签比如'header''footer'

语义化标签介绍：

<header>

定义文章的介绍信息：标题，logo，slogan；包裹目录部分，搜索框，一个nav或者任何相关的logo；
一个页面中<header>的个数没有限制，可以为每个内容块添加一个header；

<nav>

定义文章导航栏，链接等;
nav一般和u、li配合做导航栏；

<main>

定义文章的主要内容
main标签在一份文档中是唯一的，其后代元素常常包括`<article>`；

<article>

定义文档中可以脱离其他部分，一份独立的内容，通常带有标题，当article内嵌article时，里外层的内容应该是相关的，比如一篇微博和它的评论；

<section>

与article的差别在于，它是整体的一部分，或者是文章的一节，一般来说section也会带有标题；

<aside>

侧边栏（与article并列存在）或者嵌入内容（在article内），通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等；

<footer>

页脚，通常包含作者、版权信息或者相关链接等；

容易混淆的几组语义化标签：

<i>

表现形式：斜体

作用：常用来表示一段普通文本中因为某种原因和正常文本不同，例如专业术语、外语或排版用的文字等，他的出现不会改变语义

一段文本中如果插入其他语言需要在<i>标签中加上<lang>作为注解

 <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>//语种为法语

<em>

表现形式：斜体

作用：表达对文本内容的强调（类似于说话时的重音），但是不适用于传达重要性的内容，传达重要性内容应该用<strong>

<em>标签本质上并不是让包含文本变为斜体字。有时，作者只是想让部分文本在段落/句子中脱颖而出，或是在不同语气或者语态上，这时要用<i>；

<b>

表现形式：粗体

作用：仅仅只是改变文本样式，没有强调的作用，也不影响语态和语气

表现形式：粗体

作用：表示强调，传达内容的重要性、严重性或紧急性

语义化的作用：

易于用户阅读，样式文件未加载时，页面结构清晰。
有利于搜索引擎优化，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页。
有利于开发和维护，代码更具可读性，代码更好维护

HTML5语义化标签并没有广泛使用，比如京东、淘宝等，还是使用div元素，设置id是header或者footer，这个可能是因为HTML5新增的语义化标签的作用不是特别大，网站没有必要重写

内容参考 1、牛客答案 2、知乎

二、说一说盒模型

定义：CSS盒模型本质上一个包裹着HTML元素的盒子，盒子有四个属性，从内到外分别为contrnt内容、padding内填充、border边框、margin外边距

根据盒子大小的计算方式不同盒模型分成了两种：标准盒模型和怪异盒模型。

标准盒模型：

标准盒模型中设置的width和height是content的宽高

设置方式：默认情况下就是标准盒模型也可以手动设置

box-sizing: content-box

怪异盒模型：

怪异盒模型中设置的width和height是content、padding、border的总宽高

设置方式：

box-sizing:border-box

参考内容：1、牛客面试题 2、知乎

三、说一说BFC

定义：BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

BFC布局规则（特点）：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
计算BFC的高度时，浮动元素也参与计算。
BFC的区域不会与float box重叠。
内部盒子会在垂直方向，一个接一个地放置。
元素的margin-left与其包含块的border-left相接触，即使存在浮动也是如此。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

触发BCF的方法：

根元素（html标签就是一个BFC）
浮动元素：float 除 none 以外的值让父元素浮动起来，这种方式开启虽然可以解决父元素的高度塌陷问题，但父元素也会浮动，可能引起其他布局问题。
绝对定位元素：position的值为absolute或fixed
display 为 inling-block/table-cell/table-caption/flex/inline-flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC的使用场景：

1. 去除边距重叠现象

2. 清除浮动（让父元素的高度包含子浮动元素，解决父元素高度塌陷）

3. 避免某元素被浮动元素覆盖

4. 避免多列布局由于宽度计算四舍五入而自动换行

BFC的方式都能清除浮动，但是常使用的清除浮动的BFC方式只有`overflow:hidden`

使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。

如果设置父级为`display:flex`，内部的浮动就会失效。

所以通常只是用`overflow: hidden`清除浮动。

IFC（Inline formatting contexts）：内联格式上下文。IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。

GFC（GrideLayout formatting contexts）：网格布局格式化上下文。当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。

FFC（Flex formatting contexts）：自适应格式上下文。display值为flex或者inline-flex的元素将会生成自适应容器。

关于各种FC

BFC特点详细解释：

特征一：属于同一个BFC的两个相邻Box的margin会发生重叠（使用场景一）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.top{width: 200px;height: 200px;background: red;margin-bottom: 40px;}.bottom{width: 200px;height: 200px;background: blue;margin-top: 60px;}</style></head><body><div class="top"></div><div class="bottom"></div></body>
</html>

现象：
当给红色块下外边距margin-bottom，给蓝色块上外边距margin-top时，上下外边距会发生重叠，两个色块的间距解析为两者中的较大值（60px）。

原因：
此时红色块和蓝色块属于同一个BFC，即根元素（<html>）。BFC的特性1规定 “属于同一个BFC的两个相邻容器的上下margin会重叠”，故两者上下边距发生重叠。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.top{width: 200px;height: 200px;background: red;margin-bottom: 60px;}.bottom{width: 200px;height: 200px;background: blue;margin-top: 60px;}.box{overflow: hidden;}</style></head><body><div class="top"></div><div class="box"><div class="bottom"></div></div></body>
</html>

现象：
给蓝色块添加父元素.box并添加声明overflow: hidden;可以解决红色块和蓝色块的上下margin重叠问题。

原因：
通过给蓝色块添加父元素.box并添加声明overflow: hidden;，使得父元素.box触发了BFC，此时红色块和蓝色块属于不同的BFC，红色块的BFC仍然是根元素（<html>），蓝色块的BFC是父元素.box。即不满足BFC特性1中的规定“属于同一个BFC······”，从而解决了两者的上下margin重叠问题。

注：overflow: hidden;只是触发BFC众多条件中的一个，使用其他条件也能解决此问题，注意触发条件可能造成的其他影响即可，如浮动会造成的脱离文档流等。

特征二：计算BFC高度时浮动元素也参于计算（使用场景二）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.outside{border: 10px solid blue;}.inside{width: 200px;height: 200px;background: yellowgreen;float: left;}</style></head><body><div class="outside"><div class="inside"></div></div></body>
</html>

现象：
当父元素.outside没有设置高度且子元素.inside都浮动时，父元素.outside会出现高度塌陷。

原因：
子元素.inside设置浮动后脱离文档流，而父元素.outside又没有设置高度，故父元素.outside会出现高度塌陷。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.outside{border: 10px solid blue;overflow: hidden;}.inside{width: 200px;height: 200px;background: yellowgreen;float: left;}</style></head><body><div class="outside"><div class="inside"></div></div></body>
</html>

现象：
给父元素.outside添加声明overflow: hidden;，父元素高度塌陷消失。

原因：
给父元素.outside添加声明overflow: hidden;，使得父元素.outside触发了BFC，而BFC特性规定“计算BFC高度时浮动元素也参于计算”，此时子元素.inside虽然设置了浮动，但其高度仍计算至父元素内，从而解决了高度塌陷问题。（因为html是BFC但是原本的父元素不是BFC所以计算父元素高度的时候就没有计算浮动的高度，但是父元素触发BFC之后就解决了）

特征三：BFC区域不会与浮动元素发生重叠（使用场景三）

能够实现两栏布局

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.left{width: 100px;height: 200px;background: yellowgreen;float: left;}.right{height: 300px;background: blue;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>

现象：
正常情况下，左侧元素.left浮动时，会与右侧元素.right发生重叠，不能实现自适应两栏效果。

原因：
左侧元素浮动，脱离文档流。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.left{width: 100px;height: 200px;background: yellowgreen;float: left;}.right{height: 300px;background: blue;overflow: hidden;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>

现象：
给右侧元素.right添加声明overflow: hidden;，左右侧元素重叠消失，实现自适应两栏效果。

原因：
给右侧元素.right添加声明overflow: hidden;，使得右侧元素触发了BFC，而BFC特性规定“BFC的区域不会与浮动容器发生重叠”，从而解决了重叠问题，实现自适应两栏效果。

特征四：BFC内的容器在垂直方向依次排列

类似正常情况下块元素在垂直方向上依次排列，较易理解。

特性5：元素的margin-left与其包含块的border-left相接触

基本现象，较易理解。

特性6：BFC是独立容器，容器内部元素不会影响容器外部元素

较易理解。

参考内容：1、牛客网答案 2、csdn

补充：什么是高度塌陷，如何解决高度塌陷：

什么是高度塌陷：当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题；

.div1{height: 100px; width: 100px; background: green; float: left;}
.div2{height: 100px; width: 100px; background: blue; float: right;}<div class="box"><div class="div1">div1</div><div class="div2">div2</div>
</div>

方法：

1、给父元素添加高度

优点：简单。

缺点：只适合固定页面的布局，无法进行自适应，不推荐使用。

2、触发BFC

BFC有一个特性是计算BFC的高度时，浮动元素也参与计算，所以将box触发为BFC后可以解决高度塌陷。

注意：IE6及以下的浏览器不支持BFC，所以通过触发BFC来解决高度塌陷不能兼容IE6及以下浏览器。在IE6中可以通过设置声明zoom:1;来触发hasLayout来解决高度塌陷问题。

3、给所有的浮动元素后面加一个空标签并声明clear:both

可以再加上height: 0; overflow: hieedn;是为了避免这个空标签如果是li的话，在IE6和IE7. 上有默认高度撑着，所以要解决一下。

<div class="box"><div class="div1">div1</div><div class="div2">div2</div><div style="clear: both; overflow: hieedn;"></div>
</div>

4、给高度塌陷阿达元素添加如下伪类

.box::after{content: '';clear: both;/*清除两侧浮动*/display: block;/*转成成一个块元素*/both; overflow: hidden;visibility: hidden;
}

::after对IE8以下有兼容问题，可以通过增加zoom: 1;声明来解决。

优点：不会新增标签，不会有其他影响，是当下清除浮动最流行的方法

参考内容：csdn

补充：块级元素和行内元素

块级元素（block）：如<div><p>

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

内联元素（inline）：如<span>

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

行内块级元素（inline-block）：行内块级元素，它既具有块级元素的特点，也有行内元素的特点比如：input、img

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

将展现宏观的元素设置成块（相对宏大）将修饰细节的东西设置成行内元素（相对细微）。例如：<div>元素就是作为容器出道的，他肯定就是块级元素。而<strong>这些修饰个别文字的样式，就是内联元素。

转换：

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

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

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

参考内容：掘金

补充：文档流

我自己的解释：在网页解析的时候按照从上到下的顺序以及元素自身的特点排布在一个维度内

网页在解析时，遵循从上向下，从左向右的顺序。

1、从上至上，从左至右的布局。
2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。

脱离文档流：

脱离文档流是指，这个标签脱离了文档流的管理。不受文档流的布局约束了，并且更重要的一点是，这个标签在原文档流中所占的空间也被清除了。脱离文档流的元素飘在原文档流上方，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

脱离文档流的方法：

1、float

2、position:absolute

3、position:fixed

半脱离文档流：本体还在文档流中占有位置，但是却可以通过改变位置使其漂浮到其他的地方，其定位方式是相对其原先在文档流中的位置进行定位的。方式：position：relative

float与position:absolute脱离文档流的区别：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。而position就会遮挡文字

参考内容1参考内容2

四、说一说浮动

浮动的作用：浮动会使当前元素脱离文档流，设置了浮动的块级元素可以排列在同一行，同时可以按照浮动设置的方向对齐排列；盒子设置浮动的图片，可以实现文字环绕图片，设置了浮动的行内元素可以设置宽高。

设置浮动元素的特点：

设置了浮动，该元素脱标。元素不占位置
浮动可以进行模式转换（行内块元素）

浮动造成的影响：

使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子的高度就塌陷了，同时也会造成父级盒子后面的兄弟盒子布局受到影响。如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。

清除浮动的方法（更详细参考前面补充的高度塌陷的内容）：

伪元素清除浮动：给浮动元素父级增加 .clearfix::after { content: ''; display: table; clear: both; } /*兼容IE低版本 */ .clearfix { *zoom: 1; } overflow：hidden`：
给浮动元素父级增加`overflow：hidden`属性
额外标签法：给浮动元素父级增加标签

三种清除浮动的特点和影响

伪元素清除浮动：不会新增标签，不会有其他影响，是当下清除浮动最流行的方法
`overflow：hidden`：不会新增标签，但是如果父级元素有定位元素超出父级，超出部分会隐藏，在不涉及父级元素有超出内容的情况，overflow：hidden比较常用，毕竟写法方便简洁
标签插入法：清除浮动的语法加在新增标签上，由于新增标签会造成不必要的渲染，所以这种方法目前不建议使用

五、说一说样式优先级的规则是什么

CSS样式的优先级应该分成五大类

-第一类`!important`，无论引入方式是什么，选择器是什么，它的优先级都是最高的。

-第二类：引入方式，行内样式（写在标签里面的style属性）的优先级要高于内联（写在style标签里面的）和外联（通过link引入的），内联和外联如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。

-第四类继承样式，是所有样式中优先级比较低的。

-第五类浏览器默认样式优先级最低。

使用!important要谨慎

一定要优先考虑使用样式规则的优先级来解决问题而不是 `!important`

只有在需要覆盖全站或外部 CSS 的特定页面中使用 `!important`

永远不要在你的插件中使用 `!important`

永远不要在全站范围的 CSS 代码中使用 `!important`

如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上!important。例如：background: blue !important;那么所有的background属性都会加上important

优先级的比较指的是相同的样式属性，不同样式属性优先级比较失效，比如：在设置`max-width`时注意，已经给元素的`max-width`设置了`!important`但是还不生效，很有可能就是被width覆盖了举例：`div`最终的宽度还是`200px`

div { max-width: 400px !important; height: 200px;background-color: tomato; width: 200px; }

参考内容

六、说一说CSS尺寸设计的单位

CSS尺寸单位分为绝对长度单位与相等长度单位

绝对长度单位：是物理世界中实际测量值的数字表示，这些单位与屏幕大小或其分辨率无关；

绝对单位中使用最广泛的是像素 (px)。一个像素通常被理解为屏幕上的一个点。它是最小的计量单位，通常用作其他单位的基准。

px：pixel像素的缩写，绝对长度单位，它的大小取决于屏幕的分辨率，是开发网页中常常使用的单位。

相对长度单位：没有固定值。它们的值相对于其他一些预定义的值或特征。由于我们可以将它们的宽度、高度、字体大小等与其他一些基本参数相关联，因此相对单位可以轻松地调整元素的大小。

em：`font-size` 的长度单位，1em的值为`font-size` 的大小，在 `font-size` 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的`font-size` 。如当前元素的字体尺寸未设置，由于字体大小可继承的原因，可逐级向上查找，最终找不到则相对于浏览器默认字体大小。

缺点：em 会层层继承父元素的或自己的字体大小，很容易造成字体大小的混乱，从下图可一看到，border都是1em，但是因为字体大小不同，em显示的大小也不同的。

<div class="box">第一层<p>第二层<span>第三层</span></p>
</div>


html{ font-size: 40px;
}
div {border: 1em solid #FFCCCC;//此时是相对于html的font-size
}
p{font-size: 30px;border: 1em solid #FFCC66;//此时是相对于p的font-size
}
span{font-size:14px;border: 1em solid #CCFF33;//此时是相对于span的font-size
}

rem：相对长度单位，相对于根元素的font-size属性大小，如果根元素字体大小未设置，使用浏览器默认字体大小。只要html的font-size大小不变，1rem所代表的font-size大小就不会变，rem只取决于html的font-size

vw：相对长度单位，等于视窗宽度的1%。

vh：相对长度单位，等于视窗高度的1%。

rem应用：在移动端网页开发中，页面要做成响应式的，可使用rem配合媒体查询或者flexible.js实现。原理是通过媒体查询或者flexible.js，能够在屏幕尺寸发生改变时，重置html根元素的字体大小，页面中的元素都是使用rem为单位设置的尺寸，因此只要改变根元素字体大小，页面中的其他元素的尺寸就自动跟着修改

vw应用：由于vw被更多浏览器兼容之后，在做移动端响应式页面时，通常使用vw配合rem。原理是使用vw设置根元素html字体的大小，当窗口大小发生改变，vw代表的尺寸随着修改，无需加入媒体查询和flexible.js，页面中的其他元素仍使用rem为单位，就可实现响应式。

七、说几个未知宽高元素水平垂直居中的方法

1. 设置父元素相对定位，子元素为绝对定位并且left和top为50%，再让子元素自身分别平移自身高度和宽度的50%

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{position: relative;height:300px;width: 300px;background: #FD0C70;
}
.parent3 .child{position: absolute;top: 50%;left: 50%;color: #fff;transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3"><div class="child">hello world-3</div></div>
</body>
</html>

这种方式兼容性好，被广泛使用的一种方式

2. 设置元素的父级为弹性盒子`display:flex`，并且设置水平垂直都居中，需要注意的是，一定要把这里的 flex-center 挂在父级元素，才能使得其中唯一的子元素居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent4{display: flex;justify-content: center;align-items: center;width: 300px;height:300px;background: #FD0C70;
}
.parent4 .child{color:#fff;
}
</style>
<body>div> <div class="parent4"><div class="child">hello world-4</div></div>
</body>
</html>

这种方式代码简洁，但是兼容性ie 11以上支持，由于目前ie版本都已经很高，很多网站现在也使用这种方式实现水平垂直居中，

3. 设置元素的父级为网格元素`display: grid`，设置水平垂直都居中`justify-content:center; align-items:center` ，也要设置在父元素里，这种方式代码简介，但是兼容性ie 10以上支持

4. 设置元素的父级为表格元素`display: table-cell`，水平垂直都居中`text-align: center;vertical-align: middle;` ，也要写在父元素上，设置子元素为行内块`display: inline-block; `，

这种方式兼容性较好

5、父元素相对定位子元素绝对定义并设置margin:auto

<style>.father{width:500px;height:300px;border:1px solid #0a3b98;position: relative;}.son{width:100px;height:40px;background: #f0a238;position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
</style>
<div class="father"><div class="son"></div>
</div>

父级设置为相对定位，子级绝对定位，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了

京东的移动端顶部京东logo，使用的是`display:flex`这种模式

八、说一说三栏布局的实现方案

三栏布局，要求左右两边盒子宽度固定，中间盒子宽度自适应，盒子的高度都是随内容撑高的，

一般都是中间盒子内容较多，为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面。

方法一：flex布局

设置最外面的大盒子为display:flex,设置左右盒子的宽高，然设置中间的盒子为 flex-grow: 1/flex:1/或者宽度用calc()来计算;让中间盒子的宽度能够填满除去左右盒子宽度的部分，然后用order来设置左右顺序

 * {margin: 0;padding: 0;}.outer {display: flex;}.sider {width: 200px;height: 500px;background-color: lightskyblue;}.center {order: 2;/* 默认值为0，order越小位置越靠前（能够使center在中间），越靠上，此时就不用考虑覆盖的问题了*/flex-grow: 1;/* flex-grow : 默认值为0，为0时有剩余空间也不放大，子元素该属性均为1时，剩余空间被所有为1的子元素均分，有一个子元素该属性为2时，该元素将分得或者努力分得其他为1的子元素所分得空间2倍大小的空间 */
/*flex是flex-grow 、 flex-shrink 和 flex-basis 属性的简写属性 *//* flex-shrink : 默认值为1，当子元素中存在某个元素该属性为0时，若空间不足，则为1的缩小，为0的不变，因此可以猜测，为2的弱小的应该是更多，应该是缩小了为1缩小的空间的两倍 */height: 500px;background-color: pink;}.left {order: 1;}.right {order: 3;}

<div class="outer"><div class="center"></div><div class="sider left"></div><div class="sider right"></div>
</div>

原理：利用了容器项目 order 属性

优点：

支持 center 部分前置，可以实现中间部分优先加载
left、right 的高度可以伴随 center 高度的变化而变化

方法二、圣杯布局

圣杯布局的实现方案：三个元素放在同一个父级元素中（父级盒子清除浮动，否则父级盒子的高度无法被撑开），代表中间盒子的元素放在最前面，父级盒子设置左右`padding`，三个盒子全部浮动并且设置成相对定位，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%（相当于左移了一个中间盒子的宽度）并相对定位left为自身宽度，右边盒子设置左边距为自身宽度，并相对定位right为自身宽度

<div class="wrapper"><div class="center"></div><div class="left"></div><div class="right"></div>
</div>

      * {margin: 0;padding: 0;}.wrapper {height: 500px;padding: 0 200px 0 300px;/* wrapper的container两侧空出来left和right的宽度 */}.center,.left,.right {position: relative;float: left;height: 500px;}.center {width: 100%;/* 宽度＝wrapper的container的宽度，两侧已空出left和right */background-color: tomato;}.left {width: 300px;margin-left: -100%;/* 相当于左移了一个中间盒子的宽度 *//* 左侧紧邻container左侧 */left: -300px;background-color: lightgreen;}.right {width: 200px;margin-left: -200px;/* 右侧紧邻container右侧 */right: -200px;background-color: lightskyblue;}

优点：不需要添加dom节点 - 缺点：正常情况下是没有问题的，

缺点：当middle部分的宽小于left部分时就会发生布局混乱（因为此时中间盒子已经放不下左边的盒子了，还是会跑到下一行）。只需要在body上设置最小宽度即可。

方案三、双飞翼布局
三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置`margin`,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距为-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开

<div class="wrapper"><div class="center-wrapper"><div class="center">1111111</div></div><div class="left"></div><div class="right"></div></div>

.wrapper {height: 500px;
}.center-wrapper,
.left,
.right {float: left;height: 500px;
}.center-wrapper {width: 100%;background-color: tomato;
}.center {margin: 0 200px 0 300px;height: 500px;
}.left {width: 300px;margin-left: -100%;background-color: lightgreen;
}.right {width: 200px;margin-left: -200px;background-color: lightskyblue;
}

优点：不会像圣杯布局那样变形，CSS样式代码更简洁

缺点：多加了一层dom节点

参考内容1 参考内容2