网页设计与制作4

---

认识盒子模型

标题

---

所谓盒子模型，就是把HTML页面中的元素当做是一个矩形盒子，由边框，内边距，外边距和内容构成。他的图示结构如下：

---

盒子模型相关属性

---

一.边框属性：

边框分为：上边框，下边框，左边框，右边框。

下图展现了他们的一些设置：

二.设置边框样式

边框样式用于定义页面中的边框风格，常用属性值如下：

三.设置边框宽度：

宽度也分上下左右宽度

综合设置四面宽度时，也必须按照上下左右的顺时针采用值复制。
下图是设置的一个方法 大家看一下：

三.设置边框颜色

边框颜色的设置如下：

四.综合设置边框：

五.内边距属性

在css中，padding属性用于设置内边距，同边框属性border一样，padding也是复合属性。

padding属性值可为auto，不用单位的数值，相对于父元素宽度的百分比%，实际中最常用的是像素值px，不允许使用负值。

六.外边距属性

margin用于设置外边距，与padding相似，外边距可以使用负值，使相邻元素重叠。
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可将块级元素水平居中。

七.背景属性

1.设置背景颜色

用background-color来控制。

2.设置背景图像

用background-image属性实现

3.设置背景图像平铺

用backgroung-repeat来实现

4.设置背景图像的位置

用background-repeat定义为no-repeat图像将显示在元素的左上角。

5.设置背景图像固定

用backgroung-attachment来设置

其属性值如下：

scroll：图像随页面元素一起滚动

fixed：图像固定在屏幕上

6.综合设置元素的背景

他们的语法格式如下：

7.盒子的宽与高

width与height的属性值可以为不同单位的数值或相对于父元素的百分比&,实际工作中最常用的是像素值；

使用宽度属性width 和高度属性heigth可以对盒子的大小进行控制
盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边框之和
盒子的总高度=heigth+上下内边距之和+上下边框宽度之和+上下外边框之和

---

元素的类型与转换

---

4.3.1元素的类型
1.块元素：以区域块的形式出现。
（1）独占一行，宽度和父元素宽度一样宽（默认）
（2）可以设置宽高
（3）设置的width属性和元素的宽度（width+padding2+border2+margin2）
是两回事(盒子模型)
（4）如果没有设置高度，高度由内容撑开
包含：div,h1-h6，p，pre, hr, ul+li, ol+li、html、head、body块级元素可以包裹别的元素。p标签尽量不要包裹别的块级元素
2.行内元素：
（1）可以和别的标签共享一行，标签的宽度和高度由内容决定
（2）不能设置宽高，外边距和内边距部分可控制(盒子模型)
包含：span、i、u、strong、em、a、b、sup、sub、del3.
3.行内块级元素：
（1）可以和别的元素共享一行，宽高由内容决定（默认）
可以设置宽高
包含：img input
注意：行内块级元素并排显示的时候，两个行内块级元素之间默认有一个间隔取消行内块级元素之间的空格：给行内元素的父元素设置字体大小为0px（行内元素的内容无法显示，行内元素之间的空格也无法显示）给行内元素设置合理的字体大小（行内元素的内容就能显示了）
补充：
（1）只有标签宽度大于文本内容宽度的时候，才会体现出居中对齐效果
元素的学习：
（2）学习元素的展现样式学习元素的语义化含义（重点）
（3）无语义化的元素有：div span biu