盒子模型小结

目录

一、div标签

二、盒子模型的属性

1.宽度：width

2.高度：height

3.边框属性

4.内边距(内填充)属性

5.外边距(边界)

6.background背景设置

7.盒子的宽度和高度的计算

(1)实际宽度

(2)实际高度

8.CSS3增加的新属性

(1)rgba(r,g,b,alpha)

(2)opacity

(3)border-radius

(4)box-shadow

(5)渐变效果(background-image)

(6)图像属性：

三、HTML中元素类型的转换

1.标签的等级

(1)行内标签

(2)块级标签

2.元素类型的转换

四、页面布局

1.布局的过程

2、页面布局中常用的属性

(1)浮动属性：float

(2)定位属性：position

(3)溢出属性：overflow

(4)层叠属性：z-index

---

一、div标签

块级标签(容器)，在没有设置高度、宽度属性时，和p标签相似(会自动换行)。

作为容器可以包含其他标签 ，p、span虽然是块级标签,但是不能作为容器使用。

二、盒子模型的属性

用盒子作为页面的布局时会用到的属性

1.宽度：width

2.高度：height

3.边框属性

border-style：上边 [右边 下边 左边]; 边框线的样式

border-width: 边框宽度,单位是像；

border-color: 边框线的颜色; (颜色名/rgb(r,g,b)/rgba(r,g,b,a)/#rrggbb #rgb)

综合设置：

border: 线型 线宽 颜色; border-radius：像素值或百分比; -->表示的是圆角边框

4.内边距(内填充)属性

padding-top : 上填充

padding-right : 右填充

padding-bottom : 下填充

padding-left : 左填充

5.外边距(边界)

margin-top: 上边界

margin-right: 右边界

margin-bottom: 下边界

margin-left: 左边界 

6.background背景设置

background-color：背景颜色

background-image：背景图像

background-repeat：背景的平铺属性

background-position：背景图像的位置(图像左上角的坐标)。取值可以是数值、预设值、百分比

综合设置背景图像：

background:背景色 url("图像") 平铺 定位 固定

7.盒子的宽度和高度的计算

(1)实际宽度

= width + 左右内边距(padding)之和 + 左右边框线(border)之和 + 左右外边距(margin)之和

(2)实际高度

= height + 上下内边距(padding)之和 + 上下边框线(border)之和 + 上下外边距(margin)之和

8.CSS3增加的新属性

(1)rgba(r,g,b,alpha)

rgba(r,g,b,alpha)：设置颜色及透明度的函数,参数r、g、b表示三个颜色分量，每个颜色的取值在0~255之间 参数alpha表示透明度,它的取值在0.0~1.0之间

(2)opacity

opacity：设置背景和图片的透明度。取值在0~1之间