CSS笔记
文章目录
HTML
CSS
JavaScript基础
JavaScript(高级)DOM
React
CSS简介（了解即可）
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
——百度百科
一、（1）构成
/*
给谁更改样式 {改什么样式}
*/
p{
color: red; //键值对
font-size: 200px;
}
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。
- 样式写到
<head>与<head>之间，并且用<style></style>括起来，还可以单独文件(具体看第四章) - 理论上
<style></style>可以放到任何地方，通俗约定放在head里 - 选择器是用于指定CSS样式的HTMl标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文“”分开
- 多个“键值对”之间用英文“;”结尾
（2）代码风格
略 想看的点击
(3)选择器
选择器分为基础选择器和复合选择器两大类
基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
二、基础选择器
标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指绽定统一的CSS样式。
作用:标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。
优点:能快速为页面中同类型的标签统一设置样式。
不能设计差异化样式，只能选择全部的当前标签
标签名 {
属性1: 属性值;
属性2: 属性值;
属性3: 属性值;
...
}
类选择器
.red {
color: red;
}
<ul>
<li class="red">标签</li>
<li>web标准</li>
</ul>
不能用标签做类名
可以用短横线 - 命名
不要用纯数字，中文等命名
多类名
.setred {
color: red;
}
.font-size {
font-size: 40px;
}
<h1 class="setred font-size">红色，40像素字体大小</h1>//类与类之间空格空开即可
id选择器
#id名 {
属性1: 属性值;
属性2: 属性值;
属性3: 属性值;
...
}
与类的区别：样式是通过#来定义的，结构通过id调用，只能调用1次，别人无法使用！
id经常与JavaScript搭配使用
通配符选择器
选取页面中所有的元素（标签）
* {
color: red;
}
三、文本属性
font-family: '字体名(尽量用英文名)';
font-size: 40px;
font-weight: bold; //(normal 、 bold 、 bolder 、 lighter 、 number)
font-style: italic; // 设置字体样式(倾斜)
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体: body {font-family. ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’;}
字体大小设置
- px（像素)大小是我们网页的最常用的单位，谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小可以给
- body指定整个页面文字的大小
字体粗细设置
实际开发中，提倡使用数字，表示加粗或者变细
font-weight后的参数，不要加px
字体样式
平时我们很少给文字加斜体，反而要给斜体标签( em , i)改为不倾斜字体。
字体复合属性
这种方式比较难级，大家斟酌使用！
body{
font: font-style font-weight font-size/line-height font-family;
}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用
关于颜色
| 表示 | 属性值 |
|---|---|
| 预定义的颜值 | red 、green、blue 、 pink |
| 十六进制 | #FF0000 、 #FF6600、#29D794 |
| RGB代码 | rgb(83, 23, 23) |
对齐文本
text-align属性用于设置元素内文本的对齐方式
| 属性值 | 解释 |
|---|---|
| center | 水平居中对齐 |
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
记住如何添加下划线和删除下划线，其余了解即可
| 属性值 | 描述 |
|---|---|
| none | 默认 ，没有装饰线 |
| underline | 下划线，<a>自带下划线(常用) |
| overline | 上划线(几乎不用) |
| line-through | 删除线(不常用) |
文本缩进
text-indent
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
文本缩进属性用来指定文本的第一行的缩进，通常是将段落的首行缩进.
p {
text-indent: 2em; //也可以是px像素的单位，em是两个文字的距离
}
行间距
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.
行距并不改变文字的高度，而是改变上间距和下间距的高度，默认的行间距为16px（也就是文字的高度）
行间距 = 上间距+下间距+文本高度
p {
text-indent: 2em;
line-height: 60px;
}
四、CSS引入方式
按照CSS样式书写的位置（或者引入的方式)，CSS样式表可以分为三大类:
1．行内样式表(行内式)
2．内部样式表(嵌入式)
3．外部样式表（链接式)
内部样式表（内嵌样式表）
之前用的都是内部样式表，所以具体用法这里不再阐述
内部样式表（内嵌样式表）是写到html页面内部.是将所有的CSS代码抽取出来，单独放到一个<style>标签中。<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有实现结构与样式完全分离
行内样式表
不好用，行内写容易被打
外部样式(最常用)
实际开发都是外部样式表.适合于样式比较多的情况.核心是：样式单独写到CSS文件中，之后把CSS到HTML页面中使用.
第一步 ： 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
第二部 ： 在HTML页面中，使用标签引入这个文件。
其中属性 rel 作用是 ：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"”，表示被链接的文档是一个样式表css文件。
href 的 作 用 是 定义所链接外部样式表文件的路径，可以是相对路径，也可以是绝对路径。
五、Emment语法
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。
快速生成HTML结构语法
1．生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成<div></div>
2．如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div
3．如果有父子级关系的标签，可以用>比如ul> li就可以了
4．如果有兄弟关系的标签，用＋就可以了比如div+p
5．如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了
6.约束标签并创建带类名的标签或带id的标签
7 ．如果生成的div类名是有顺序的，可以用自增符号$
8.如果想要在生成的标签内部写内容可以用{}表示
语法中不能有空格，要不然生成不了
快速生成CSS样式语法
CSS基本采取简写形式即可.
1． 比如 w200按tab 可以生成 width: 200px;
2．比如lh26按tab 可以生成line-height: 26px;
快速格式化代码
Ctrl+Alt+F
设置自动保存时，格式化代码 Ctrl+S即可格式化
没有的就别挣扎了，手动格式化也挺方便的
六、复合选择器
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括∶后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器(重要)
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
元素1 元素2 {
样式...
}
元素1和元素2中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙了等，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器
子选择器(重要)
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
(亲儿子选择器)
元素 > 元素2 {
样式声明
}
<div>
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
并集选择器(重要)
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分
div,
p,
.pig h1 {
color: pink;
}
<div>
<h1>啦啦啦</h1>
</div>
<p>我是段落</p>
<p>我是段落2</p>
<div class="pig">
<h1>我是粉色</h1>
</div>
并集选择器竖着写
链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示，比如:hover .:first-child。
| 选择器 | 功能 |
|---|---|
| a:link | 选择所有未被访问的链接 |
| a:visited | 选择所有已被访问的链接 |
| a:hover | 选择鼠标指针位于其上的链接 |
| a:active | 选择活动链接 |
链接伪类注意
1.为了确保生效，请按照LVHA的循顺序声明:link - :visited - :hover - :active。
2.记忆法:love hate或者lv包包hao 。
3.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体 | 较多 | 符号是逗号.nav,header |
| 链接伪类选择 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}(设置a标签的css样式)和a:hover实际开发中的写法 |
| :focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus记住这个写法 |
七、元素显示模式
什么是显示模式?
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
HTML元素一般分为块元素和行内元素两种类型。
块元素
- 常见的块元素有
<h1>~<h6>、<p>、<div>、<u>、<ol>、<li>等，其中标签是最典型的块元素。 - 比较霸道，自己独占一行。
- 高度，宽度、外边距以及内边距都可以控制。宽度默认是容器(父级宽度)的100%。
- 是一个容器及盒子，里面可以放行行内元素或者行内块级元素（下面会说）。
注意文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点︰
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
链接内不能再放链接
特殊情况：链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全(下面会讲)
行内块元素（特殊）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
特点:
1、和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
2、默认宽度就是它本身内容的宽度（行内元素特点)。
3、高度，行高、外边距以及内边距都可以控制(块级元素特点）。
元素显示模式转换(灰常常用)
特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性比如想要增加链接<a>的触发范围。
行内转块级
行内元素转换为块元素display:block;
放到css里，即可将行内元素转换为块级元素
块级转行内
display:inline;
块级转行内块
display:inline-block;
八、背景属性
背景颜色
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
background-color: 颜色或transparent（透明）;
背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置.(精灵图也是一种运用场景)
background-image:url(路径);
背景平铺
background-repeat:repeat|no-repeat|repeat-x|repeat-y
平铺、不平铺，沿着x轴平铺，沿着y轴平铺
默认情况下，背景是平铺的
背景位置
background-position属性改变图片在背景的位置
| 参数值 | 说明 |
|---|---|
| length | 百分数 ； 由浮点数字和单位标识符组成的长度值 |
| position | top、 center 、 bottom 、 left 、 center 、 right 方位名词 |
.imge {
width: 500px;
height: 5000px;
background-image: url(/image/xin.png);
background-repeat: no-repeat;
background-color: rgb(156, 153, 153);
background-position: top right; /*背景图片调整位置*/
}
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
精确单位
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。
- background-position: 20px 50px；
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
background-position: left 30px;
背景图像固定（背景附着）
background-attachment
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随着对象内容而滚动 |
| fixed | 背景图像固定 |
复合写法
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: rgb(255, 255, 255) no-repeat
url(/image/xin.png) fixed 20px 200px;
背景颜色半透明
background: rgba(红,绿,蓝,透明度);
- 最后一个参数是alpha透明度，取值范围在0~1之间
- 我们习惯把0.3的0省略掉，写为background: rgba(0,0,0,.3);
- 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
九、CSS三大特性
层叠性
继承性
优先级
权重叠加
十、盒子模型
所谓盒子模型∶就是把HIML火Thu日1-i内知t,边好外边距、内边距、和实际内容
CSS,盒子模型本质上是一个盒子，封装周围的HTML元素，它包括:边框、外边距、内边距、和实际内容
边框
border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
语法：border：border-width || border-style || border-color
复合写法
border: 1px solid red;
边框分开写法
border-top: 1px solid red;
处理边框的粗细问题
问题：两边框之间重叠，需要使用合并
html中提到的cellspacing属性（设置单元格间距【写在html标签中】，当该属性的值为0时，表格边框的厚度为两个重叠的厚度1+1=2px）
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
/*合并相邻的边框*/
border-collapse: collapse;
边框影响实际盒子的大小
设置边框后，会影响实际的盒子的长宽。
内边距
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
- 复合写法
padding： 上下左右；
padding：上下、左右；
padding：上、左右、下；
padding： 上、右、下、左；
内边距也会影响盒子的实际大小
内边距添加，不影响盒子大小的情况：如何盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小.作用：当父标签定义了长宽，那么子标签不用设置长宽但设置padding的值，可以不影响盒子大小
外边距
margin-bottom: xxpx;
写法与内边距相同
外边距设置盒子的居中对齐
前提是:
- 盒子必须置顶了宽度
- 必须是块级元素
- 盒子左右的外边距都设置了auto
margin:0 auto;
问题又来了，那行内元素和行内块元素怎么居中呢？
行内元素或者行内块元素水平居中给其父元素增加text-align:center即可
外边距合并问题
- 相邻块元素垂直外边距合并
外边距合并问题只出现在垂直排列上，左右不会有这种问题
块元素垂直之间的外边距取最大的一个，并不是相加的值
解决：给一个盒子添加外边距即可，不傻！ - 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加overflow:hidden。(这种方法最好，不会吧盒子变大)
解决的原理后面还会涉及，请继续往下看
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
padding: 0px;
margin: 0px;
}
/*这段代码一般在css样式内第一行便写*/
行内元素尽量只设置左右的内外边距，顾及兼容性，很多浏览器设置了上下的内外边距也不显示不起作用(必须要设置的话，可以转换为块级元素和行内块元素)
十一、让你的网页更好看
li标签取消前面的符号
list-style: none;
圆角边框
border-radius: length;
radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
原理：用户定义的长度length，取一个同长度的圆，对齐对角的两个边
参数值：
可以是具体参数（px）也可以是百分比
可以跟四个值，分别代表左上角、右上角、右下角、左下角
两个值时，左上右下、右上左下
100%时，就是一个圆
盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow（参数挺多，等我细细道来）
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
| inset | 可选。将外部阴影(outset)改为内部阴影。(outset不能出现在参数中，默认就是outset) |
盒子阴影不影响盒子大小
文字阴影(了解即可)
text-shadow
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
十二、浮动
传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置.
CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)∶
-
普通流（标准流)
标签按照规定好的默认方式排列
之前学的那些都是，利用元素排列，从上往下，按照块级、行级、行内块的标准 -
浮动
后面讲 -
定位
后面讲
为什么需要浮动
- 多个块级盒子(div)水平排列成一行（不转换成行内块元素）
- 转换的行内块，元素间会有缝隙（较难控制）
-两个盒子左右排列(最左一个，最右一个)
浮动可以改变默认的排列方式
标准流管理垂直排列 浮动布局管理水平排列
什么是浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。（p话，继续往下看）
语法:
float: 属性值;
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动的特性(重要)
1．浮动元素会脱离标准流(脱标)
脱离标准普通流的控制(浮）移动到指定位置（动)，(俗称脱标)
浮动的盒子不再保留原先的位置,所以标准流的元素可以与浮动的盒子重叠
2．浮动的元素会在一行内显示并且元素顶部对齐
除非显示不开，会换行显示
不管长宽都会沿着上沿对齐
浮动的元素互相贴靠在一起（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐.
3．浮动的元素会具有行内块元素的特性
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
如果行内元素有了浮动,则不需要转换块级或行内块元素就可以直接给高度和宽度
4. 常用的布局策略
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧.
浮动布局的注意点
1.浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
浮动清除
为什么要清除浮动？
因为很多时候，父盒子不能够给他一个高，比如一些商品列表，随时都有增加，还有新闻这类的，需要自动的填充高度才可以。
所以这时候需要清除浮动
清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
清除浮动语法
选择器 {
clear：属性值;
}
| 属性值 | 说明 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响(一般用这个) |
清除浮动 —— 额外标签法（不常用）
额外标签法也称为隔墙法，是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=" clearboth”></div>，或者其他标签(如<br />等）。
● 优点︰通俗易懂，书写方便
● 缺点︰添加许多无意义的标签，结构化较差
<style>
.box { background-color: #908e8e; }
.box1 { width: 200px;
height: 100px;
background-color: blue;
float: left;
margin-left: 20px; }
.clear { clear: both; } /*清除浮动*/
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<!-- 这个标签必须是块级元素，否则不行 -->
<div class="clear"></div>
</div>
</body>
清除浮动 —— 父级添加overflow
这里还是不讲overflow的实现原理，等后面再讲
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll 。子不教,父之过,注意是给父元素添加代码
● 优点︰代码简洁
● 缺点∶无法显示溢出的部分
一般使用overflow的hidden属性来清除浮动
给父盒子添加！给父盒子添加！给父盒子添加！
重要的事情说三遍!
清除浮动 —— :after 伪元素法
:after方式是额外标签法的升级版。也是给父元素添加给父元素添加给父元素添加！！！
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;)
.clearfix {
/*兼容 IE6、7*/
*zoom: 1;
这串代码先会写即可，后面会讲具体实现的原理（伪元素）
clearfix是类名，可以根据实际随意写
● 优点∶没有增加标签，结构更简单
● 缺点∶照顾低版本浏览器
清除浮动 —— 双伪元素清除浮动
也是给父元素添加给父元素添加给父元素添加！！！
.clearfix:before，
.clearfix:after {
content : "";
display:table;
}
.clearfix:after {
clear:both;
)
.clearfix {
/*兼容 IE6、7*/
*zoom: 1;
}
优点︰代码更简洁，更好理解
缺点∶照顾低版本浏览器
clearfix是类名，可以根据实际随意写
PS切图
常见的图片格式
这里只介绍比较常用的，想要深究的可以去看下面的链接
详情
- jpg图像格式︰JPEG ( JPG )对色彩的信息保留较好，高清，颜色较多，
我们产品类的图片经常用jpg格式的 - gif图像格式:GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景
和动画效果,实际经常用于一些图片小动画效果 - png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景.
如果想要切成背景透明的图片,请选择png格式.
4． PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿.对我们前端人员来说,最大的优点我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.
切图
PS有很多切图的方式：图层切图、切片切图、PS插件切图等等.
PS可以去B站找点视频教程学习一下，这里主要是讲CSS，不做PS的教程.
图层切图
选中图层需要切的图层（可能是多个） ——> 右键图层 ——> 快速导出PNG
切片切图
第一步：选中图片
第二步：导出图片
插件切图
Cutterman是一款运行在Photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工"导出web所用格式"以及使用切片工具进行挨个切图的繁琐流程。
Cutterman下载链接
Cutterman插件要求你的PS必须是完整版，不能是绿色版，所以大家需要安装完整版本。
这里能够使用，不是灰色的就可以用
无脑安装即可
安装完成后，重新打开PS
注册
登录即可
属性书写顺序
建议遵循以下顺序︰
- 1.布局定位属性: display / position/ float / clear / visibility / overflow(建议display第一个写，毕竟关系到模式)
- 2.自身属性: width / height / margin / padding / border / background
- 3.文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 4.其他属性(CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow / backgroundlinear-gradient…
十三、定位
最近有点忙，这里写的不太详细，等后期补。
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative相对定位 | 否(占有位置) | 相对于自身位置移 | 常用 |
| absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
| fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段少 |
叠放次序
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
选择器 {
z-index: 1;
}
拓展
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。left: 50%;:让盒子的左侧移动到父级元素的水平中心位置。
margin-left:-100px;:让盒子向左移动自身宽度的一半。
定位的特殊性
绝对定位和固定定位也和浮动类似.
1．行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2．块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
绝对定位（固定定位)会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
显示与隐藏(display)
display属性用于设置一个元素应如何显示。
display:none ;隐藏对象
display : block;除了转换为块级元素之外，同时还有显示元素的意思display隐藏元素后，不再占有原来的位置。
后面应用及其广泛，搭配JS可以做很多的网页特效。
visibility显示隐藏元素
visibility属性用于指定一个元素应可见还是隐藏。
visibility : visible;元素可视
visibility : hidden;元素隐藏
visibility隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来位置，就用visibility : hidden
如果隐藏元素不想要原来位置，就用display : none(用处更多重点)
overflow 溢出
终于要讲了。哈哈！！!
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超不超出内容，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分。
十四、定位
position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。
position 属性
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值：
static
relative
fixed
absolute
sticky
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。
position: static;
HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
这个
这是所用的 CSS：
实例
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
这个
这是所用的 CSS：
实例
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
十五、精灵图
十六、字体图标
字体图标使用场景∶:主要用于显示网页中通用、常用的一些小图标
精灵图是有诸多优点的，但是缺点很明显。
1．图片文件还是比较大的。
2．图片本身放大和缩小会失真。
3．一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont.
展示的是图标，本质属于字体。
轻量级︰一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性:本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
图标下载
icomoon
阿里图标库
图标引入
@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?aklfae’);
src: url(‘fonts/icomoon.eot?aklfae#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?aklfae’) format(‘truetype’),
url(‘fonts/icomoon.woff?aklfae’) format(‘woff’),
url(‘fonts/icomoon.svg?aklfae#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;
}
复制到css样式里
复制这个图标，这个图标就是那个字体图标
复制到标签里
在选择器内，更改字体名
成功显示
图标追加
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selectionjson 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。
2385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
