第四章 盒子模型
4.1 认识盒子模型
所谓盒子模型就是把HTML页面中的元素看做看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距边框、外边距组成。
4.2盒子模型相关属性
4.2.1边框属性
在CSS中边框属性包括边框样式属性(border-style)、边框宽度属性（border-width)、边框颜色属性（border-color）、单侧边框的属性、边框的综合属性。
1.设置边框样式（border-style)
例：<p>只有上边为虚线dashed，其他三边为单实线solid，可以使用border-style综合属性分别设置各边样式：p{border-style:dashed solid solid solid;} 或综合设置4条边p{border-style:solid;}
注：点线dotted和虚线dashed样式，存在兼容问题
2.设置边框宽度（border-width）
单位：px
border-top-width:上边框宽度
border-right-width：右边框宽度
border-bottom-width：下边框宽度
border-left-width：左边框宽度
border-width：上边框宽度（右下左）
注：在设置边框宽度时，必须同时设置边框样式，如果未设置，或设置为none，则不论宽度设置为多少都无效。
3.设置边框颜色（border-color）
其取值可以为预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r
.g.b)
border-top-color:上边框颜色
…
…
以此类推（上右下左）
4.综合设置边框
border：四边宽度 样式 颜色
不分先后，可以只指定需要设置的属性
4.2.2内边距属性
1.内边距是指元素内容与边框之间的距离，常称为内填充
2.padding：上内边距（右下左）
3.padding相关属性可以取值为auto自动（默认值）、不同单位的数值，相对于父元素（或浏览器）宽度的百分比%，实际工作中最常用的是像素值Px,不允许使用负值。同边框相关属性一样，使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制，一个值为四边，两个值为上下/左右。3个值为上/左右/下。
4.如果段落的内边距设置了%数值，当拖动浏览器窗口改变其宽度时段落的内边距随之变化（这是<p>标记的父元素为<body>)
注：如果设置内外边距为百分比，不论上下或左右的内外边距，都是相对于父元素width的百分比，随父元素width的变化而变化，和高度height无关。
4.2.3 外边距属性
指元素边框与相邻元素之间的距离
margin：上外边距（右下左）
4.2.4背景属性
1.设置背景颜色
background-color的默认值为tranparent，即背景透明
2.设置背景图像
background-image
3.设置背景图像平铺
repeat：沿水平和竖直两个方向平铺（默认值）
no-repeat：不平铺（图像位于元素的左上角，只显示一次）
repeat-x：只沿水平方向平铺
repeat-y：只沿竖直方向平铺
4.设置背景图像的位置
background-position（值通常设为两个，用空格分开）
水平方向值：left center right
垂直方向值：top center bottom
5.设置背景图像固定
background-attachment
scroll：图像随页面元素一起滚动
fixed：图像固定在屏幕上，不随页面元素滚动
6.综合设置元素的背景
background：背景色 url（“图像”) 平铺 定位 固定；
4.2.5 盒子的宽与高
使用宽度属性width 和高度属性heigth可以对盒子的大小进行控制
盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边框之和
盒子的总高度=heigth+上下内边距之和+上下边框宽度之和+上下外边框之和
注：此两属性只适用于块级元素，对行内元素无效（标记和除外）
4.3 元素的类型与转换
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 b i u