CSS常用样式-盒模型属性

CSS常用样式-盒模型属性

• 个用来描述盒子位置、尺寸 的属性，分别是宽度 width、高度 height、内边距 padding、 边框 border、外边距 margin

• 宽度 width

  • 作用：设置可以添加元素内容的区域的宽度
  • auto 默认值；px像素值定义宽度；% 定义参考父元素宽度width的百分比宽度
  • 特殊应用
    • 如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其 特点自动计算出实际宽度，例如
      元素等独占一行的，其 width 属性的值会自 动撑满父元素的 width 区域，如果是 元素等不需要独占一行的，其 width 属性的值是内部元素内容自动撑开的宽度。
    • 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度。

• 高度 height

  • 作用：设置可以添加元素内容的区域的高度。
  • auto 默认；px 像素值定义的高度；% 定义参考父元素宽度height的百分比高度
  • 特殊应用
    • 如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度

• 内边距 padding

  • 设置的是元素的边框内部到宽高区域之间的距离
  • 可以去加载背景，不能书写嵌套的内容。
  • 属性值：常用px为单位的数值
  • padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。

• 边框 border

  • 作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层

  • 属性值：由三个值组成，分为线的宽度、线的形状、线的颜色

  • 线宽：border-width

    • 作用：设置边框线的宽度
    • 属性值：常用px形式的数值，四个方向都有边框，属性值类似于 padding，也有四 种值的写法。

  • 线型：border-style

    • 作用：设置边框的线条形状
    • 属性值：形状的单词，总体也是类似 padding 的综合属性写法
    • 常用：实线 solid、虚线 dashed
    • 不常用：dotted 点状边框；double 双线；
    • 基本不用：groove 3D凹槽；ridge 3D垄状；inset 3D内容凹陷；outset 3D内容突出 颜色：border-color
    • 作用：设置边框的颜色。
    • 属性值：颜色名或颜色值，整体类似 padding 综合属性写法 -上边框：border-top 右边框：border-right 下边框：border-bottom 左边框：border-left

• 外边距 margin

  • 作用：设置的是盒子与盒子之间的距离。
  • 特点：不能渲染背景。
  • 属性值：常用 px 为单位的数值。
  • 外边距的设置方式与内边距 padding 一模一样的。