CSS-高级技巧

作者: Imkata | 来源:发表于2022-03-07 00:34 被阅读0次

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

为了防止用户随意拖拽文本域，造成页面布局，混乱实际开发中，我们文本域右下角是不可以拖拽，我们可以使用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>

CSS-高级技巧

1. 元素的显示与隐藏

① display 显示

② visibility 可见性

③ overflow 溢出

2. BFC（块级格式化上下文）

① 哪些元素可以产生BFC

② 元素产生BFC的条件

③ BFC元素所具有的特性

3. CSS用户界面样式

① 鼠标样式 cursor

② 轮廓线 outline

③ 防止拖拽文本域 resize

4. vertical-align 垂直对齐

① 图片和文字对齐

② 去除图片底侧空白缝隙

5. 盒子居中

① 水平居中的5种方法

② 垂直居中的3种方法

6. 溢出的文字省略号显示

① word-break 如何换行

② white-space: nowrap 强制一行显示文本

③ text-overflow 文字溢出

④ 文本溢出隐藏

7. CSS精灵图技术（sprite）

① 为什么需要精灵图技术？

② 精灵图技术讲解

③ 精灵图使用案例

8. 字体图标

① 什么是字体图标

② 字体图标优点

③ 字体图标使用流程

1. 设计字体图标

2. 上传svg图标

3. 下载兼容字体包

4. 字体引入到HTML

9. 滑动门

① 复习新浪导航案例

② 滑动门出现的背景

③ 核心技术

④ 微信导航栏案例

10. 定位的盒子层级最高

11. 宽高为0设置边框可以形成三角形

① 模拟淘宝三角形

② 京东三角形效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读