二十、定位进阶
1.定位叠放次序z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
语法: 选择器( z-index:1; }
**注意：**1.数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上
2. 如果属性值相同，则按照书写顺序，后来居上
3. 数字后面不能加单位
4. 只有定位的盒子才有z-index属性
2.定位的拓展
a.绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中
① left:50%;: 让盒子的左侧移动到父级元素的水平中心位置
② margin-left:-100px; :让盒子向左移动自身宽度的一半
b.定位特殊特性
绝对定位和固定定位也和浮动类似。
① 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
② 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
c.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
d.绝对定位(固定定位)会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位(固定定位)会压住下面标准流所有的内容.
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
应用案例:淘宝焦点图布局制作
1.大盒子我们类名为:tb-promo淘宝广告
2.里面先放一张图片
3.左右两个按钮用链接就好了。 左头 prev 右箭头 next
4.底侧小圆点ul继续做。类名为 promo-nav
二十一、网页布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子
通过CSS浮动、定位可以让每个盒子排列成为网页
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法
1.标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
二十二、元素得显示与隐藏
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现!
本质:让一个元素在页面中隐藏或者显示出来
1. display显示隐藏
display属性用于设置一个元素应如何显示
①display:none ;隐藏对象
②display: block;除了转换为块级元素之外，同时还有显示元素的意思
**注意：**display 隐藏元素后，不再占有原来的位置后面应用及其广泛，搭配JS可以做很多的网页特效。
2. visibility 显示隐藏
visibility 属性用于指定一个元素应可见还是隐藏
①visibility: visible; 元素可视
②visibility : hidden; 元素隐藏
**注意：**visibility 隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来位置，就用visibility: hidden
如果隐藏元素不想要原来位置，就用display:none(用处更多重点)
3. overflow 溢出显示隐藏
overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
**注意：**一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。
