盒子模型（CSS笔记）

记录一些日常的学习笔记，希望自己能坚持学下去。

1.看透网页的本质

看透网页的本质：
利用CSS设置好盒子的大小，然后摆放盒子的位置。
最后把网页元素比如文字图片等，放入盒子里面。

2.盒子模型

就是把HTML页面中的布局元素看作是一个矩形盒子，盛装内容的容器
总结：
盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距(margin)组成。
盒子里的文字和图片等元素是 内容区域
盒子的厚度就是盒子的边框
盒子内容与边框的距离是内边距（类似单元格 cellpadding）
盒子与盒子之间的距离是外边距（类似单元格 cellspacing）

3.盒子边框

语法：

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框的样式：
none：没有边框即忽略所有边框的宽度(默认值)
solid：边框为单实线（常用）
dashed：边框为虚线
dotted：边框为点线

3.1盒子边框写法总结

很多情况不需要指定4个边框，可以给4个边框分别指定。

上边框	下边框	左边框	右边框
border-top-style:样式	border-bottom-style:样式	border-left-style:样式	border-right-style:样式
border-top-width:宽度	border-bottom-width:宽度	border-left-width:宽度	border-right-width:宽度
border-top-color:颜色	border- bottom-color:颜色	border-left-color:颜色	border-right-color:颜色
border-top:宽度 样式 颜色	border-bottom:宽度 样式 颜色	border-left:宽度 样式 颜色	border-right:宽度 样式 颜色

3.2表格的细线边框

通过表格的cellspacing=“0”,将单元格与单元格之间的距离设置为0
但是两个单元格之间的边框会出现重叠，从而使边框变粗
通过css属性：

table{border-collapse:collapse}

border-collapse:collapse表示相邻边框合并在一起

<style>
	table {
		width:500px;
		height: 300px;
		border: 1px solid red;
	}
	td {
		border: 1px solid red;
		text-align: center;
	}
	table,td {
		border-collapse: collapse;/*合并相邻框*/
	}
</style>

4.内边距

4.1内边距

padding属性用于设置内边距。指边框与内容之间的距离

给盒子指定padding值之后，发生了两件事：
1.内容和边框有了距离，添加了内边距
2.盒子会变大
注意：后面跟几个数值表示的意思不同

4.2内盒尺寸计算(元素实际大小)

宽度：
Element Height= conter height + padding + border(height为内容高度)
高度：
Element Width = conter width + padding + border(width为内容宽度)
盒子实际大小=内容的宽度和高度 + 内边距 + 边框

4.3内边距产生的问题

问题：会撑大原来的盒子
解决：通过给设置宽度的盒子，减去相应的内边距的值，维持盒子原有的大小

4.4padding不影响盒子大小情况

如果没有给盒子指定宽度，此时给这个盒子指定padding，不会撑开盒子

5.外边距

5.1外边距

margin属性用于设置外边距、控制盒子和盒子之间的距离

margin值得简写（复合写法）和padding相同

5.2块级盒子水平居中

让一个块级盒子水平居中必须：
盒子必须指定宽度（width）
然后给左右外边距设置为auto
实际开发中常用这种方式进行网页布局，示例：

.header {width:960px; margin:0 auto;}

常见写法。以下三种都可以
margin-left:auto; margin-right:auto;
margin:auto;
margin:0 auto;

5.3文字居中和盒子居中区别

text-align: center;/* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就可以 */

5.4插入图片和背景图片区别

插入图片 比如产品展示类 移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

5.5消除元素的默认内外边距（重要）

为了方便控制网页元素，需要将网页默认的内外边距清除

 * {
	padding: 0; /*清除内边距*/
	margin: 0; /*清除外边距*/
}

注：行内元素为了照顾兼容性，尽量只设置左右内外间距，不要设置内外间距

5.6外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
1.相邻块元素垂直外边距的合并
上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-buttom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的最大值这种现象被称为相邻块元素垂直外边距的合并（外边距塌陷）

解决方案：尽量只给一个盒子添加margin值
2.嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者的较大值

解决方案：
1.为父元素定义上边框
2.为福严肃定义上内边距
3.为父元素添加overflow:hidden.

6.盒子模型布局稳定性

什么情况下用内边距，什么情况下用外边距？
大部分情况下是可以混合用的，使用内边距也可以，使用外边距也可以
根据稳定性来分，如下：
优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）
width > padding > margin
原因：
margin 会有外边距合并 还有ie6下面的margin 加倍的bug 所以最后使用
padding 会影响盒子大小，需要加减计算 其次使用
width 没有问题 我们经常使用宽度剩余法 高度剩余法来做