CSS知识梳理

1.1 字体样式

font-style 设置字体样式

• normal：指定⽂本字体样式为正常的字体
• italic：指定⽂本字体样式为斜体。

.normal { font-style:normal } .italic { font-style:italic }

1.2 文本字体

font-family 属性设置⽂本的字体 font-family 属性应该设置⼏个字体名称作为⼀种"后备"机制，如果浏览器不⽀持第⼀种字体，他将尝试下 ⼀种字体

p { font-family:"Times New Roman", Times, serif; }

1.3 字体粗细

font-weight：定义字体粗细

• normal：正常的字体。相当于number为400
• bold：粗体。相当于number为700
• bolder：特粗体。也相当于strong和b标签的作⽤
• lighter：细体
• ：⽤数字表示⽂本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

p.normal { font-weight: normal; }

p.thick { font-weight: bold; }

p.thicker { font-weight: 900; }

1.4 字体⼤⼩

font-size：定义字体⼤⼩

• 把字体的尺⼨设置为不同的尺⼨。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large
• 相对于⽗对像中字体尺⼨进⾏相对调节。使⽤成⽐例的em单位计算。可选参数值：smaller | larger
• ⽤数值指定⽂字⼤⼩。不允许负值
• ⽤百分⽐指定⽂字⼤⼩。其百分⽐取值是基于⽗对象中字体的尺⼨。不允许负值

/* 设定段落⽂字⼤⼩为⾮常⼤ */

p { font-size: xx-large }

/* 设定⼀级标题的⽂字⼤⼩为2.5倍⼤⼩ */

h1 { font-size: 250% }

/* 设定span⾥的⽂字⼤⼩为16px */

span { font-size: 16px; }

.larger { font-size: larger; }

.point { font-size: 24em; }

.percent { font-size: 200%;}

1.5 字体行高

lin-height：设置行高

• normal：默认值。
• ：⽤⻓度值指定⾏⾼。可以为负值。
• ：⽤百分⽐指定⾏⾼，其百分⽐取值是基于字体的⾼度尺⼨。可以为负值。
• ：设置数字，此数字是当前的字体⼤⼩的倍数。

p { line-height: normal; }

p { line-height: 35px; }

p { line-height: 3em; }

p { line-height: 34%; }

1.6 综合设置

CSS字体属性font定义字体，加粗，⼤⼩，⽂字样式。 该属性是复合属性

font：<font-style> <font-weight> <font-size>/<line-height> <fon-family> p { font:20px/1.5 '微软雅⿊' } p { font:bold 20px/30px '微软雅⿊' }

2 引入外部字体

为了避免用户字体缺省，需要在服务器端设置好页面的字体样式，让网页以最佳方式进行展示 直接将下载好的字体复制到当前文件夹下（网站下载新字体） 想要使用外部字体，需要进行引入

<style type="text/css"> /* 第一步： 声明一个字体 */ @font-face { font-family: my-font;/*自定义名称*/ src: url('时尚中黑简体.ttf'); } @font-face { font-family: my-font2; src: url('迷你简双线体.ttf'); } /* 第二步： 使用字体 */ p { font:50px my-font,sans-serif; } div { font:50px my-font2,sans-serif; } </style> <p> 这是一个段落标签 </p>

1 CSS文本属性

1.1 文本缩进

text-indent 属性将⻚⾯上的段落的第⼀⾏进行缩进(首行缩进)，这是⼀种最常⽤的⽂本格式化效果。 取值：

• ：⽤⻓度值指定⽂本的缩进。可以为负值。
• ：⽤百分⽐指定⽂本的缩进。可以为负值。

p { text-indent:20px; }

p { text-indent:20%; }

1.2 文本对齐

text-align属性设置⽂本⽔平对⻬⽅式。 取值：

• left：内容左对⻬。

• center：内容居中对⻬。

• right：内容右对⻬。

• justify：内容两端对⻬，对最后⼀⾏⽆效

  注意：样式应用的最后一行文字不会生效（如果只有一行，那第一行同样是最后一行）

li-01 { text-align:left; }

li-02 { text-align:right; }

li-03 { text-align:center; }

li-04 { text-align:justify; }

1.3 文本修饰 

text-decoration 属性设置⽂本装饰线条的位置，综合属性 可以单独设置 text-decoration-line、 text-decoration-color 和 text-decoration-style 属性 text-decoration-line

