html css（部分内容.2）

css盒模型

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

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

 

2、内容 content

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

 width  设置宽度

auto默认值。浏览器可计算出实际的宽度。px   百分比

height  设置高度

auto默认值。浏览器可计算出实际的宽度。px   百分比

3、边框 border

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

取值：长度值。不允许指定负值

语法

空格隔开1-4个值

1个值 设置所有边框宽度

2个值 设置上下、左右

3个值 设置上、左右、下

4个值 设置上、右、下、左

border-style边框样式

作用

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

取值：none定义无边框

dotted 定义点状线边框

solid 定义实线边框

double 定义双实现边框 双线的 宽度等于 border-width 的值。

dashed 定义虚线边框

其他（了解——掌握以上5个即可）

语法

• 1个值 设置所有边框

• 2个值 设置上下、左右

• 3个值 设置上、左右、下

• 4个值 设置上、右、下、左

注意：只有当这个值不是 none 时，边框才可能出现。如果边框样式是 none，边框宽度实际上会重置为 0。

border-color边框颜色

作用

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

取值

颜色的名称，如 red

RGB 值， 如 rgb(255,0,0)

16进制值，如 #ff0000

语法

1个值 设置所有边框

2个值 设置上下、左右

3个值 设置上、左右、下

4个值 设置上、右、下、左

简写

定义四个边

语法：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浏览器自动计算                允许使用负值

外边距应用

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