盒子模型css样式（day3）

盒子模型（css 重点）
理解：

1. 能说出盒子模型有哪四部分组成
2. 能说出内边距的作用以及对盒子的影响
3. 能说出padding设置不同数值分别代表的意思
4. 能说出块级盒子居中对齐需要的2个条件
5. 能说出外边距合并的解决方法

应用：
能利用边框复合写法给元素添加边框
能计算盒子的实际大小
能利用盒子布局模块案例

看透网页布局的本质

1. 首先利用css设置好盒子的大小，然后摆放盒子的位置。
2. 最后把网页元素比如文字图片等等，放入盒子里面、

盒子模型
border 手机盒子的厚度
内容区域 content
padding 填充泡沫的厚度（内边距）
与其他盒子的距离 外边距 为margin

border
border-width
**border-style 😗*默认状态是none

1. solid 实线
2. dashed虚线
3. dotted 点线
   border-color边框颜色

盒子边框的综合写法（没有顺序）
border： 粗细 风格 颜色

边框单独指定样式

<style>
		div {

			width: 500px;
			height: 500px;
			border-top: 2px solid orange;
			border-left: 2px solid blue;
			border-right: 2px solid green;
			border-bottom: 2px solid purple;

		}
		/*input {
			border-top: none;
			border-left: none;
			border-right: none;
			border-bottom: 1px dashed orange;
		}*/
		/*四个边框都去掉，先写大的，后写小的*/
		input {
			border: none;
			border-bottom: 1px dashed red;
		}

	</style>

表格的细线边框
两个单元格之间边框会出现重叠，从而使边框变粗

通过css属性：

table{ border-collapse:collapse;}

collapse 折叠 合并的意思

padding****内边距

边框与内容之间的距离
padding-left/right/top/bottom

padding会使盒子变大
padding简写：

 /* 	padding-left: 10px;
	   	padding-top: 30px;*/
	   	/*padding: 10px 20px;上下10，左右20*/
	   /*	padding: 10px 20px 30px; 上10，左右20，下30*/
	   /*padding: 10px 20px 30px 40px; 顺时针 上10 右20 下30 左40*/

高度是不要量边框的，

内盒尺寸计算（元素实际大小）

盒子的实际大小=内容的宽度 高度+内边距+边框
解决的方法：
内边距一定要给的，我们只能给出width的宽度
让width的宽度-多出来就可以了

外边距

margin：盒子与盒子之间的距离，或者是盒子与四周之间的距离
margin：top/bottom/right/left
写法和padding一样

块级盒子水平居中对齐

/*让块级盒子居中对齐1.必须要有宽度2，左右边距设置为auto*/
			margin-left: auto;
			margin-right: auto;

常见 写法：

1. margin-left:auto; margin-right:auto;
2. margin:auto;
3. margin:0,auto;

文字居中和盒子居中的区别
1 text-align: 让文字居中外，还可以让行内元素和行内块居中对齐
2 块级盒子水平居中，左右margin改为auto

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

1. 插入图片我们用的最多，比如产品展示图 移动位置 只能靠盒子模型padding margin
2. 背景图片我们一般用于小图标背景或者大面积背景图片 只能通过background-position

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

<style>
		/*这是一个神奇的代码，我们以后写css 第一句话*/
		/*清除元素默认的内外边距*/
		* {
			margin: 0;
			padding: 0;
		}
	</style>

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距

外边距合并

1. 当上下相邻的两个元素相遇时，如果上面元素有下外边距margin-bottom
2. 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
3. 取两个值中较大者这种现象被称为相邻块元素垂直外边距合并（也称外边距塌陷）

解决方法：尽量只给一个盒子添加margin值

嵌套块元素垂直外边距合并（塌陷）

解决方案：
1.为父级加上级边框 ，透明边框transparent
2.可以给父级制定一个上padding值
3.给父元素添加overflow：hidden

盒子模型布局稳定性
按照优先使用宽度（width），其次使用内边距（padding），再次外边距（margin）
原因：
1.margin会有外边距合并，还有ie6下面margin加倍的bug,所以最后使用。
2.padding会影响盒子大小，需要进行加减计算，其次使用
3.width没有问题，我们经常使用宽度剩余法，高度剩余发来做

去掉列表默认样式

li {
			list-style: none;
		}

拓展：

圆角边框

border-radius：length（50%）

其数值是width的一半，也可以写50%
结果出来是个圆形

圆角矩形：
矩形只用高度的一半，需要精确单位

盒子阴影
box-shadow

box-shadow：水平阴影、垂直阴影、阴影虚实、阴影大小、阴影颜色
（必须按照顺序来写）

h-shadow 水平阴影（必须写）
v-shadow 垂直阴影（必须写）
blur 模糊距离
spread 阴影尺寸
color颜色
inset 内部阴影
默认状态是外阴影

box-shadow: 0 15px 30px  rgba(0,0,0,.3) ;

小米官方阴影

css书写规范

1. 空格规范：选择器和{ 必须保留空格如：div空格 {
2. 属性和数值之间 也要保留空格 width空格 200px
3. 并集选择器必须独占一行

/*goog*/
		.post,
		.page,
		.comment {
			
		}

属性规范;
属性定义必须另起一行
属性定义后必须以分号结束