• none  指定⽂字⽆装饰
• underline  指定⽂字的装饰是下划线
• overline  指定⽂字的装饰是上划线
• line-through  指定⽂字的装饰是贯穿线

注：还可以组合多个值，比如 underline 和 overline，在文本上下方同时显示线条 text-decoration-style

• solid  线条显示为单行
• double  线条显示为双线
• dotted  线条显示为点线
• dashed  线条显示为虚线
• wavy  线条显示为波浪线

.under { text-decoration: underline red; }

.over { text-decoration: wavy overline orange; }

.lineThough { text-decoration: line-through; }

.none { text-decoration: none; }

.under01 { text-decoration-line: overline underline; }

1.4 单词间距

word-spacing 属性设置英⽂单词之间的间距 取值：

• normal：默认间隔
• ：⽤⻓度值指定间隔。可以为负值

p { word-spacing:20px; }

1.5 文本间距

letter-spacing 属性设置字符之间的间距，适⽤于中英⽂⽂本 取值：

• normal：默认间隔
• ：⽤⻓度值指定间隔。可以为负值

p { letter-spacing:20px; }

1.6 ⽂本换⾏

1.6.1 word-wrap 让文字换行

word-wrap 属性设置⽂本内部⻓单词或URL换⾏ 取值：

• normal 默认值（浏览器保持默认处理）。
• break-word 在⻓单词或 URL 地址内部进⾏换⾏。

1.6.1 word-break

word-break 属性设置⾃动换⾏的处理⽅法 取值：

• normal 使⽤浏览器默认的换⾏规则。
• break-all 允许在单词内换⾏。
• keep-all 只能在半⻆空格或连字符处换⾏。

1.6.3  white-space 不允许文字换行

nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 < br >标签为止。

16.4 text-overflow  当文本溢出包含元素时剪切文字

ellipsis 显示省略符号来代表被修剪的文本。

