css小技巧(boxsizing, flex, inherit, border-radius, outline)

css中重要的是盒子模型，盒子的宽度和高度计算方式如下：

• border width + padding-left + padding-right + width = div占的宽度
• border height + padding-top + padding-bottom + height = div占的高度

1. box-sizing

• 语法：box-sizing: content-box | border-box | inherit
• content-box

看到的高度<=div的高度

• border-box

看到的高度=div的高度，内容区域使用的高度或者宽度会自动去掉border和padding

2.flex

• flex default，设置display: flex后，flex的默认设置是 flex: 0 1 auto
• flex: 1 = flex: 1 1 auto
• flex: 0 = flex: 0 0 auto
• flex: flex-grow flex-shrink flex-basis

3.a:hover, a:visited, a:active等伪属性中的color设置为inherit时，继承的是a的color，其他的伪属性类似的。

4.border-radius: 为div提供圆角边框

5.outline: 绘制于元素周围的，用于突出元素，位于元素边框周围

6.css中样式的inherit会直接继承直接父容器的相应样式，所以当发现元素样式inherit后，并不是所想要的时，可以看一下直接父容器的样式是怎样的。F12->打开computed tab标签页->可以看到计算总结后的样式信息->展开section可以看到详细的样式来源