CSS高级技巧篇

1. 鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性	属性值	作用
cursor:	default	白箭头
pointer	小手
move	移动
text	文本

2 轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

2.1 outline的属性，及语法

属性	属性值描述
outline-color:	轮廓线颜色
outline-style:	轮廓线样式
outline-width:	轮廓线宽度

简写 outline : 颜色 样式 宽度;

2.2 去掉outline样式

我们平时一般不去设置，而是去掉浏览器默认的轮廓线样式。
最直接的写法是： outline: 0; 或者 outline: none;

<input type=\"text\" style=\"outline: 0;\"/>

3 防止拖拽文本域resize

resize：none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。
右下角不可以拖拽：

<textarea style=\"resize: none;\"></textarea>

4 垂直对齐 vertical-align

4.1 vertical-align 垂直对齐

属性	属性值	作用
vertical-align:	baseline	基线对齐（默认值）
top	顶线对齐
middle	中线对齐
bottom	底线对齐

注意： vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。

4.2 去除图片底侧空白缝隙

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决方法：

方法一：给img vertical-align:middle | top等等。让图片不要和基线对齐
方法二：给img 添加 display：block; 转换为块级元素就不会存在问题了
方法三：设置父元素的字体大小为0，副作用就是父元素范围里面的文字都会看不见，有文字的时候不推荐使用这种方法。

5 溢出处理

盒子在没有设置宽高的情况下，添加、缩减内容的时候会自动增加或减少width、height的值
如果盒子设置了width、height，那么当内容过多的时候就会溢出到盒子外边，溢出部分浏览器默认会显示出来

overflow 控制内容溢出边框盒后的处理方式：

属性	属性值	作用
overflow:	visible	溢出部分可见（默认值）
hidden	溢出部分隐藏
scroll	生成滚动条
auto	在需要滚动条时才生成滚动条
overflow-x或y	scroll	只生成一边滚动条
auto	在需要时，出现一边滚动条

6. 断词规则（一般用默认的）

在行宽不够的时候，文字会自动换行，在哪个位置截断然后换行，由断词规则决定，浏览器有默认的断词规则

我们也可以通过word-break 设置断词规则：

属性	属性值	作用
word-break:	normal	默认值，CJK（中、日、韩）字符（文字位置截断），非CJK字符（单词位置截断）
break-all	截断所有，所有字符都在文字处截断
keep-all	保持所有，所有文字都在单词之间截断

7. 单行文本过长设置“…”

比如有些标题过长，后面过长的部分用“…”来表示

white-space：nowrap 首先需要设置不换行
overflow：hidden 然后隐藏溢出
text-overflow：ellipsis 然后文字溢出的部分用“…”来代替
只能处理单行文本

8. @规则

@import “路径”; 用于在一个CSS文件中导入另一个CSS文件，这样在HTML文件中导入一个CSS文件就可以了
@charset “utf-8”; 告诉浏览器该CSS文件，使用的字符编码集是utf-8；必须写在CSS文件中的第一行；一般情况下可以不写，如果CSS文件中出现了中文字符，建议写上

9. web字体

用户电脑上没有安装相应字体，强制让用户下载该字体（浏览器临时性自动下载网页编写者给定在CSS中的字体文件）

声明字体@font-face{font-family:\"字体名\";src：url(\"字体文件路径\");}

注：然后就可以给元素设置这个字体了。字体文件放在font文件夹中

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

全称Block Formatting Context，简称BFC，它是一块独立的渲染区域，它规定了该区域中，常规流块盒的布局

1. 这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：

《创建了BFC的元素》

序号	元素
1	html根元素
2	浮动元素
3	固定定位、绝对定位元素
4	行块盒元素
5	overflow（溢出）不等于visible（可见）的块盒

2. 独立的

不同的BFC区域，它们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
具体规则：
–>创建了BFC的元素，它的自动高度需要计算浮动元素
–>创建了BFC的元素，它的边框盒不会与浮动元素重叠
–>创建了BFC的元素，不会和它的子元素进行外边距合并

11. 堆叠上下文

堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序

创建堆叠上下文的元素

html元素（根元素）
设置了z-index（非auto）数值的定位元素

同一个堆叠上下文中元素在Z轴上的排列

从后到前的排列顺序（屏幕离用户的距离）：

创建堆叠上下文的元素的背景和边框
堆叠级别为负值的堆叠上下文
常规流非定位的块盒
非定位的浮动盒子
常规流非定位行盒
任何z-index是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
堆叠级别为正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，它们之间不能互相穿插

12. 样式补充display：list-item

设置为该属性值得盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子
元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列

涉及的css：

list-style-type：
设置次盒子中内容的类型，此属性可以继承
list-style-position
设置次盒子相对于主盒子的位置

清空次盒子
list-style：none