龙空技术网

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

一颗帮棒棒糖 195

前言:

当前你们对“cssdiv圆角边框”大概比较看重,兄弟们都需要知道一些“cssdiv圆角边框”的相关知识。那么小编在网络上搜集了一些对于“cssdiv圆角边框””的相关资讯,希望各位老铁们能喜欢,你们快快来学习一下吧!

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

border width + padding-left + padding-right + width = div占的宽度border height + padding-top + padding-bottom + height = div占的高度box-sizing语法:box-sizing: content-box | border-box | inheritcontent-box

看到的高度<=div的高度

border-box

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

2.flex

flex default,设置display: flex后,flex的默认设置是 flex: 0 1 autoflex: 1 = flex: 1 1 autoflex: 0 = flex: 0 0 autoflex: 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可以看到详细的样式来源


标签: #cssdiv圆角边框