跳到主要内容

盒子模型

盒子模型（box model）​

  • 网页的布局指就是将元素摆放到网页的不同的位置

  • 布局就得先确定元素的大小

  • 在网页中每一个元素都是一个矩形，或者可以直接将其想象为是一个盒子、每一个盒子，都由以下几个部分组成：

    • 内容区（content）
      • 内容区在元素最内部，用来容纳子元素
      • 内容区的大小由width和height设置
    • 内边距（padding）
      • 内容区和边框之间的距离称为内边距
    • 边框（border）
      • 边框是盒子边界，离开边框就属于盒子的外部了
      • 边框会影响到盒子可见框的大小
    • 外边距（margin）
      • 盒子与盒子之间的距离称为外边距
      • 外边距不会影响盒子的大小，但是它会影响盒子的位置

  • 设置边框：

    • 要设置边框，涉及到三个样式

      • border-width 边框的宽度
        • 10px 20px 30px 40px 上 右 下 左
        • 10px 20px 30px 上 左右 下
        • 10px 20px 上下 左右
        • 10px 上下左右
        • 除了border-width以外，也可以通过border-xxx-width来分别设置某个边框的宽度，xxx可以是top right bottom left
      • border-color 边框的颜色
        • 同理
      • border-style 边框的样式
        • 同理
        • solid 实线
        • dotted 点状虚线
        • dashed 虚线
        • double 双线

    • border 简写属性，可以同时设置边框的三个样式

      border:10px red solid;

    • 单独设置某边

      border-top:10px red solid;

  • padding同理

  • margin同理

  • 由于我们的浏览器默认是按照自左到右，自上向下的顺序来排列元素的所以当我们设置上和左外边距时，是改变元素自身的位置但是设置下和右时，会改变其他元素的位置

可见框​

  • 盒子的可见框指可见的部分，大小由内容区、内边距、边框决定
  • box-sizing 用来指定盒子可见框的计算方式
  • 可选值：
    • content-box 默认值，width和height用来设置内容区的大小
    • border-box 设置该值后，width和height用来设置盒可见框的大小

外边距的折叠​

  • 垂直方向的相邻外边距会发生外边距折叠的现象
    • 兄弟元素间外边距会取较大值（这样设计是为了避免两个元素之间的距离过远）
    • 父子元素间子元素外边距会传递给父元素

外边距自动计算​

  • 可以将margin的值设置为auto，设置auto后，元素的外边距由浏览器自动计算

  • 当我们将margin-left或margin-right中的一个设置为auto时，则浏览器会自动使其尽量的大

  • 如果将margin-left和margin-right同时设置为auto，则浏览器会使元素左右的外边距相同，也就是元素会在其父元素水平居中

  • 默认情况下，垂直外边距设置为auto时，浏览器会自动取0为外边距

行内元素的盒子模型​

  • 内容区
    • width height
    • 行内元素的大小被内容撑开
    • 无法通过width和height来设置行内元素宽度高度
  • 内边距
    • padding
    • 行内元素可以设置内边距，但是垂直方向的内边距不会影响布局
  • 边框
    • border
    • 行内元素可以设置边框，但是垂直方向的边框不会影响页面的布局
  • 外边距
    • margin
    • 行内元素可以设置水平方向的外边距