Skr-Eric的HTML课堂（六）——HTML的盒模型和背景属性

盒模型 （框模型）

1. 在CSS中，认为一切元素都是框，都是矩形区域

盒模型 ：计算元素在文档中的实际占位情况

盒模型组成 ：margin (外边距) border

padding(内边距) content(元素的宽高尺寸)

元素在文档中实际尺寸的计算 ：

默认情况下 ：

最终宽度=左右外边距+左右边框+左右内边距+width

最终高度=上下外边距+上下边框+上下内边距+height

 

2. margin

1. margin表示外边距 ：元素边框与其他元素边框之间的距离

2. 取值 ：像素值

1. margin : 10px;

表示设置上右下左四个方向都为10px的外边距

2. margin: 10px 20px;

表示上下外边距为10px,左右外边距为20px;

3. margin: 10px 20px 30px;

表示上右下左四个方向上的外边距分别为：

10px 20px 30px 20px;

4. margin: 10px 20px 30px 40;

分别设置四个方向的外边距

 

3. 单方向外边距的设置

1. 属性 ：

1. margin-top : 上方外边距

2. margin-right : 右边的外边距

3. margin-bottom : 底部外边距

4. margin-left : 左边外边距

2. 取值 ：像素值

只给当前方向设置外边距，给一个值

4. 特殊取值 ：

1. margin : 0; 设置元素外边距为0，常用于初始化页面

 样式，取消一些元素的默认外边距

2. margin : 0 auto; 设置左右外边距自动，用来实现元素

 的居中效果。auto只对左右外边距起作用

3. 取负值 ：

会移动元素的位置，负值表示向上向左移动元素，

常用于页面元素位置的微调

5. 自带默认外边距的元素 ：

body h1-h6 p ul ol

 

1. 外边距

1. 外边距使用注意 ：

1. 垂直方向上的外边距，会发生合并，取较大的值

2. 水平方向上的外边距，会发生叠加，元素之间的距离较大

3. 为子元素添加距上的外边距，作用于父元素上 ：

解决 ：

1. 为父元素设置上边框（可以使用透明色）

2. 为父元素天机顶部的内边距padding-top:0.1px;

 

2. 内边距

1. 元素内容与元素边框之间的距离，称为内边距

2. 属性 : padding

 取值 : 像素值或百分比

1. padding:10px;

设置上右下左四个方向的内边距

2. padding:10px 20px;

设置上下内边距为10，左右内边距为20

3. padding:10px 20px 30px;

设置上下内边距分别为10 30，左右内边距为20

4. padding:10px 20px 30px 40px;

设置上右下左四个方向的内边距

 

3. 单方向内边距的设置

1. 属性 ：

padding-top : 内容与元素顶部边框之间的距离

padding-right : 内容与元素右边框之间的距离

padding-bottom: 内容与元素底部边框之间的距离

padding-left : 内容与左边框之间的距离

2. 取值为像素值

4. 默认带有内边距的元素

ol ul input td...

5. 清除浏览器默认内外边距

body,h1,h2,h3,h4,h5,h6,p,ul,ol,input{

margin:0;

padding:0;

}

 

3. 设置盒模型的计算方式

et :

div{

width: 200px;

height: 200px;

border: 10px solid red;

margin: 10px;

padding: 10px;

}

div在文档中实际占据的尺寸为 ：260 * 260

1. 属性 ：box-sizing

 作用 ：指定盒模型的计算方式

 取值 ：

1. content-box : 默认值

元素的width height属性只用来规定内容的尺寸

，如果元素设置内外边距和边框，最终在文档中

占据的尺寸由各种值相加得到

2. border-box :

元素的width height属性，规定的是包含边框，

内边距和内容在内的尺寸

et :

div{

box-sizing: border-box;

width: 200px;

height: 200px;

border: 10px solid red;

margin: 10px;

padding: 10px;

}

div在文档中实际占据的尺寸为 ：220 * 220

 

4. 元素的显示设置

1. 设置元素的可见性

属性 ：visibility

取值 ：

1. visible 默认值，元素可见

2. hidden  设置元素隐藏,元素在文档中仍然占位

2. 转换元素类型

属性 ：display

取值 ：

1. block : 转换为块元素

2. inline : 转换为行内元素

3. inline-block : 转换行内块元素

特殊取值 ：

4. none : 实现元素隐藏,元素在文档中不占位，其他元素

会相应的移动

实现元素隐藏与显示 ：

display:none; 隐藏

display:block;显示

 

背景相关的属性

1. background-color

设置背景颜色，取颜色值

注意 ：

1. 所有元素默认的背景颜色都是透明色，新建窗口的

的白色不是body的背景色，是浏览器渲染的结果

2. 背景颜色是从元素的边框位置开始绘制的，如果元素

添加内边距，都会被渲染成相应的背景颜色

2. 背景图片

1. 设置背景图片

属性 ：background-image

取值 ：url()

注意 ：

1. 背景图片的尺寸如果大于元素尺寸，图片仍然按照

原始尺寸显示，超出元素的部分不可见

2. 背景图片的尺寸小于元素尺寸，浏览器会自动对

背景图片重复平铺，直到铺满元素

3. 背景图片与背景颜色一样，不影响元素正常内容的显示

2. 设置背景图片的重复方式

图片尺寸不够时，浏览器会自动沿水平和垂直两个方向

对图片进行重复平铺，直到铺满元素

属性 ：background-repeat

取值 ：

1. repeat : 默认值，沿水平和垂直方向平铺

2. repeat-x : 沿水平方向平铺

3. repeat-y : 沿垂直方向平铺

4. no-repeat : 设置背景图片不重复平铺

3. 设置背景图片的位置

1. 属性 ：background-position

2. 取值 ：x y

1. 取像素值 ：

x : 表示背景图片水平方向的偏移距离

正值表示图片向右偏移

负值表示图片向左偏移

y : 背景图片垂直方向的偏移距离

正值表示图片向下偏移

负值表示图片向上偏移

注意 ：结合“精灵图”实现元素背景图片调整，

 这种技术叫“精灵技术”

2. 取百分比

参照元素尺寸计算水平和垂直偏移距离

1. 0% 0%

背景图片显示在元素左上角

2. 50% 50%

背景图片显示在元素中间

3. 100% 100%

背景图片显示在右下角

 

 

 

想要看更多的课程请微信关注SkrEric的编程课堂