CSS-高级技巧
1. 元素的显示与隐藏
① display 显示
display 设置元素是否及如何显示。
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
特点：隐藏之后，不再保留位置。
实际应用场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛。
② visibility 可见性
设置元素是否可见。
visibility：visible ; 元素可见
visibility：hidden; 元素隐藏
特点：隐藏之后，继续保留原有位置。（停职留薪）
③ overflow 溢出
设置元素的内容超过其指定高度及宽度时如何管理内容。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
实际应用场景：
- 清除浮动
- 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。
2. BFC（块级格式化上下文）
BFC(Block formatting context)，直译为"块级格式化上下文"。BFC就是一个封闭的区域（独立的渲染区域），如果一个区域创建了BFC，它就会创建一个封闭的区域，盒子创建了BFC后，盒子里面的孩子爱怎么浮动，爱怎么定位，不会影响这个区域以外的盒子，这就叫做BFC。
① 哪些元素可以产生BFC
我们前面讲过，元素的显示模式display，分为块级元素（block）、行内元素（inline）、行内块元素（inline-block）、隐藏（none），其实，它还有很多其他显示模式。
不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block（块级元素），list-item（其实就是li，只不过我们没有显式的写出来，当然li也是块级元素），table 的元素，会产生BFC，所以：块级元素具有产生BFC的条件。
大家有没有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局，其他的属性值，比如 line 等等，它们创建的是 IFC ，我们暂且不研究。
这个BFC 有着具体的布局特性，比如，有宽度、高度、内边距padding、外边距margin、边框border。就好比，你有了练习武术的体格了，有潜力，有资质。
② 元素产生BFC的条件
块级元素具有产生BFC的条件，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？
给这些元素添加如下属性的一个就可以触发BFC。
- float属性不为 none（默认就是none）
- position为绝对定位（absolute）或固定定位（fixed）
- display为flex、inline-block、table-cell、table-caption、inline-flex
- overflow不为visible（默认就是visible）
③ BFC元素所具有的特性
- 在BFC中，盒子从顶端开始垂直地一个接一个地排列，盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠。
怎么解决外边距合并问题呢？
我们创建不属于同一个BFC，就不会发生margin重叠了（代码就是把绿色盒子再包装一层，然后给包装的盒子创建BFC，就是添加属性overflow: hidden）。
- 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
我们根据这个特性清除元素内部浮动。
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式。可能你会说，把父盒子设置为float不也可以让父元素变成BFC吗？但是把父元素添加float就脱离文档流了，可能就不会达到我们想要的效果了，所以我们一般使用overflow: hidden。当父元素为BFC，计算BFC的高度时，自然也会检测浮动或者定位的盒子高度，这样高度的问题就解决了。
- BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
以前我们说多，浮动刚开始出现就是为了做文字环绕图片效果的，所以如果有两个盒子，左边的盒子浮动，右边的盒子有文字，就会有文字环绕图片的效果，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.right {
background-color: yellow;
/* overflow: hidden; */
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right">
我是文字,我是文字,我是我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,我是文字,
</div>
</body>
</html>
文字环绕图片：
如果我们想要装文字的盒子和左边盒子没有重叠，就需要给装文字的盒子添加BFC，也就是给装文字的盒子设置overflow: hidden;，添加BFC之后，装文字的盒子就跑到绿色盒子右边了，如下图：
3. CSS用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
① 鼠标样式 cursor
设置在元素上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 默认箭头 |
| pointer | 小手 |
| move | 正方形移动框 |
| text | 光标输入框 |
| not-allowed | 白色圆圈的禁止 |
鼠标放我身上查看效果哦：
<ul>
<li style="cursor:default">默认箭头</li>
<li style="cursor:pointer">小手</li>
<li style="cursor:move">正方形移动框</li>
<li style="cursor:text">光标输入框</li>
<li style="cursor:not-allowed">白色圆圈的禁止</li>
</ul>
② 轮廓线 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color || outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的，最直接的写法是：outline: 0; 或者 outline: none;。
<input type="text" style="outline: none;"/>
③ 防止拖拽文本域 resize
g
为了防止用户随意拖拽文本域，造成页面布局，混乱实际开发中，我们文本域右下角是不可以拖拽，我们可以使用resize: none;禁止拖拽。
<textarea style="resize: none;"> </textarea>
4. vertical-align 垂直对齐
- 文字水平居中，是 text-align: center;
- 有宽度的块级元素水平居中，是 margin: 0 auto;
- 定位的盒子水平居中，是
left: 50%; margin-left: -100px; - 设置表格在网页中的水平居中，是 align: center
上面都是设置水平居中，vertical-align 属性设置元素的垂直对齐方式，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制<img/>、<input/>与文字的对齐。
vertical-align: baseline | top | text-top | middle | bottom | text-bottom
baseline：默认。元素放置在父元素的基线上
top：把元素的顶端与行中最高元素的顶端对齐
text-top：把元素的顶端与父元素字体的顶端对齐
middle：把此元素放置在父元素的中部
bottom：把元素的顶端与行中最低的元素的顶端对齐
text-bottom：把元素的底端与父元素字体的底端对齐
默认，图片会放到父元素文字的基线上，如下：
① 图片和文字对齐
所以我们知道，我们可以通过 vertical-align 控制<img/>和父元素文字的垂直关系了。
② 去除图片底侧空白缝隙
当父盒子由图片撑开，图片下面会多出缝隙。
原因：
我们应该知道<img/>、<input/>是一个行内块元素，而行内块元素的默认对齐方式是基线对齐，而这时候的<img/>就相当于下面文字的a、c、h、l、x，他的最底部对齐的是基线，所以会出现空白问题。
解决的方法就是：
- 给
<img/>设置 vertical-align: middle | top bottom等等，让图片不要和基线对齐。
- 给
<img/>添加 display：block; 转换为块级元素就不会存在问题了。
5. 盒子居中
以前我们学过让文字水平、垂直居中的方式如下：
text-align: center; /*让文字水平居中*/
line-height: 60px; /*行高等于盒子的高度，让文字垂直居中*/
其实这两个属性不止可以让文字居中。
text-align：以值为center为例，当前块级容器里的所有行内元素(包括img)在当前容器中水平居中，对块级元素无效。
line-height：可以用在段落中，改变多行文字之间的行距；把某容器的line-height设置与height相同的值，可以使容器中的一行内容垂直居中，仅限一行内容，对行内元素(包括img)有效，对块级元素无效。
总结：可以把行内元素当成文字来对待。
① 水平居中的5种方法
-
使用
margin: 0 auto -
使用定位（position），先让子盒子的左边缘和父盒子的垂直中心线重叠，然后再使用
margin-left让子盒子往回移动自身的一半距离 -
使用定位（position），先让子盒子的左边缘和父盒子的垂直中心线重叠，然后再使用
transform: translateX(-50%)让子盒子往回移动自身的一半距离 -
使用flex弹性布局
.box {
display: flex;
justify-content: center; /* 子元素水平排列方式，居中对齐 */
}
- 把子盒子转换成行内块元素，然后给父盒子设置 text-align: center 属性使子盒子水平居中
.t1 { /* 父盒子 */
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center; /* 给父盒子设置 text-align: center 属性使子盒子水平居中 */
}
.t2 { /* 子盒子 */
width: 200px;
height: 200px;
border: 1px solid blue;
display: inline-block; /* 把子盒子转换成行内块元素 */
}
② 垂直居中的3种方法
-
使用定位（position），先让子盒子的上边缘和父盒子的水平中心线重叠，然后再使用
margin-top让子盒子往回移动自身的一半距离 -
使用定位（position），先让子盒子的上边缘和父盒子的水平中心线重叠，然后再使用
transform: translateY(-50%);让子盒子往回移动自身的一半距离
.t1 { /* 父盒子 */
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.t2 { /* 子盒子 */
width: 200px;
height: 200px;
border: 1px solid blue;
position: absolute;
/*垂直居中对齐最简单的方式*/
top: 50%; /*先让子盒子的上边缘和父盒子的水平中心线重叠*/
transform: translateY(-50%); /*再让子盒子往回移动自身的一半距离*/
}
- 使用flex弹性布局
.box {
display: flex;
align-items: center; /* 子元素垂直排列方式，居中对齐 */
}
6. 溢出的文字省略号显示
① word-break 如何换行
前面我们学了，letter-spacing 属性用于定义字母间距，一个汉字也可以看作一个字母，word-spacing 属性用于定义英文单词之间的间距。
word-break 属性规定自动换行的处理方法，主要处理英文单词。
word-break：normal 使用浏览器默认的换行规则。
word-break：break-all 允许拆开单词显示。
word-break：keep-all 不允许拆开单词显示，只能在半角空格或连字符处换行。
② white-space: nowrap 强制一行显示文本
white-space 属性设置如何处理元素内的空白，通常我们使用于强制一行显示内容，可以处理中文。
white-space:normal 默认。空白会被浏览器忽略。
white-space:nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。强制一行显示后，文字大小不会改变
③ text-overflow 文字溢出
text-overflow 属性规定当文本溢出包含元素时发生的事情。
text-overflow : clip ；超出部分直接裁剪掉
text-overflow：ellipsis ；超出部分使用...代替
注意：文字溢出需要配合white-space:nowrap;(强制一行显示)，overflow:hidden;(超出部分隐藏)
④ 文本溢出隐藏
- 单行文本溢出隐藏
一般情况下上面那些属性是结合起来使用的，比如有需求：要求文字一行显示，超出的隐藏掉，未显示完的使用省略号表示，代码如下：
p {
white-space: nowrap; /*强制文本一行显示*/
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*文本溢出使用省略号表示*/
}
- 多行文本溢出隐藏 - webkit
如果是多行文本溢出隐藏，显示省略号，代码如下：
p {
display: -webkit-box; /*将对象作为弹性的伸缩盒子显示*/
-webkit-box-orient: vertical; /*设置伸缩盒子对象内子对象的排列方式：垂直方式排列*/
-webkit-line-clamp:2; /*限定块元素显示的行数*/
overflow: hidden; /*超出文本隐藏*/
text-overflow: ellipsis; /*显示省略号*/
}
注意：上面的方式只针对于 - webkit 浏览器
- 多行文本溢出隐藏 - 通用方式
采用添加伪元素的方式。
p {
height: 30px;
line-height: 2em;
overflow: hidden;
border: 1px solid red;
position: relative;
}
p::after {
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding: 0px 8px 0px 8px;
background-color: #fff;
}
7. CSS精灵图技术（sprite）
① 为什么需要精灵图技术？
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
② 精灵图技术讲解
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。
这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
我们需要使用CSS的如下属性来设置：
background-image 背景图片
background-repeat 背景图片重复方式
background-position 背景图片开始位置
首先我们知道，css精灵技术主要针对于背景图片，插入的图片 img 是不需要这个技术的。
我们需要精确测量每个小背景图片的大小和位置，给盒子指定小背景图片时，背景定位基本都是负值。
如果是小公司，背景图片很少的情况，没有必要使用精灵技术，因为维护成本太高。如果是大公司，背景图片比较多，建议使用精灵技术。
③ 精灵图使用案例
精灵图如下：
效果图如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
span {
background: url(images/abcd.jpg) no-repeat;
float: left;
}
span:first-child { /*结构伪类选择器，匹配父元素中的第一个元素span*/
width: 108px;
height: 109px;
background-position: 0 -9px;
}
span:nth-child(2) {
width: 110px;
height: 113px;
background-position: -256px -275px;
}
span:nth-child(3) {
width: 97px;
height: 108px;
background-position: -363px -7px;
}
span:nth-child(4) {
width: 110px;
height: 110px;
background-position: -366px -556px;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
</html>
8. 字体图标
① 什么是字体图标
图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的，更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的，此时就需要用到字体图标（iconfont)，字体图标的本质是文字，推荐两个字体图标库，如下：
icomoon字库：http://icomoon.io
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
阿里 icon font 字库：http://www.iconfont.cn/
这个是阿里的一个icon font字体图标库，包含了淘宝图标库和阿里巴巴图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！！
② 字体图标优点
- 可以做出跟图片一样可以做的事情，改变透明度、旋转度，等..
- 字体图标的本质是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
- 本身体积更小，但携带的信息并没有削减。
- 几乎支持所有的浏览器。
- 因为可以进行缩放而不失真，所以是移动端设备必备良药...
③ 字体图标使用流程
我们以icomoon字库为例，icomoon字库的字体图标使用流程如下：
fontt.png
1. 设计字体图标
假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，比如下图，之后保存为 svg 格式，然后给我们前端人员就好了。
除了自己制作svg图标，我们还可以直接从iconfont下载svg图标，如下图：
2. 上传svg图标
当我们拿到 svg 图标的时候，需要转换成我们页面能使用的字体文件，而且生成的是兼容各个浏览器的字体包。
点击如下图标，进入上传界面：
如果不是icomoon自带的svg图标，点击icomoon的ImportIcons按钮上传svg图标，上传之后选中图标，如下：
如果是icomoon自带的图标，就不用上传了，直接选中图标就可以了，如下：
3. 下载兼容字体包
选中完图标之后，点击 Generate Font，生成字体包，如下：
最后再点击Download下载字体包。
4. 字体引入到HTML
下载后的文件解压之后，如下：
其中fonts文件夹就是我们使用的字体文件夹了，demo-files和demo.html是demo相关的文件，selection.json文件记录了我们选择了哪些字体，如果我们想要更新字体，那么就需要上传这个文件，然后重新下载兼容字体包。
第1步：把fonts文件夹复制到我们的项目中（这是通俗的做法，而且注意其他文件也不要删，留着有用）
第2步：在样式里面声明字体，告诉别人我们有自己定义的字体
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
第3步：给盒子使用字体
span {
font-family: "icomoon"; /* 一定要保证和上面的font-family: 'icomoon' 相同 */
}
第4步：盒子里面添加结构
span::before {
content: "\e900";
}
/* 或者在Demo里面直接复制图标 */
<span></span>
第5步：追加新图标到原来库里面
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要把压缩包里面的 selection.json 重新上传，然后，选中自己想要的新图标，重新下载压缩包，替换原来文件即可。
9. 滑动门
现实中的滑动门就是类似全家店里的门，自动左右滑动来开门关门的。
① 复习新浪导航案例
在案例：新浪导航中，因为标题的字数不一样多，所以我们不方便给宽度，而是给padding，由文字撑开盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
nav {
height: 41px;
background-color: #FCFCFC;
border-top: 3px solid #FF8500; /* 上边框 */
border-bottom: 1px solid #EDEEF0; /* 下边框 */
}
nav a {
font-size: 14px;
color: #4C4C4C;
text-decoration: none; /* 取消下划线 */
padding: 0 15px; /* 内边距，上下0 左右15 */
/* 因为链接是行内元素没有大小，所以需要转换行内块，才可以设置高度 */
display: inline-block;
height: 41px;
line-height: 41px; /* 行高等于高度可以文字垂直居中 */
}
nav a:hover { /* 链接伪类选择器 鼠标经过a链接的时候 */
background-color: #eee;
}
</style>
</head>
<body>
<nav>
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</nav>
</body>
</html>
新浪导航中没有背景图片，所以简单一点，如果有背景图片，那就需要拉伸背景图片。
② 滑动门出现的背景
制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，UI往往只会给我们一张固定宽高的背景图，需要我们拉伸图片来适应不同的文字。
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强，最常见于各种导航栏的滑动门。
③ 核心技术
核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度，以便能适应不同字数的导航栏。
一般的经典布局都是这样的：
<li>
<a href="#">
<span>导航栏内容</span>
</a>
</li>
总结：
- a 不设置宽度，内容撑开盒子，设置背景左侧，再设置
padding-left用于显示背景图的左边。 - span 不设置宽度，文字撑开盒子，设置背景右侧，再设置
padding-right用于显示背景图的右边。 - 之所以a包含span就是因为整个导航都是可以点击的。
④ 微信导航栏案例
下面使用滑动门技术实现微信导航栏案例，效果图如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: url(images/wx.jpg) repeat-x;
}
.nav {
height: 75px;
}
.nav li {
float: left;
margin: 0 10px;
padding-top: 21px;
}
.nav li a {
display: block;
color: #fff;
font-size: 14px;
line-height: 33px;
/*不设置宽度，内容撑开盒子*/
background: url(images/to.png) no-repeat; /*设置背景图*/
padding-left: 15px; /* 设置左padding */
text-decoration: none;
}
.nav li a span {
display: block;
line-height: 33px;
/* 不设置宽度，内容撑开盒子 */
background: url(images/to.png) no-repeat right center; /*设置背景图*/
padding-right: 15px; /* 设置右padding */
}
.nav li a:hover {
background-image: url(images/ao.png); /* 鼠标经过a要变换背景 */
}
.nav li a:hover span { /* 鼠标经过a里面的span也要变换背景 */
background-image: url(images/ao.png);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<span>帮助与反馈</span>
</a>
</li>
<li>
<a href="#">
<span>公众平台</span>
</a>
</li>
<li>
<a href="#">
<span>帮助与反馈</span>
</a>
</li>
<li>
<a href="#">
<span>帮助与反馈</span>
</a>
</li>
</ul>
</div>
</body>
</html>
10. 定位的盒子层级最高
如何实现下面的四周边框宽度一致的效果？
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px; /*左走负一*/
margin-top: -1px; /*上走负一*/
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
上面代码可以实现四周边框宽度一致，如果我们想实现鼠标经过盒子四周显示橘色边框的效果，那怎么办呢？
因为浮动的盒子后面的会在前面的上面，所以后面盒子的线会压住前面的盒子的线，所以现在鼠标经过盒子的效果是这样的：
我们只需让当前鼠标经过的那个div升到最高处就好了。因为定位的盒子层级是最高层的，我们只要保证当前的这个盒子是定位的，就会压住标准流和浮动盒子，所以我们只能用相对定位，因为它不脱标。
注意：z-index只有定位的盒子才能使用，如果我们不使用定位，直接使用z-index: 999;肯定是没效果的，但是当我们使用相对定位后，盒子已经升到最高处了，就没必要使用z-index了。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin负值之美-突出显示某个盒子</title>
<style>
div {
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
/*鼠标经过div*/
div:hover {
border: 1px solid #f40;
position: relative;
}
</style>
</head>
<div></div>
<div></div>
<div></div>
</html>
这样鼠标经过div就会显示橘色边框了，如下：
但是一般情况下，div就已经添加相对定位了（子绝父相），这时候我们就可以用z-index把层级调到最高了，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin负值之美-突出显示某个盒子</title>
<style>
div {
position: relative; /*相对定位*/
float: left;
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin-left: -1px;
margin-top: -1px;
}
div:hover {
border: 1px solid #f40;
/*都是定位的盒子，我们通过z-index来实现层级关系*/
z-index: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
小结：
- 定位的盒子层级是最高层的，我们只要保证当前的这个盒子是定位的就会压住标准流和浮动盒子。
-
z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动无效。
11. 宽高为0设置边框可以形成三角形
当设置宽高为0，边框为10px。
div {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
效果如下：
基于此，我们可以用css边框模拟三角形效果。
- 宽高为0。
- 我们4个边框都要写，只保留需要的边框颜色，其余的都改为 transparent 透明就好了。
- 为了照顾兼容性，低版本的浏览器，加上
font-size: 0; line-height: 0;
① 模拟淘宝三角形
代码如下：
p {
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent red; /*只设置左三角的颜色*/
font-size: 0;
line-height: 0;
}
② 京东三角形效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 长方形盒子 */
div {
/* 父相对定位 */
position: relative;
width: 200px;
height: 100px;
background-color: pink;
margin: 100px auto;
}
/* 三角形盒子 */
p {
/* 子绝对定位 */
position: absolute;
/* 往上移动 */
top: -40px;
/* 水平居中 */
left: 50%;
margin-left: -20px;
/* 下面是设置三角形 */
width: 0;
height: 0;
border-style: solid;
border-width: 20px;
/* 只设置下三角的颜色 */
border-color: transparent transparent pink transparent;
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
