css三大模块

盒子模型：box model 四部分组成
margin:外边距 盒子与盒子之间距离
border：边框 指定上下作用边框大小、样式
padding：边框与内容之间距离，内边距
content：内容

---

padding：边框与内容之间的距离
盒子加了内边距后的影响
1）内容和边框有了距离
2）盒子会变大

---

内盒尺寸计算
盒子的实际大小：内容宽度和高度+内边距+边框

---

padding不影响盒子大小情况，如果盒子没有宽度，则padding不会撑开盒子

---

	<div style="width:200px;height:200px;background-color:green;">
		<div style="width:310px;height:30px;background-color:red"></div>
	</div>

外边距margin
1.块级盒子水平居中
满足：1）盒子本身必须有宽度 2）左右外边距为auto
auto就是充满，没有宽度就会充满整个父亲宽度
2.文字居中和盒子居中
text-align:center ;文字居中 行内元素、行内块元素居中
margin:auto;块级盒子居中

---

插入图片与背景图片区别
1.插入图片 ：产品展示、移动位置只能用和模型 padding margin
2.背景图片：小图标背景、超大图标 通过background-positon

---

外边距合并
1.垂直外边距合并
当上下相邻两个块元素相遇时，如果上面的元素有下外边距，下面的元素有上外边距，他们之间的距离取两个值中较大者，外边距塌陷

---

塌陷
2)嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后外边距为两者中的较大者。 左右不会，

解决方案：
1）父亲定义上边框
2）父亲定义内边距
3）父亲添加overflow：hidden

---

盒子布局稳定性：
优先使用width padding margin

---

标准流
浮动
定位

---

为什么需要浮动：多个div合并为一行
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float用于创建浮动框，将其移动到一边，直到左边缘触及包含块或另一个浮动框的边缘。

浮动特性：
1.浮动元素会脱离标准流，不再保留原先的位置
2.浮动的元素会一行内显示且元素顶部对齐
3.浮动的元素会具有行内块元素的特性

浮动元素具有行内块元素的特征：

如果块级元素没有设置宽度，默认宽度和父级元素一样宽，但是添加浮动后，他的大小根据内容来决定，

浮动元素经常搭配标准流的父元素：
为了约束浮动元素位置我们网页布局一般采用策略是，先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置，符合网页布局的第一准则

浮动布局注意点：
1）浮动和标准流的父盒子搭配
2）浮动的盒子只会影响浮动盒子后边的标准流不会影响前面的标准流

---

为什么需要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。

清除浮动的本质？
清除浮动造成的影响，清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

清除浮动的策略是？
闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
clear：both

---

清除浮动方法
1.额外标签法
.clear{ clear:both} 这个额外标签必须是块级元素
2.父级添加overflow
overflow：hidden/auto/scroll
但是无法显示溢出的部分
3.父级添加after伪元素
.clearfix:father{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{ *zoom: 1;}
4.父级添加双伪元素
.clearfix:before,.clearfix:after{
content:"",display:table
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1
}

---

定位导读：
1.某个元素可以在一个盒子内移动位置并且压住其他盒子。
2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的
定位：可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位组成：定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。
定位模式：positon
static：静态定位
relative：相对定位
1）相对定位在移动位置的时候，是相对于它原来的位置来说的。
2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）
absolute：绝对定位
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
三个特点：
1.如果没有祖先元素或者祖先元素没有定位，则已以浏览器为准定位。
2.如果祖先元素有定位（相对/绝对/固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置
fixed：固定定位
固定定位是元素固定于浏览器可视区的位置。主要是用场景：可以在浏览器页面滚动时元素的位置不会改变。
特点：
1.以浏览器的可视窗口为参照点移动元素。
2.不占有原先位置。
固定版心位置：
1.让固定定位的盒子left：50%，走到浏览器可视区的一半位置
2.让固定定位的盒子margin-left：版心宽度的一半距离
边偏移：top/bottom/left/right四个属性。

子绝父相的由来：
1）子级绝对定位，不会占有位置，可以放到父盒子里边的任何一个地方，不会影响其他的兄弟盒子。
2）父盒子需要加定位限制子盒子在父盒子内显示。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

只有定位的盒子才有z-index属性
加了绝对定位的盒子不能通过margin：0 auto水平居中，但是可以通过
left:50%;//父容器宽度的一半
marign-left：负值 自己盒子宽度的一半

---

显示和隐藏
display：
visible
overflow

---