布局

1. 盒模型重置

盒模型重置，使盒子的宽度和高度不受其边框(border)或填充(padding)的影响。

HTML

<div class=\"box\">border-box</div><div class=\"box content-box\">content-box</div>

CSS

html {  box-sizing: border-box;}*,*::before,*::after {  box-sizing: inherit;}.box {  display: inline-block;  width: 150px;  height: 150px;  padding: 10px;  background: tomato;  color: white;  border: 10px solid red;}.content-box {  box-sizing: content-box;}

DEMO

可在 CodePen 上查看真实效果和编辑代码

说明

• box-sizing：当元素设置为border-box时，即便设置了padding或border也不会改变元素的宽度和高度。
• box-sizing：设置inherit使元素继承父级的box-sizing规则。

浏览器支持情况

99.9% 查看本条 caniuse

2. 清除浮动更好的方式

无需借助辅助元素进行浮动的清除。

注意：这仅在使用float布局时才有用。实际场景中请考虑使用Flexbox布局或者网格布局。

HTML

<div class=\"clearfix\">  <div class=\"floated\">float a</div>  <div class=\"floated\">float b</div>  <div class=\"floated\">float c</div></div>

CSS

.clearfix{  border:solid 1px red;}.clearfix::after {  content: \'\';  display: block;  clear: both;}.floated {  float: left;  margin-left:20px;}

DEMO

可在 CodePen 上查看真实效果和编辑代码

浏览器支持情况

100%

3. 不变宽高比

给定宽度可变的元素，它将确保其高度以响应方式保持成比例（即，其宽高比保持不变）。

DEMO

可在 CodePen 上查看真实效果和编辑代码

HTML

<div class=\"constant-width-to-height-ratio\"></div>

CSS

.constant-width-to-height-ratio {  background: #333;  width: 50%;}.constant-width-to-height-ratio::before {  content: \'\';  padding-top: 100%;  float: left;}.constant-width-to-height-ratio::after {  content: \'\';  display: block;  clear: both;}

说明

• width:50% 只设置父级元素的宽度
• ::before 为父级元素定义一个伪元素
• padding-top:100%; 设置伪元素的内上边距，这里的百分比的值是按照宽度计算的，所以会呈现为一个响应式的元素块。
• 此方法还允许将内容正常放置在元素内。

浏览器支持情况

100%

4.使用表格居中

使用display：table（作为flexbox的替代）使子元素在其父元素中水平垂直居。

HTML

<div class=\"container\">  <div class=\"center\"><span>Centered content</span></div></div>

CSS

.container {  border: 1px solid #333;  height: 250px;  width: 250px;}.center {  display: table;  height: 100%;  width: 100%;}.center > span {  display: table-cell;  text-align: center;  vertical-align: middle;}

DEMO

可在 CodePen 上查看真实效果和编辑代码

• display：table 使.center元素的行为类似于 HTML元素。
• 设置.center的宽高为100%，使其填满父元素。
• display：table-cell, 设置\’.center > span\’的table-cell允许元素表现得像HTML元素。
• text-align: center 使子元素水平居中。
• vertical-align: middle 使子元素垂直居中。
• 外部父级必须有固定的宽高。浏览器支持情况100%查看本条 caniuse
  5. 使子元素均匀分布HTML
• <div class=\”evenly-distributed-children\”>
• <p>Item1</p>
• <p>Item2</p>
• <p>Item3</p>
• </div>
• .evenly-distributed-children {
• display: flex;
• justify-content: space-between;
• }
• DEMO可在 CodePen 上查看真实效果和编辑代码说明display: flex :启动flex 布局
• justify-content: space-between：
• 均匀地水平分配子元素。第一个子元素位于左边缘，而最后一个子元素位于右边缘。或者，使用justify-content：space-around来分配子节点周围的空间，而不是它们之间。