一、盒子模型
1、盒子
CSS处理网页时，它认为每个元素都包含在一 个不可见的盒子里，我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局
2、盒子模型
内容区(content)
内边距(padding)
边框(border)
外边距(margin)
-
内容区
内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的，如果没有为元素设置内边距和边框，则内容区大小 默认和盒子大小是一致的
通过width和height两个属性可以设置内容区的大小 -
内边距
内边距指的就是元素内容区与边框以内 的空间。
使用padding属性来设置元素的内边距
例如：padding:10px 20px 30px 40px
这样会设置元素的上、右、下、左四个方向的内边距
padding:10px 20px 30px
分别指定上、左右、下四个方向的内边距
padding:10px 20px
分别指定上下、左右四个方向的内边距
padding:10px
同时指定上左右下四个方向的内边距
同时在css中还提供了padding-top、padding-left、padding-right、padding-bottom分别用来指定四个方向的内边
-
边框
可以在元素周围创建边框，边框是元素可见框的最外部
可以使用border属性来设置盒子的边框
border:1px red solid
上边的样式分别指定了边框的宽度、颜色和样式
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框
- 边框的样式
none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）
groove（槽线）
ridge（脊线）
inset（凹边）
outset（凸边） -
外边距
外边距是元素边框与周围元素相距的空间
使用margin属性可以设置外边距
用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left
当将左右外边距设置为auto时，浏览器会将左右外 边距设置为相等，所以这行代码margin:0 auto可 以使元素居中
垂直外边距的重叠：在网页中相邻的垂直方向的外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和，如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
3、浏览器默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
*{
margin: 0;
padding: 0;
}
4、内联元素的盒模型
内联元素不能设置width和height，可以设置水平方向的内边距
padding-left: 100px;
padding-right: 100px
还可以设置边框，外边距
border: 1px blue solid
margin-left:100px
margin-right: 100px
水平方向的相邻元素的外边距不会重叠，会求和；
内联元素不支持垂直外边距
5、display
我们不能为行内元素设置width、height、margin-top和margin-bottom，我们可以通过修改display来修改元素的性质
可选值：
block：设置元素为块元素
inline：设置元素为行内元素
inline-block：设置元素为行内块元素（可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行）
none：隐藏元素，不会继续占有位置（元素将在页面中完全消失）
6、visibility
visibility属性主要用于元素是否可见，和display不同，使用visibility隐藏一个元 素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖
可选值：
visible：可见的，默认值，元素默认会在页面显示
hidden：隐藏的，位置会依然保持
7、overflow
当相关标签里面的内容超出了样式的宽度和高度时，可以通过overflow来控制内容溢出的情况
可选值：
visible：默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
scroll：会为父元素添加滚动条，通过拖动滚动条来查看完整内容（该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条）
auto：会根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加
hidden：隐藏超出盒子的内容，溢出的内容，会被修剪，不会显示
8、 文档流
文档流指的是文档中可现实的对象在排列时所占用的位置，将窗体自上而下分成一行行，并在每行中按从左至右的顺序排 放元素，即为文档流，这样一来每一个块元素都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦
- 元素在文档流中的特点：
块元素：1.块元素在文档流中会独占一行，块元素会自上向下排列；2.块元素在文档流中默认宽度是父元素的100%；3.块元素在文档流中的高度默认被内容撑开
内联元素：1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右；2.在文档流中，内联元素的宽度和高度默认都被内容撑开
9、浮动
- 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围
- 浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置
- 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素
- 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素
- 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个块元素
-
文字饶图
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果 - 块元素脱离文档流以后，高度和宽度都被内容撑开，也就是子元素多高，父元素就多高
10、高度塌陷
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高，但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷，由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱，所以在开发中一定要避免出现高度塌陷的问题。
-
解决方案一
根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的，当开启元素的BFC以后，元素将会具有如下的特性：1.父元素的垂直外边距不会和子元素重叠；2.开启BFC的元素不会被浮动元素所覆盖；3.开启BFC的元素可以包含浮动的子元素
如何开启BFC：
1.设置元素浮动（ 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题）；
2、设置元素绝对定位；
3、设置元素为inline-block（可以解决问题，但是会导致宽度丢失，不推荐使用这种方式）；
4、将元素的overflow设置为一个非visible的值，推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题，直接将元素的zoom设置为1即可。zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍，zoom:1表示不放大元素，但是通过该样式可以开启hasLayout，zoom这个样式，只在IE中支持，其他浏览器都不支持 -
解决方案二
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用，使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构 -
解决方案三
可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用。在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理
11、 清除浮动
clear属性可以用于清除元素周围的浮动对元素的影响，也就是元素不会因为上方出现了浮动元素而改变位置，当开启元素的BFC以后，元素将会具有如下的特性：
可选值：
left：忽略左侧浮动
right：忽略右侧浮动
both：忽略全部浮动 none：不忽略浮动，默认值
二、定位
position属性可以控制Web浏览器如何以及在何处显示特定的元素，可以使用position属性把一个元素放置到网页中的任何位置，使用定位会使元素的优先级高于文档流
可选值：
static：默认值，不开启定位
relative： 相对定位，元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留（left:200px 相对于原来的位置，偏离原来位置左边200像素）
absolute： **绝对定位 **元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身
1、相对定位
每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位；
当将position属性设置为relative时，则开启了元素的相对定位；
当开启了相对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位
-
特点：
1、如果不设置元素的偏移量，元素位置不会发生改变；
2、相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变；
3、相对定位不会改变元素原来的特性；
4、相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素
2、绝对定位
绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位），如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
当将position属性设置为absolute时，则开启了元素的绝对定位；
当开启了绝对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位
-
特点：
1、绝对定位会使元素完全脱离文本流
2、绝对定位的块元素的宽度和高度默认会被其内容撑开
3、绝对定位会使行内元素变成块元素
4、一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位
3、固定定位
固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动；
当将position属性设置为fixed时，则开启了元素的固定定位；
当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位；
固定定位的其他特性和绝对定位类似，不同的是，固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
4、z-index
如果定位元素的层级是一样，则下边的元素会盖住上边的；
当元素开启定位以后就可以设置z-index这个属性；
这个属性可以提升定位元素所在的层级；
z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index 值较大的元素会显示在网页的最上层；
父元素的优先级再高也不会盖住子元素
