CSS中的box-sizing布局盒模型

web.jpeg

盒模型

---

• 在css中比较重要的就是 盒模型，它是在web中比较重要的一个基础点，当然其中涉及到 高度和宽度计算。

• width：宽度,在CSS中是指内容的宽度，并不是盒子的宽度

• height：高度，和宽度一样的原理

• padding:内边距

• border：变框

• margin:外边距

• 盒子的宽度 = padding + border +width

• 盒子的高度 = padding+border+height

---

box-sizing

• box-sizing: content-box|border-box|inherit

  .demo {
            padding: 30px;
            background-color: #036663;
            width: 200px;
            height: 200px;
            margin: 100px auto;
        
            box-sizing: border-box;

            border: 5px solid red;
        }

• 当 设置是box-sizing: border-box; 盒子的整体宽度就是200px 包括padding ,content(真实的宽度和高度)，border

image.png

content-box 其实就是 内容宽度 + padding + border

• 指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

image.png

inherit

• 继承 父元素 box-sizing属性的值

---

兼容

• 在使用时 不同的浏览器不一样，所以下面的伪元素兼容

*, *:before, *:after {
        /*  火狐浏览器 */
　　-moz-box-sizing: border-box;
      /* 谷歌浏览器 */
　　-webkit-box-sizing: border-box;
　　box-sizing: border-box;
　　}

• 注意移动会经常使用到这个属性
• 在不确定元素的尺寸的时候，使用box-sizing可以防止内容溢出，不出现滚动条
• 点击出现高亮效果-webkit-tap-highlight-color: ;
• 元素的外观更改-webkit-appearance:none 移动端也有的

盒子阴影

• box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影
• 模糊距离 :阴影的模糊度
• 阴影尺寸：阴影的大小
• outset 外阴影（默认）
• inset 内阴影

image.png