首页 > 科技 > css小技巧(boxsizing, flex, inherit, border-radius, outline)

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可以看到详细的样式来源


CSS

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.souzhinan.com/kj/283661.html