HTML----盒子模型

HTML----盒子模型

盒子模型

概念

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

---

边框

border-color

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369;
border-right-color	有边框颜色	border-right-color:#369;
border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	1. 四个边框同一个颜色 2.上、下边框颜色：#369 左右边框：#000 3.上边框颜色：#369 左右边框颜色：#000 下边框颜色：#f00 4.上、右、下、左边框颜色： #369、#000、#f00、#00f	1. border-color:#eeff34; 2.border-color:#369 #000; 3.border-color:#369 #000 #f00; 4.border-color:#369 #000 #f00 #00f;

---

border-width

类型

1. thin：定义细的边框。
2. medium：默认。定义中等的边框。
3. thick：定义粗的边框。
4. 像素值

---

border-style

类型

1. none
2. hidden
3. dotted
4. dashed
5. solid
6. double

---

border:同时设置边框的颜色、粗细和样式

示例

border:1px solid #f00;
border:1px dashed red;

边距

外边距

外边距是指围绕在边框之外的空白区域。可以有1~4个值，以顺时针即上右下左的顺序依次赋值。

属性

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin

用处

网页居中对齐

margin:0px auto;

网页居中的必要条件

• 块元素
• 固定宽度

---

内边距

内边距指的是元素与边框之间的空白区域，可以有1~4个值，按照顺时针即上右下左的顺序依次赋值.

属性

• padding-left

• padding-right

• padding-top

• padding-bottom

• padding

盒子模型的尺寸

盒子模型总尺寸 = border + padding + margin + 内容宽度

语法

box-sizing: content-box | border-box | inherit;

#说明
content-box:默认值，盒子的总尺寸
border-box:盒子的高度或宽度等于元素内容的宽度或高度
inherit：元素继承父元素的盒子模型模式

浏览器兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
box-sizing	8+	1.5+	1.0+	9.0+	3.1+

---

边框

语法

border-radius:20px 10px 50px 30px;

四个属性按照顺时针排列。

圆形

使用border-radius制作圆形要点

1. 元素的宽度和高度必须相同
2. 圆角的半径为元素宽度的一半，或者直接设置圆角半径为50%

示例

div{
	width:10px;
	height:10px;
	border:4px solid red;
	border-radius:50%;
}

半圆形

使用border-radius制作半圆形要点

1. 制作上半圆或下半圆时，元素的宽度是高度的两倍，而且圆角半径为元素的高度值。
2. 制作左半圆或右半圆时，元素的高度是宽度的两倍，而且圆角半径为元素的宽度值。

扇形

使用border-radius制作扇形遵循"三同，一不同"原则

1. “三同”：是元素宽度高度，圆角半径相同。
2. “一不同”：是圆角取值位置不同。

---

盒子阴影

语法

box-shadow:inset x-offset y-offset blur-radius color;

#说明
inset:阴影类型，内阴影
x-offset:x轴位移，指定阴影水平位移量
y-offset:y轴位移，指定阴影垂直位移量
blur-radius:阴影模糊半径，阴影向外模糊的模糊范围
color:阴影颜色，定义绘制阴影时所使用的颜色