盒子模型

未深爱
110 阅读5分钟

[TOC]

盒子模型

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

  • content

    元素的内容 width/height

  • padding

    元素和内容之间的间距

  • border

    元素自己的边框

  • margin

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

内容 宽度和高度

  • 设置内容是通过宽度和高度设置的
    • 宽度设置: width
    • 高度设置: height
  • 另外我们还可以设置如下属性:
    • min-width：最小宽度，无论内容多少，宽度都大于或等于 min-width
    • max-width：最大宽度，无论内容多少，宽度都小于或等于 max-width
    • 移动端适配时, 可以设置最大宽度和最小宽度
  • 下面两个属性不常用:
    • min-height：最小高度，无论内容多少，高度都大于或等于 min-height
    • max-height：最大高度，无论内容多少，高度都小于或等于 max-height

内边距 - padding

padding 属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;

padding 包括四个方向, 所以有如下的取值:
  • padding-top：上内边距
  • padding-right：右内边距
  • padding-bottom：下内边距
  • padding-left：左内边距 padding 单独编写是一个缩写属性：

padding 的其他值

padding 值的个数padding 例子代表的含义
4padding: 10px 20px 30px 40px;top: 10px, right: 20px, bottom: 30px, left: 40px;
3padding: 10px 20px 30px;缺少 left, left 使用 right 的值;
2padding: 10px 20px;缺少 left, 使用 right 的值; 缺少 bottom, 使用 top 的值;
1padding: 10px;top/right/bottom/left 都使用 10;

边框 border

边框相对于 content/padding/margin 来说特殊一些

  • 边框具备宽度 width;
  • 边框具备样式 style;
  • 边框具备颜色 color;

设置边框的方式

  • 边框宽度
    • 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-style 属性值
      • none: 默认无边框
      • dotted: 定义一个点线边框
      • dashed: 定义一个虚线边框
      • solid: 定义实线边框
      • double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
      • groove: 定义 3D 沟槽边框。效果取决于边框的颜色值
      • ridge: 定义 3D 脊边框。效果取决于边框的颜色值
      • inset:定义一个 3D 的嵌入边框。效果取决于边框的颜色值
      • outset: 定义一个 3D 突出边框。 效果取决于边框的颜色值
    • border-top-style、border-right-style、border-bottom-style、border-left-style
    • border-style 是上面 4 个属性的简写属性
    三个属性值位置可以互换
    <line-width>|| <line-style>||<color>

圆角 – border-radius

border-radius 常见的值:

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

外边距 - margin

margin 属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;

margin 包括四个方向, 所以有如下的取值:

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

margin 的其他值

margin 值的个数margin 例子代表的含义
4margin: 10px 20px 30px 40px;top: 10px, right: 20px, bottom: 30px, left: 40px;
3margin: 10px 20px 30px;缺少 left, left 使用 right 的值;
2margin: 10px 20px;缺少 left, 使用 right 的值; 缺少 bottom, 使用 top 的值;
1margin: 10px;top/right/bottom/left 都使用 10;

上下 margin 的传递

  • margin-top 传递

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

  • margin-bottom 传递

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

  • 如何防止出现传递问题？
    • 给父元素设置 padding-top\padding-bottom
    • 给父元素设置 border
    • 触发 BFC: 设置 overflow 为 auto
  • 建议
    • margin 一般是用来设置兄弟元素之间的间距
    • padding 一般是用来设置父子元素之间的间距

上下 margin 折叠的情况

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

块级元素水平居中问题

1.
.box{
     margin 0 auto;
}

2.
.box{
test-align:center;
}
.child{
    display:inline-block;
}

外轮廓 - outline

outline 表示元素的外轮廓

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

outline 相关属性有

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

盒子阴影 – box-shadow

box-shadow 属性可以设置一个或者多个阴影

  • 每个阴影用<shadow>表示
  • 多个阴影之间用逗号,隔开，从前到后叠加

<shadow >的常见格式如下 offset-x offset-y blur color

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

文字阴影

行内非替换元素的特殊性

span / a / strong / i

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

    width、height、margin-top、margin-bottom

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

    padding-top、padding-bottom、上下方向的 border 盒子会被撑起来但不占据空间

avatar
文章
阅读
粉丝