关于CSS盒子模型的小细节

最新推荐文章于 2024-11-11 00:01:33 发布

奔赴南墙

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量269

点赞数 1

文章标签： css 前端 html

原文链接：https://blog.csdn.net/qq_37025799/article/details/123904854

版权

IE标准和w3c标准的区别

IE盒子模型和W3C标准模型是有区别的

由图可见，W3C标准盒子模型中，height和width只是content部分。

而IE盒子模型中的height和width则包含了content、padding和border三个部分，如下图所示

目前采用的是W3C标准，所以在开发中，添加padding或者border时，会影响到元素框的总尺寸。所以要想保持一个盒子的真实占有宽高保持不变，那么在添加padding的时候，就要减掉width保持宽度、减掉height保持高度。

padding区域的背景颜色是和content的背景颜色是一致的。可以理解为：background-color填充了所有border以内的区域。

综合写法：顺时针方向，四个值分别代表上右下左。以空格隔开，当只有三个值的时候，第二个值代表的是左右两边。当只有两个值的时候，第一个值和第二个值分别代表上下和左右。

有一些元素会默认带有padding和margin。

就比如<body>就带有8px的margin。ul也是自带了40px的padding-left。

所以为了方便控制，可以用

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
      margin:0;
      padding:0;
  }

并集选择器把margin和padding清除。

在这里解释一下，不用*{}而是罗列所有的标签，是因为*的效率不高。

border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。

等价于：

border:10px solid red;

一些特殊的边，可以采用小属性层叠大属性

比如有其中一条边特殊

border:10px solid red;
border-right-color:blue;

这里可以在后面用小属性进行层叠覆盖。

改个颜色，改个样式，改个边框宽度，或者让它消失

//改边框样式
border-right-style: dashed;
//改边框宽度
border-right-width: 3px;
//边框消失
border-fight: none;

边框的三个属性也可以分开写，且使用复合写法(一样的顺时针，上右下左)

border-width: 10px 5px 2px 4px;             //边框宽度
border-style: solid dashed dotted solid;    //线型
border-color: red green blue yellow;        //颜色。

border和padding都会影响盒子的大小。要想保证盒子的占用空间保持不变，在变动border和padding的同时，width和height也要做相应的调整。
复合写法的四个值为顺时针顺序，如果只有三个值，则第二个值为左右。如果只有两个值，则第一个值和第二个值分别表示上下和左右。

原文来自《CSS盒模型科普》

小白做笔记复习的，侵权请联系删除

奔赴南墙

关注