<style> .box{ width: 300px; border: 1px solid #f00; white-space: nowrap; /*溢出隐藏*/ overflow: hidden; text-overflow: ellipsis; } </style> <div class="box"> 这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本 </div>

1.7 文本颜色

color 属性设置⽂本颜⾊ 取值：

• ：指定颜⾊

2 颜⾊⾊值

CSS颜⾊取值⽅式：

• ⼗六进制⾊
• RGB 颜⾊
• RGBA 颜⾊
• 预定义/跨浏览器颜⾊名

2.1 ⼗六进制⾊

⽬前所有浏览器都⽀持⼗六进制颜⾊ ⼗六进制颜⾊是这样规定的：#RRGGBB，其中的 RR（红⾊）、GG（绿⾊）、BB（蓝⾊）⼗六进制整数规定了颜⾊的成分。所有值必须介于 0 与 FF 之间 ⼗六进制颜⾊计数： 0 1 2 3 4 5 6 7 8 9 a(10) b(11) c(12) d(13) e(14) f(15) 组合⽽成

p { color: #f00; } div { color: #ff6700 }

2.2 RGB颜⾊

所有浏览器都⽀持RGB颜⾊ RGB 颜⾊值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue)定义颜⾊的强度，可以是介于 0 与 255 之间的整数，或者是百分⽐值（从 0% 到 100%）

p { color: rgb(255, 0, 0) }

2.3 RGBA颜⾊

RGBA 颜⾊值得到以下浏览器的⽀持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。 RGBA 颜⾊值是 RGB 颜⾊值的扩展，带有⼀个 alpha 通道 - 它规定了不透明度。 RGBA 颜⾊值是这样规定的：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

p { color: rgba(255, 0, 0, 0.5) }

2.4 预定义/跨浏览器颜⾊名

所有浏览器都⽀持颜⾊名 HTML 和 CSS 颜⾊规范中定义了 147 中颜⾊名（17 种标准颜⾊加 130 种其他颜⾊）。 17 种标准⾊是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。

p { color: red; }

2.5 文字阴影text-shadow【css3】

text-shadow 属性向文本设置阴影。

语法：text-shadow: x-shadow y-shadow blur color;

x-shadow	必需。水平阴影的位置。允许负值。
**y-shadow	必需。垂直阴影的位置。允许负值。
**blur	可选。模糊的距离。
**color	可选。阴影的颜色。

/* 单层阴影 */ p.info {     text-shadow: -5px -5px 3px black;     font-size: 50px; } /* 多层阴影 */ p {     text-shadow: 5px 5px 3px red,8px 8px 3px orange,11px 11px 3px yellow,14px 14px 3px green,17px 17px 3px yellowgreen,20px 20px 3px greenyellow,23px 23px 3px blue;     font-size: 50px; } /* 正阴影 */ div {     text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 40px #ff00de,0 0 70px #ff00de;     font-size: 50px; }

拓展2：多行/多行文本垂直居中

单行文本垂直居中

<style> .box{ width: 300px; height: 300px; border: 1px solid #f00; line-height: 300px; } </style> <div class='box'> 比如，当前热映《长清湖》超越了《你好，李焕英》票房 </div>

多行文本垂直居中

<style> .box{ width: 300px; height: 300px; border: 1px solid #f00; /* 将div修改为table单元格的特性 */ display: table-cell; /* 垂直居中 */ vertical-align: middle; } </style> <div class='box'> 比如，当前热映《长清湖》超越了《你好，李焕英》票房，这是很不容易的。要知道当初《你好，李焕英》不仅拥有天时（影院放开不久），还有人和。贾玲与刘德华互联网上频繁互动，为影片上映做好了预热，不大卖都难。 </div>

5.css伪类和伪元素

1.1 伪类

1.1.1 定义

伪类⽤于向某些选择器添加特殊的效果

1.1.2 超链接伪类

给a链接添加⼏种状态：

a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */

其他常⻅的伪类选择器 :focus :checked :first-child :last-child等

1.1.3 元素获取

伪元素不是真正的元素，不存在与⽂档之中，所以 js ⽆法对它进行操作。为什么叫他“元素”？因为我们可以对其进⾏跟元素⼏乎⽆差别的操作。

:first-child /* 第一个子元素 */ :last-child /* 最后一个子元素 */ :only-child /* 只有一个子元素 */ :root /* 根标签 */ :nth-child(n) /* 第几个子元素 */ ul li:nth-child(1){color:#f00;} /* 第一个子元素 - 从1开始 */ ul li:nth-child(2n){color:#f00;} /* 偶数行的子元素 - 2的倍数的所有元素 */ :nth-child(odd) /* 奇数元素 */ :nth-child(even) /* 偶数元素 */ :nth-last-child(-n+4) /* 后4个元素 */

1.2伪元素

1.2.2 first-letter首字母

first-letter 伪元素⽤于向⽂本的⾸字⺟设置特殊样式：

p::first-letter {color: red;}

其他常⻅的伪元素选择器

• ::first-line 首行
• ::first-letter 首字母
• ::before 元素前插入
• ::after  元素后插入

1.2.3 before与after的⽤法总结

before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。 当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置⾼宽度等属性需要首先设置为块元素。 content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content:' '; before与after的主要⽤途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以⽅便对伪元素定位。

a:hover::before, a:hover::after { position: absolute; } a:hover::before { content: "我是前"; left: -20px; } a:hover::after { content: "我是后"; right: -20px; }

1.3 伪类与伪元素区别

<style> li.first-item { color: orange } </style> <ul> <li class="first-item">我是第一个</li> <li>我是第二个</li> </ul>

如果想要给第一项添加样式，可以在为第一个

• 添加一个类，并在该类中定义对应样式

如果不用添加类的方法，我们可以通过给设置第一个

• 的:first-child伪类来为其添加样式。这个时候，被修饰的
• 元素依然处于文档树中。

<style> .first{ font-size:18px; } p::first-letter { font-size:18px; } </style> <p><span class="first">我</span>是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>

6.列表样式

1 列表样式

1.1 list-style

简写属性在⼀个声明中设置所有的列表属性。设置顺序：list-style-type, list-style-position, list-style-image。默认值为：disc outside none。

1.2 list-style的几个属性

list-style-type 设置列表标记样式

• 默认值: disc（实⼼圆）
• circle（空⼼圆）
• square（⽅形）
• decimal（0开头的数字标记）
• lower-roman（小写罗马数字）
• upper-roman（大写罗马数字）

list-style-position 设置在何处放置列表标记

• 默认值: outside
• inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。

list-style-image 设置使⽤图像来替换列表项的标记

• none 不指定图⽚，默认内容标记将被 list-style-type 代替
• url 使⽤绝对或相对地址指定列表项标记图⽚，如果图像地址⽆效，默认内容标记将被 list-style-type 代替

ul { list-style-type:square; list-style-position: inside; list-style-image:url(''); }

7.表格样式

1 表格样式

1.1 width

设置宽度

1.2 height

设置⾼度

1.3 border

设置边框粗细

1.4 border-collapse

collapse 设置表格的边框是否被折叠成一个单一的边框或隔开

1.5 text-align

⽔平⽅向对⻬⽅式，它的值： left | center | right

1.6 vertical-align

垂直⽅向对⻬⽅式，它的值：top | middle | bottom

<table width="" height="" bgcolor= "" border="" align= "" cellpadding="" cellspacing="" > <caption align= "" ></caption> <tr align="" valign= "" bgcolor= "" > <th></th> <th></th> </tr> <tr> <td rowspan="" colspan="" width="" height="" align=" left|center|right" valign= "top|middle|bottom" bgcolor="" ></td> <td></td> </tr> </table>

8.display和overflow

1 display

1.1 定义和属性

display 属性规定元素应该⽣成的框的类型

• none 不显示元素
• block 转换为块元素
• inline 转换为行内元素
• inline-block 转换为行内块元素
• table-cell 转换为table中的td格式，可以设置文字垂直方向的对其方式vertical-align: bottom;

1.2 用法

<style> p.inline { display:inline; } </style> <p class="inline"> 我是p标签我是p标签我是p标签我是p标签 </p> <p> 我是p标签我是p标签我是p标签我是p标签 </p>

2 overflow

2.1 定义和属性

overflow 属性规定当内容溢出元素框时发⽣的事情

• visible 不变
• hidden 超出隐藏
• scroll 滚动条显示内容
• auto 超出显示滚动条

2.2 用法

<style> div{ background-color:#00ffff; width:150px; height:150px; overflow: auto; } </style> <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p> <div> 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。 </div>

10.css盒模型和box-sizing

1 盒模型

1.1 CSS宽度（width）

1.1.1 定义

width 属性设置元素的宽度 说明：这个属性定义元素内容区的宽度，在内容区外⾯可以增加内边距、边框和外边距 取值：

• auto 元素实际宽度
• length 设置像素级px宽度
• % 基于父级元素的百分比宽度
• inherit 从父级元素继承宽度，也就是等于父级元素的宽度

1.1.2 用法

.auto { width:auto; } .length { width:200px; } .pct { width:100%; } .inherit { width:inherit; }

1.2 CSS高度（height）

1.2.1 定义

height属性设置元素的⾼度 注意：height属性不包括填充，边框，或边距 取值：

• auto 元素实际高度
• length 设置像素级px高度
• % 基于父级元素的百分比高度
• inherit 从父级元素继承高度，也就是等于父级元素的高度

1.2.2 用法

.auto { height:auto; } .length { height:200px; } .pct { height:100%; } .inherit { height:inherit; }

1.3 CSS内边距（padding ）

1.3.1 定义

padding 简写属性在⼀个声明中设置所有内边距属性

补充：

• 非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。比如一个段落的文本都在该元素本身之内，这个段落就是一个非替换元素。
• 替换元素：作为其他内容占位符的一个元素称为替换元素，根据标签和属性的值来显示内容的元素。比如img元素，它只是指向一个图像文件，这个文件插入到文档流中。大多数表单元素（input，根据type属性来显示内容）也是替换元素。

注意：不允许指定负边距值。

取值：

• auto 自动计算内边距
• length 设置像素级px内边距
• % 基于父级元素宽度的百分比的内边距
• inherit 从父级元素继承内边距

1.3.2 用法

p { /* 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px */ padding:10px 5px 15px 20px; /* 上内边距是 10px 右内边距和左内边距是 5px 下内边距是 15px */ padding:10px 5px 15px; /* 上内边距和下内边距是 10px 右内边距和左内边距是 5px */ padding:10px 5px; /* 4 个内边距都是 10px */ padding:10px; }

1.4 CSS外边距（margin）

1.4.1 定义

margin 简写属性在⼀个声明中设置所有外边距属性。该属性可以有 1 到 4 个值，与内边距相同 说明：这个简写属性设置⼀个元素所有外边距的宽度，或者设置各边上外边距的宽度。 块级元素的垂直相邻外边距会合并，⽽⾏内元素实际上不占上下外边距，⾏内元素的的左右外边距不会合并。同样，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使⽤时要⼩⼼。 注意：允许使⽤负值。

取值：

• auto 自动计算外边距
• length 设置像素级px外边距
• % 基于父级元素宽度的百分比的外边距
• inherit 从父级元素继承外边距

1.4.2 用法

p { /* 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px */ margin:10px 5px 15px 20px; /* 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px */ margin:10px 5px 15px; /* 上外边距和下外边距是 10px 右外边距和左外边距是 5px */ margin:10px 5px; /* 4 个外边距都是 10px */ margin:10px; }

1.5 CSS边框 （border）

1.5.1 定义

border 简写属性在⼀个声明设置所有的边框属性 可以按顺序设置如下属性：

• border-width
• border-style
  • solid 实线
  • dotted 点状线
  • double 双实线
  • dashed 虚线
• border-color

1.5.2 用法

/* 设置四条边框的样式 */ p { border:5px solid #ff0000; } /* 设置每⼀条边框的样式 */ p { border-top:10px solid red; border-left:20px dotted green; border-right:30px double orange; border-bottom:40px dashed red; } /* css画一个三角形 */ div { width:0; height:0; border:10px solid transparent; border-top-color:red; }

1.6 border-radius

border-radius 属性是一个简写属性，用于设置四个 border- *-radius 属性。

border-radius: 1-4 length|% / 1-4 length|%;

2 盒模型

2.1 定义

盒模型通过一个模型来描述元素在页面中占用的空间。

• W3C 标准模型 元素的设置宽度和设置高度指内容的宽度和高度
  • 元素总宽度=设置宽度+左填充+右填充+左边框+右边框+左边距+右边距
  • 元素总高度=设置高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
• IE模型 元素的设置宽度和设置高度包括内容的宽度和内边距以及边框宽高
  • 元素总宽度=设置宽度+左边距+右边距
  • 元素总高度=设置高度+上边距+下边距

2.2 box-sizing属性

box-sizing 属性允许您以特定的⽅式定义匹配某个区域的特定元素。 取值：

• content-box 指定盒模型为 W3C 标准模型，元素的宽度 = 设置宽度 + 边框宽度 + 内边距
• border-box 指定盒模型为 IE模型，元素的宽度 = 设置宽度 - 边框宽度 - 内边距
• inherit 从父元素继承 box-sizing 属性值

2.3 用法

/* 设置盒子模型为ie盒⼦模型 */ .container { box-sizing:border-box; } /* 设置盒子模型为标准盒⼦模型 */ .container { box-sizing:content-box; }

2.4 outline内边框

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

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width

<style> p { border: 1px solid #f00; outline: 1px solid green; } </style> <p>hello</p>

11.背景属性

1 背景属性（background）

1.1 定义

background 设置背景的显示方式，是一个间歇属性

设置顺序为：background-color background-image background-repeat background-attachment background-position

可以设置如下属性：

• background-color 背景颜色
• background-image 背景图片
• background-repeat 背景平铺方式
• background-attachment 背景图片固定方式
• background-position 背景图片位置
• background-size 背景图片尺寸
• background-origin 背景图片显示区域
• background-clip 背景显示区域
• inherit 继承父元素的背景属性样式

p { background: #ff0000 url() no-repeat fixed center; }

1.2 背景颜色（background-color）

background-color 属性设置元素的背景颜⾊

元素背景范围 background-color 属性为元素设置⼀种纯⾊。这种颜⾊会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景⾊。

取值：

• transparent 默认，透明背景
• color_name 颜色名称，比如red
• hex_number 十六进制颜色，比如#ff000
• rgb_number rgb色值，比如rgb(255,0,0)或者rgba(255,0,0,.2)
• inherit 继承父元素背景色

div { background-color: red; } h1 { background-color: #ff0000; } p { background-color: rgb(255, 0, 0); }

1.3 背景图片（background-image）

background-image 属性设置元素的背景图⽚，元素的背景占据了元素的全部尺⼨，包括内边距和边框，但不包括外边距。 默认，背景图像位于元素的左上⻆，并在⽔平和垂直⽅向上重复。

p { background-image:url("./img.jpg") }

1.4 背景平铺（background-repeat）

background-repeat 属性设置是否重复背景图像。 取值：

• repeat 默认值，⽔平垂直⽅向上平铺
• no-repeat 不平铺
• repeat-x ⽔平⽅向平铺
• repeat-y 垂直⽅向平铺

div { background-repeat:no-repeat; // 不平铺 } div { background-repeat:repeat; // 默认值，⽔平垂直⽅向上平铺 } div { background-repeat:repeat-x; // ⽔平⽅向平铺 } div { background-repeat:repeat-y; // 垂直⽅向平铺 }

1.5 背景图片固定（background-attachment）

background-attachment 属性设置背景图像是否固定或者随着⻚⾯的其余部分滚动。 取值：

• scroll 默认值。背景图像会随着⻚⾯其余部分的滚动⽽移动
• fixed 当页面的其余部分滚动时，背景图像不会滚动

div { background-image:url(""); background-repeat:no-repeat; background-attachment:fixed; } div { background-image:url(""); background-repeat:no-repeat; background-attachment:scroll; }

1.6 背景定位（background-position）

background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像的位置，背景图像如果要重复，将从这⼀点开始。 取值：

• 上下 左右 第一个位置定义上下的位置（top/center/bottom），第二个定义左右位置(left/center/right)，如果仅定义一个值，第二个值为 center
• x y 第一个值为水平位置，第二个为垂直位置，可以是百分比或者px，如果仅定义一个值，第二个值为50%

div { background-position: top left; } div { background-position: center; } div { background-position: 20% 60%; } div { background-position: 0 10px; } div { background-position: 50% 10px; }

1.7 背景图片尺寸（background-size）【CSS3】

background-size 属性规定背景图像的尺寸。 取值：

• length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
• percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
• cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
• contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

div { background-size:80px 60px; } div { background-size:50% 50%; } div { background-size:cover; } div { background-size:contain; }

1.8 背景图片显示区域（background-origin）【CSS3】

background-origin 属性规定 background-position 属性相对于什么位置来定位。 注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。 取值：

• padding-box 默认值，背景图像相对于内边距定位
• border-box 背景图像相对于边框定位
• content-box 背景图像相对于内容边框定位

div { background-origin:padding-box; } div { background-origin:border-box; } div { background-origin:content-box; }

1.9 背景显示区域（background-clip）【CSS3】

background-clip 属性规定背景的绘制区域。 取值：

• border-box 默认值，背景填充全部
• padding-box 背景填充不包括边框
• content-box 背景只填充内容部分

div { backgorund-color:red; background-origin:border-box; } div { backgorund-color:red; background-origin:padding-box; } div { backgorund-color:red; background-origin:content-box; }

2 雪碧图 /精灵图（CSS Sprites）

碧图就是将很多很多的小图标放在一张图片上,就称之为雪碧图 使用雪碧图的优势：

• 将多张图片合并到一张图片中，可以减小图片的总大小。
• 将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

Sprite Cow - Generate CSS for sprite sheets

<style> div{ width: 30px; height: 30px; border: 1px solid #f00; background: url('./淘宝雪碧图.png') no-repeat; } .box1{ background-position: 3px 3px; } .box2{ /* 通过背景图片定位，调整图片的位置 */ background-position: 3px -40px; } </style> </head> <body> <div class='box1'></div> <div class='box2'></div>

2.1  为什么使用雪碧图

网站开发90%会用到小图标， 多小图标调用显示是前端开发常见的问题，如果每个小图标都单独调用一张图片， 即意味着每个小图标的显示都产生一个HTTP请求；每个请求都需要一定的性能开销，主要在请求、以及响应阶段。为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是标签，而是CSS Sprite雪碧图。

2.2  什么样的图片适合拼成雪碧图

1. 静态图片，不随用户信息的变化而变化
2. 小图片，图片容量比较小（一些大图不建议拼成雪碧图）
3. 加载量比较大

3 iconfont阿里巴巴矢量图

除了iconfont阿里巴巴矢量图，还有其他的小图标Font Awesome 地址：iconfont-阿里巴巴矢量图标库 注册微博，git或者淘宝账号登陆

1.搜索要下载的图标（如：小米购物车）

将当前图标加入购物车

2.点击购物车下载对应的图片或者代码

图片可以直接使用，但是咱们使用的是代码

3.下载好的目录

下载好的代码中有三种引入方式：class类，symbol引入，unicode引用方式

class类： a. 兼容性良好，支持ie8+，及所有现代浏览器。 b. 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 c. 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。 d. 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

symbol引入： a. 支持多色图标了，不再受单色限制。 b. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 c. 兼容性较差，支持 ie9+,及现代浏览器。 d. 浏览器渲染svg的性能一般，还不如png。

unicode引用： a. 兼容性最好，支持ie6+，及所有现代浏览器。 b. 支持按字体的方式去动态调整图标大小，颜色等等。 c. 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色

各有各的优势，咱们使用的是class类的引入方式 css引入

<link rel="stylesheet" href="./iconfont.css">

html引入

<span class="iconfont icon-xxx"></span>

13.浮动

1.1 定义

float 属性定义元素向哪个⽅向浮动。之前这个属性应⽤于图像，使⽂本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会⽣成⼀个块级框，⽽不论它本身是何种元素。 取值：

• none 默认值，不浮动
• left 左浮动
• right 右浮动

1.2 用法

li { float:left; }

横向排列布局

<style> div{ width: 100px; height: 100px; float: left; } .one{ background-color: red; } .two{ background-color: green; } .thr{ background-color: blue; } </style> <div class="one"></div> <div class="two"></div> <div class="thr"></div>

1.3 特性

• 浮动元素会去找离它最近的有浮动的元素进⾏贴边
• 假如在⼀⾏之上只有极少的空间可供浮动元素，那么这个元素会跳⾄下⼀⾏
• 右浮动会颠倒盒⼦顺序
• ⾏内元素设置了浮动后，默认已转为块级元素，可以直接设置宽⾼，⽆需转换
• 块级元素，如果没有设置宽⾼，浮动后， 会收缩到内容的⼤⼩
• 浮动元素会脱离⽂档流，会压住下⼀个块元素，但不会压住其内容

<style> /* 特性1 特性2 */ .box{ width:500px; } .box-item{ float:left; width:200px; height:200px; border:2px solid red; } /* 特性3 */ .box-item{ float:right; width:200px; height:200px; border:2px solid red; } /* 特性4 */ .box-span{ float:right; width:200px; height:200px; border:2px solid red; } /* 特性5 */ .box-div{ float:left; } </style> <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> <span class="box-span">5</div> <div class="box-div">6</div> </div>

1.4 清除浮动

1.4.1 父元素高度塌陷

⼦元素浮动，⽗元素没有设置⾼度，会出现⾼度撑不开的现象，称之为⽗元素⾼度塌陷

<style> .box { width:500px; border:2px solid black; } .box-item { float:left; width:200px; height:200px; border:2px solid red; } </style> <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> </div>

1.4.2 清浮动本质

元素浮动后会出现相对应的⻚⾯布局问题，清除浮动的本质是解决元素浮动后造成的⻚⾯布局的问题

1.4.3 常见的清除浮动方式

• 加额外标签 浮动元素后⾯加⼀个空标签，设置样式 clear:both;，左右两侧均不允许浮动元素
• 定⾼法 给浮动元素的⽗元素设置⾼度⼤于或等于最⾼的浮动元素的⾼度，⽤于⼩板块，⾼度可以写死的部分
• ⽗元素添加 overflow:hidden 属性 利⽤ overflow:hidden 清除浮动时，⽗元素⾥⾯不能有定位超出的元素，如果有，超出的部分会被隐藏
• 利⽤after伪元素清除浮动

注意： 项目中我们常⽤after伪元素清除浮动，因为它不会额外增加标签，⽽且不会出现因为⽤overflow:hidden超出的部分会被隐藏，⽗元素⾼度也不⽤写死，我们只要在⻚⾯写⼀次清浮动的代码，在需要清浮动的位置加上 clearfix 类名就可以了

1.4.4 清除浮动注意事项

• 同级的元素，要么全部浮动，要么全部不浮动
• ⼦元素浮动，⽗元素去清除浮动，如果⽗元素也浮动，寻找距离最近的没有浮动的祖先元素去做清除浮动的操作
• ⽗元素有绝对定位的不需要清除浮动

 14.定位

 定位属性（position）

1.1 定义

position 属性指定了元素的定位类型。 取值：

• static 静态定位【默认值】
• relative 相对定位
• absolute 绝对定位
• fixed 固定定位
• sticky 粘性定位

1.1.1 static 定位

HTML 元素的默认值，即没有定位，遵循正常的⽂档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。

.static { position:static; background-color:red; }

1.1.2 relative 定位

相对定位元素的定位是相对自身的正常位置。 移动相对定位元素，但它原本所占的空间不会改变。 相对定位元素经常被⽤来作为绝对定位元素的容器块。

.relative { position:relative; }

1.1.3 absolute 定位

绝对定位的元素的位置相对于最近的已定位⽗元素，如果元素没有已定位的⽗元素，那么它的位置相对于文档定位。 absolute 定位使元素的位置与⽂档流⽆关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

.absolute { position:absolute; left:20px; top:20px; }

1.1.4 fixed 定位

元素的位置相对于浏览器窗⼝是固定位置。 即使窗⼝是滚动的它也不会移动。

.fixed { position:fixed; left:20px; top:20px; }

1.1.5 sticky 定位

• 基于⽤户的滚动位置来定位
• 在未滚动出目标区域时，类似 position:relative;
• 当⻚⾯滚动超出⽬标区域时，类似 position:fixed;，它会固定在⽬标位置。
• 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位

这个特定阈值指的是 top, right, bottom 或 left 之⼀，换⾔之，指定 top, right, bottom 或 left 四个阈值其中之⼀，才可使粘性定位⽣效。否则其⾏为与相对定位相同。 注意: Internet Explorer, Edge 15 及更早 IE 版本不⽀持 sticky 定位。 Safari 需要使⽤ -webkit- prefix。

.sticky{ position:-webkit-sticky; position:sticky; top:0; background-color:red; border:2px solid orange; }

1.2 堆叠的元素

• 元素的定位与⽂档流⽆关，所以它们可以覆盖⻚⾯上的其它元素
• z-index属性指定了⼀个元素的堆叠顺序（哪个元素应该放在前⾯，或后⾯）
• ⼀个元素可以有正数或负数的堆叠顺序

具有更⾼堆叠顺序的元素总是在较低的堆叠顺序元素的前⾯。 注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前⾯。

.zindex { position:absolute; left:0; top:0; z-index:-1; }

1.3 position 难点分析

1.3.1 绝对定位vs相对定位

• 绝对定位就像把不同元素安排到了⼀栋楼的不同楼层，文本流在首层，互不影响
• 相对定位在首层，与文本流在同一层，互相影响
• 绝对定位元素不占据空间，设置绝对定位后，元素浮起来，在文档流中位置被删除，可以被其他元素占据
• 相对定位也让元素浮起来，但是它本身位置不会被删除，也不会被占据
• 通过z-index来设置堆叠的顺序

1.3.2 层级问题

总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。 定位高于浮动，浮动高于标准流。（高低和占不占位置无关） 给定 z-index 的值为层级的值。（不给默认为0）

• 层级为 0 的盒子，也比标准流和浮动高
• 层级为负数的盒子，比标准流和浮动低
• 层级不取小数
• 层级一样，后面的盒子比前面的层级高
• 浮动或者标准流的盒子，后面的盒子比前面的层级高
• abselute是不占位置的，relative是站位的。而层级的高低，是和占不占位置没有关系的。

19.隐藏元素的6种方式

1. 使用透明度

语法：opacity:0 注意：元素消失，但是还会占据空间

<style> .box{ width: 100px; height: 100px; background-color: aquamarine; opacity: 0; } </style> <div class="box"></div>

2.使用display

语法：display:none 注意：元素消失，不会占据空间

<style> .box{ width: 100px; height: 100px; background-color: aquamarine; display:none; } </style> <div class="box"></div>

3.使用 scale 缩放

语法：transform:scale(0) 注意：元素消失，但是还会占据空间

<style> .box{ width: 100px; height: 100px; background-color: aquamarine; transform:scale(0) } </style> <div class="box"></div>

4.使用visibility

语法：visibility:hidden 隐藏 / visible显示 注意： 元素消失，但是还会占据空间

<style> .box{ width: 100px; height: 100px; background-color: aquamarine; visibility:hidden; } </style> <div class="box"></div>

5.使用宽高和overflow

语法：width:0;overflow:hidden; 注意： 元素消失，但是还会占据空间

<style> .box{ width: 0px; height: 0px; background-color: aquamarine; overflow:hidden; visibility:hidden; } </style> <div class="box"></div>

6.使用position定位

语法：position:absolute; top:-当前元素的高度；left：-当前元素的高度 注意： 元素消失，不会占据空间

<style> .box{ width: 100px; height: 100px; background-color: aquamarine; position:absolute; top:-100px; left:-100px; } </style> <div class="box"></div>

20.光标属性

1 光标属性

cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。

属性名	效果
crosshair	精确定位“十”字形；
pointer	“小手”形状
text	文本“I”形；
wait	等待，“沙漏”形；
default	默认指针；
help	帮助，带尾箭头
auto	鼠标按照默认的状态根据页面上的元素自行改变样式

<style> .one{ width: 100px; height: 100px; background-color: green; float: left; } .one:hover{ cursor: pointer; } </style> <div class="one">one</div>