CSS盒子模型

目录

盒子的四个属性

padding&margin

border-radius

上下margin的传递

outline外轮廓

shadow

元素的水平居中方案

---

盒子的四个属性

◼ HTML中的每一个元素都 可以看做是一个盒子 ，如右下图所示，可以具备这4个属性：

◼ 内容（content）

 元素的内容width/height

◼ 内边距（padding）

 元素和内容之间的间距

◼ 边框（border）

 元素自己的边框

◼ 外边距（margin）

 元素和其他元素之间的间距

◼ 因为盒子有四边, 所以 margin/padding/border 都包括 top/right/bottom/left 四个边:

◼ 设置内容是通过宽度和高度设置的:

 宽度设置: width

 高度设置: height

◼ 注意: 对于 行内级非替换元素 来说, 设置 宽高是无效 的!

◼ 另外我们还可以设置如下属性:

 min-width ： 最小宽度 ，无论内容多少，宽度都 大于或等于min-width

 max-width ： 最大宽度 ，无论内容多少，宽度都 小于或等于max-width

 移动端适配 时, 可以设置最大宽度和最小宽度;

◼ 下面两个属性不常用:

 min-height ：最小高度，无论内容多少，高度都大于或等于min-height

 max-height ：最大高度，无论内容多少，高度都小于或等于max-height

padding&margin

 

border-radius

◼ border-radius用于设置盒子的圆角

◼ border-radius常见的值:

 数值 : 通常用来设置小的圆角, 比如6px;

 百分比 : 通常用来设置一定的弧度或者圆形;

◼ border-radius事实上是一个缩写属性:

将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。 开发中比较少见一个个圆角设置;

◼ 如果一个元素是正方形, 设置 border-radius大于或等于50%时，就会变成一个圆

上下margin的传递

◼ margin-top传递

 如果 块级元素的顶部线和父元素的顶部线重叠 ，那么 这个块级元素的margin-top值会传递给父元素

◼ margin-bottom传递

 如果 块级元素的底部线和父元素的底部线重写 ， 并且父元素的高度是auto ，那么 这个块级元素的margin-bottom值会传递给父元素

◼ 如何防止出现传递问题？

 给 父元素设置padding-top\padding-bottom

 给 父元素设置border

 触发BFC: 设置overflow为auto

◼ 建议

 margin 一般是用来 设置兄弟元素之间 的间距

 padding 一般是用来 设置父子元素之间 的间距

outline外轮廓

◼ outline表示元素的 外轮廓

 不占用空间

 默认 显示在border的外面

◼ outline相关属性有

 outline-width : 外轮廓的宽度

 outline-style ：取值跟border的样式一样，比如solid、dotted等

 outline-color : 外轮廓的颜色

 outline ：outline-width、outline-style、outline-color的简写属性，跟border用法类似

◼ 应用实例

 去除a元素、input元素的focus轮廓效果

shadow

我们可以通过一个网站测试盒子的阴影:

 https://html-css-js.com/css/generator/box-shadow/

 

我们可以通过一个网站测试文字的阴影:

 https://html-css-js.com/css/generator/box-shadow/

元素的水平居中方案

◼ 在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）

◼ 行内级元素(包括inline-block元素)

         水平居中：在父元素中设置 text-align: center

◼ 块级元素

         水平居中： margin: 0 auto