美文网首页
盒子模型

盒子模型

作者: SeanLink | 来源:发表于2024-01-09 09:05 被阅读0次

    CSS盒子模型

    HTML每个元素都可以看做为一个盒子

    具备四个属性

    ◼ 内容(content)

    • 元素的内容width/height

    ◼ 内边距(padding)

    • 素和内容之间的间距

    ◼ 边框(border)

    • 元素自己的边框

    ◼ 外边距(margin)

    • 元素和其他元素之间的间距
    18cb47bec04.png

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

    18cb47dc9c7.png

    内容 - 宽度和高度

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

    • 宽度设置: width
    • 高度设置: height

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

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

    • min-width: 最小宽度
    • max-width: 最大宽度
    • 移动端适配时,可以设置最大宽度和最小宽度

    下面两个不太常用:

    • min-height: 最小高度
    • max-height: 最大高度

    内边距 - padding

    ◼ padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;
    ◼ padding包括四个方向, 所以有如下的取值:

    • padding-top:上内边距
    • padding-right:右内边距
    • padding-bottom:下内边距
    • padding-left:左内边距

    ◼ padding单独编写是一个缩写属性:

    • padding-top、padding-right、padding-bottom、padding-left的简写属性
    • padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

    ◼ padding并非必须是四个值, 也可以有其他值;

    padding的其他值

    18cb482cd1b.png

    边框 border

    • 边框宽度
      • border-top-width、border-right-width、border-bottom-width、border-left-width
      • border-width是上面4个属性的简写属性
    • 边框颜色
      • border-top-color、border-right-color、border-bottom-color、border-left-color
      • border-color是上面4个属性的简写属性
    • 边框样式
      • border-top-style、border-right-style、border-bottom-style、border-left-style
      • border-style是上面4个属性的简写属性

    边框样式的取值

    • groove:凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
    • ridge:山脊, 和grove相反,边框看上去好象是从画布中凸出来
    18cb4860c4e.png

    同时设置的方式

    • 如果我们相对某一边同时设置 宽度 样式 颜色 , 可以进行如下设置 :

      • border top
      • border right
      • border bottom
      • border left
      • border :统一设置 4 个方向的边框
    • 边框颜色、宽度、样式的编写顺序任意

    18cb487d5c4.png

    圆角 – border-radius

    这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius,和 border-bottom,left-radius 简写为一个属性。

    ◼ border-radius常见的值:

    • 数值: 通常用来设置小的圆角, 比如6px;
    • 百分比: 通常用来设置一定的弧度或者圆形;

    外边距 - margin

    margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;
    ◼ margin包括四个方向, 所以有如下的取值:

    • margin-top:上内边距
    • margin-right:右内边距
    • margin-bottom:下内边距
    • margin-left:左内边距

    ◼ margin单独编写是一个缩写属性:

    • margin-top、margin-right、margin-bottom、margin-left的简写属性
    • margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

    ◼ margin也并非必须是四个值, 也可以有其他值;

    margin的其他值

    18cb49303a2.png

    上下margin的传递

    ◼ margin-top传递

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

    ◼ margin-bottom传递

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

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

    • 给父元素设置padding-top\padding-bottom
    • 给父元素设置border
    • 触发BFC: 设置overflow为auto

    ◼ 建议

    • margin一般是用来设置兄弟元素之间的间距
    • padding一般是用来设置父子元素之间的间距

    上下margin的折叠

    ◼ 垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin,这种现象叫做collapse(折叠)

    ◼ 水平方向上的margin(margin-left、margin-right)永远不会collapse

    ◼ 折叠后最终值的计算规则

    • 两个值进行比较,取较大的值

    ◼ 如何防止margin collapse?

    • 只设置其中一个元素的margin

    上下margin折叠的情况

    两个兄弟块级元素之间上下margin的折叠
    父子块级元素之间margin的折叠

    18cb499a423.png

    外轮廓 - outline

    ◼ outline表示元素的外轮廓

    • 不占用空间
    • 默认显示在border的外面

    ◼ outline相关属性有

    • outline-width: 外轮廓的宽度
    • outline-style:取值跟border的样式一样,比如solid、dotted等
    • outline-color: 外轮廓的颜色
    • outline:outline-width、outline-style、outline-color的简写属性,跟border用法类似

    ◼ 应用实例

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

    盒子阴影 - box-shadow

    • box-shadow属性可以设置一个或者多个阴影
      • 每个阴影用表示
      • 多个阴影之间用逗号,隔开,从前到后叠加

    ◼ shadow的常见格式如下

    18cb49bfa56.png
    • 第1个<length>:offset-x, 水平方向的偏移,正数往右偏移
    • 第2个<length>:offset-y, 垂直方向的偏移,正数往下偏移
    • 第3个<length>:blur-radius, 模糊半径
    • 第4个<length>:spread-radius, 延伸半径
    • <color>:阴影的颜色,如果没有设置,就跟随color属性的颜色
    • inset:外框阴影变成内框阴影

    盒子阴影

    在线测试阴影效果

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

    18cb49e08bf.png

    文字阴影 - text-shadow

    ◼ text-shadow用法类似于box-shadow,用于给文字添加阴影效果
    ◼ shadow的常见格式如下

    18cb4a1b4b2.png
    • 相当于box-shadow, 它没有spread-radius的值;

    ◼ 我们可以通过一个网站测试文字的阴影:
    https://html-css-js.com/css/generator/box-shadow

    行内非替换元素的注意事项

    ◼ 以下属性对行内级非替换元素不起作用

    • width、height、margin-top、margin-bottom

    ◼ 以下属性对行内级非替换元素的效果比较特殊

    • padding-top、padding-bottom、上下方向的border

    CSS属性 - box-sizing

    ◼ box-sizing用来设置盒子模型中宽高的行为
    ◼ content-box

    • padding、border都布置在width、height外边

    ◼ border-box

    • padding、border都布置在width、height里边

    box-sizing: content-box

    ◼ 元素的实际占用宽度 = border + padding + width
    ◼ 元素的实际占用高度 = border + padding + height

    18cb4a3d560.png

    box-sizing: border-box

    ◼ 元素的实际占用宽度 = width
    ◼ 元素的实际占用高度 = height

    18cb4a42d35.png

    IE盒子模型

    18cb4a48053.png

    元素的水平居中方案

    ◼ 在一些需求中,需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
    ◼ 行内级元素(包括inline-block元素)

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

    ◼ 块级元素

    • 水平居中:margin: 0 auto

    相关文章

      网友评论

          本文标题:盒子模型

          本文链接:https://www.haomeiwen.com/subject/svhjndtx.html