WEB前端盒子模型稳定性

女爷i 2022-01-10 07:11 196阅读 0赞

# WEB前端-CSSS盒子模型稳定性 #

## 盒子模型布局稳定性 ##

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

width >  padding  >   margin   
    复制代码

原因：

1.  margin 会有外边距合并 还有 ie6下面margin 有bug，所以最后使用。
2.  padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
3.  width 没有问题，建议经常使用宽度剩余法 高度剩余法来做。

## CSS3盒模型 ##

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

div:first-child {
    			width: 200px;
    			height: 200px;
    			background-color: pink; 
    			box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */
    			padding: 10px;
    			border: 15px solid red;
    			/* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
    		}
    		div:last-child {
    			width: 200px;
    			height: 200px;
    			background-color: purple;
    			padding: 10px;
    			box-sizing: border-box;   /* padding border  不撑开盒子 */
    			border: 15px solid red;
    			/* margin: 10px; */
    			/* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
    }
    复制代码

## 盒子阴影 ##

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；
    复制代码

1.  前两个属性是必须写的。其余的可以省略。
2.  外阴影 (outset) 但是不能写 默认 想要内阴影 inset

div {
    			width: 200px;
    			height: 200px;
    			border: 10px solid red;
    			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
    			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
    			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
    			
    }
    复制代码

转载于:https://juejin.im/post/5c18f577f265da611e4d97cb