css中boxsizing怎么继承

Posted 2023-05-01

box-sizing是CSS的一个属性，很好的解决了盒模型的相关问题。CSS中的盒模型（Box model）分为两派，一派是W3C的标准模型，一派是IE的传统模型。那它们之间有什么不同的呢？首先需要明确它们都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；而不同的地方就在于两者的计算方法不一至：（下面引用一些公式向大家展示一下两者的不同之处）

W3C的标准盒模型

IE传统盒模型（IE6以下不含IE6版本或“QuirksMode下IE5.5+”）

接下来直接看看box-sizing的应用吧。

box-sizing属性可以分为两个值：content-box（default），border-box。

content-box，border和padding不计算入width之内

border-box，border和padding计算入width之内

（注1：ie8+浏览器支持content-box和border-box；ff则支持全部三个值）

（注2：使用时，有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-）

栗子，接住：

<style type="text/css">
.content-box
-webkit-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;

.border-box
-webkit-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;

</style>

我是在谷歌下运行的，所以加了-webkit-前缀，效果如下：

蓝色加边框：总宽150px，高150px

黄色加边框：总宽100px，高100px

参考技术A html
box-sizing: border-box;

*, *:before, *:after
box-sizing: inherit;

CSS-继承和层叠

一: 继承

面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

 

二: 层叠性

1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性