css盒模型

概述

CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）

所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）

内容 content

概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。 元素的内容及子元素默认从内容区域开始排列。

width/height     设置宽/高

边框 border

边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。

border-width边框宽度

• 作用

  设置所有边框宽度，或者单独地为各边边框设置宽度。

• 取值

  • 长度值

  • 不允许指定负长度值。

    border-style边框样式

  • 作用

    设置标签所有边框的样式，或者单独地为各边设置边框样式。

  • 取值

    • none 定义无边框。

    • dotted 定义点状边框。

    • dashed 定义虚线。

    • solid 定义实线。

    • double 定义双线。双线的 宽度等于 border-width 的值。

      border-color边框颜色

    • 作用

      设置所有边框颜色，或者单独地为各边边框设置颜色。

      简写

      定义四个边

      语法：border:样式 宽度 颜色；

      单个方向定义

      说明：每个边框都可以设置样式宽度颜色。 语法：border-方向：宽度 样式 颜色；

    • border-方向-width

    • border-方向-color

    • border-方向-style

    注意:

    • 边框会影响盒子实际大小

    • 边框样式、边框宽度、边框颜色无书写顺序要求

      内边距 padding

      CSSpadding（内边距）属性，定义元素边框与元素内容之间的空间。 padding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

      单个方向设置

    • padding-bottom 设置标签的下内边距

    • padding-left 设置标签的左内边距

    • padding-right 设置标签的右内边距

    • padding-top 设置标签的上内边距

      取值

    • px

    • 默认值0

    • 百分比

    • 不可使用负值

      写

      padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

    • 语法：padding：1-4个值 【空格隔开】

    • 规则：

      • 1个值：表示【四个方向】的内边距值

      • 2个值：分别表示【上下，左右】的内边距值

      • 3个值：分别表示【上，左右，下】的内边距值

      • 4个值：分别表示【上，右，下、左】的内边距值

    外边距margin

    概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

    单个方向定义

  • margin-bottom 设置下内边距

  • margin-left 设置左内边距

  • margin-right 设置右内边距

  • margin-top 设置上内边距

    简写

  • 语法：空格隔开

  • 取值：1-4个规则与padding值一致

  • 取值

    • px

    • auto浏览器自动计算

    • 允许使用负值

      外边距应用

      外边距实现已知宽度的块级盒子水平居中