盒模型(Box Model) 是 CSS 布局的一种模式。
简介
一个盒模型元素从内到外分为：
- Content 内容
- Padding 内边距
- Border 边框
- Margin 外边框
指定盒模型：
box-sizing: content-box //宽度和高度应用到 content
box-sizing: border-box //IE 型，宽度和高度应用到 Border 为止
元素居中
水平居中
- 文字：设置
text-align:center。 - 块级元素：设置
margin:0 auto，必须自身有宽度。
垂直居中
- 单行文字：设置
line-height:<父高度>。 - 块级元素：
position:relative;top:25%;，必须自身有高度。 - 块级元素：
position:relative; top:50%; left:50%; transform: translate(-50%,-50%);，自身可不设高度。
其他
- 设置父元素为
display:flex;align-items: center;justify-content: center;。align-items管上下，justify-content管左右。 - 设置父元素为
grid，同上。
属性选择器的匹配
[class^="parent"]
//选择以 parent 开头的类
[attribute^="value"]
//选属性值以 value 开头的元素
[attribute=value]
//选择属性值=value 的元素
[attribute~=value]
//选择属性值包含 value 的元素
参考：CSS 选择器