CSS

daiweishuai

CSS

CSS引入方式（四种）

内部样式表(嵌入式)

将CSS样式表放到head中用<style>标签包裹起来

基本语法格式如下：

<head>
    ...
    <style type="text/css">
        ...此处写CSS样式
    </style>
</head>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

type="text/css" 在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

外部样式表（外链式）

链接式引入：将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。链接式会以网页文件主体装载前装载CSS文件。

其基本语法格式如下：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

注意： link 是个单标签!

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

导入方式

导入式：将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。导入式会在整个网页装载完后再装载CSS文件。

<head>
    ...
    <style type="text/css">
        @import "My.css"; 此处注意.css文件的路径
    </style>
</head>

三种样式表总结（位置）

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

CSS基础选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名

其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器最大的优势是可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。

小技巧：
1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器。浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的) 能良好区分JavaScript变量命名(js变量命名是用“_”) 3.不要纯数字、中文等命名，尽量使用英文字母来表示。

命名规范：见附件（Web前端开发规范手册.doc）

命名是我们通俗约定的，但是没有规定必须用这些常用的命名。

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：
样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

id选择器

id选择器使用“#”进行标识，后面紧跟id名

其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜

id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

id选择器和类选择器最大的不同在于使用次数上。

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

方案一：你可以使用英文来替代。比如 font-family:"Microsoft Yahei"。

方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。 font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。

可以通过escape() 来测试属于什么字体。

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
注意:他们的顺序尽量不要颠倒按照 lvha 的顺序。 love hate 爱上了讨厌记忆法或者 lv 包包非常 hao

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

块级元素和行内元素区别

块级元素的特点：（1）总是从新行开始（2）高度，行高、外边距以及内边距都可以控制。（3）宽度默认是容器的100% （4）可以容纳内联元素和其他块元素。

行内元素的特点：（1）和相邻行内元素在一行上。（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。（3）默认宽度就是它本身内容的宽度。（4）行内元素只能容纳文本或则其他行内元素。

行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。（2）默认宽度就是它本身内容的宽度。（3）高度，行高、外边距以及内边距都可以控制。

行高的测量

行高我们利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐。

做法就是：文字的行高等于盒子的高度。

这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。

上距离和下距离总是相等的，因此文字看上去是垂直居中的。

如果行高等 height 高度文字会垂直居中

如果行高大于高度文字会偏下

如果行高小于高度文字会偏上

例子:

<style>
    * {
        padding: 0;
        margin: 0;
    }
    div {

        height: 200px;
        font-size: 16px;
        line-height: 0px;
        background-color: pink;
    }
    /*  为什么当行高变成0的时候，文字会落在上边框一半位置？
    行高:基线和基线的距离
    行间距=行高-字体大小
    行间距=(line-height)-(font-size)
    当字体大小为16px,行高也为16px时,
    行间距=16px-16px=0px,上下两行紧挨

    当字体大小为16px,行高为0px时,
    行间距=0px-16px=-16px,第一行文字是以盒子上边框为第一行的上一行的基线,
    第一行文字的上一行是虚拟的,假如有一行,上边框是这个虚拟行的基线.
    行间距为0,第一行和它的上一行基线0距离,也就是两行文字重叠.从整体看起来,所有行都在向上移动.
    */
</style>
</head>
<body>
    <div>行高的小例子 how old are you<br />
        行高变成0的时候 my english is good<br />
        测试 my english is good</div>

</body>

CSS 三大特性

层叠继承优先级是我们学习CSS 必须掌握的三个特性。

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。就近原则

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下：

specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值重要的	∞ 无穷大

权重是可以叠加的

比如的例子：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

注意：

1.数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

继承的权重是 0

总结优先级：

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。
同一类选择器则遵循就近原则。

总结：权重是优先级的算法，层叠是优先级的表现

盒子模型（CSS重点）

CSS三大模块：盒子模型、浮动、定位，其余的都是细节。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子模型（Box Model）

这里略过老旧的ie盒子模型（IE6以下）

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

表格的细线边框

以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。

table{ border-collapse:collapse; } collapse 单词是合并的意思

border-collapse:collapse; 表示相邻边框合并在一起。

外边距实现盒子水平居中

可以让一个盒子实现水平居中，需要满足以下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

图片和背景区别

插入图片我们用的最多比如产品展示类
背景图片我们一般用于小图标背景或者超大背景图片

section img {
    width: 200px;/* 插入图片更改大小 width 和 height */
    height: 210px;
    margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
    margin-left: 50px; /* 插入当图片也是一个盒子 */
}

aside {
    width: 400px;
    height: 400px;
    border: 1px solid purple;
    background: #fff url(images/sun.jpg) no-repeat;

    background-size: 200px 210px; /*  背景图片更改大小只能用 background-size */
    background-position: 30px 50px; /* 背景图片更该位置 我用 background-position */
}

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意：行内元素是只有左右外边距的，是没有上下外边距的。内边距，在ie6等低版本浏览器也会有问题。

我们尽量不要给行内元素指定上下的内外边距就好了。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：避免就好了。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子会和父亲一样宽占满父亲的宽度，如果此盒子没有给定宽度则padding 不会影响本盒子大小。

清除浮动

为什么要清除浮动

我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现，但是，你不能说浮动不好

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是清除浮动后造成的影响

清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

清除浮动的方法

其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:both;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

额外标签法

额外标签法是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签

例如

<div style="clear:both"></div>，或者其他标签br等亦可。

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果。

可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

:after 方式为额外标签法的升级版，好处是不用单独加标签了

使用方法：

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点：符合闭合浮动思想结构语义化正确

缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站：百度、淘宝网、网易等

注意： content:"" 尽量不带点

使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
    content:"";
    display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

定位(position)

background-position 背景定位

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

去除图片底侧空白缝隙

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

解决的方法就是：

给img vertical-align:middle | top等等。让图片不要和基线对齐。
给img 添加 display：block; 转换为块级元素就不会存在问题了。

web字体

字体格式

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

1、TureType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2、OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

3、Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

4、Embedded Open Type(.eot)格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

5、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。

字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被重新"宠幸" 这就是字体图标（iconfont).

字体图标优点

可以做出跟图片一样可以做的事情,改变透明度、旋转度等但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小，但携带的信息并没有削减。几乎支持所有的浏览器移动端设备必备良药...

字体图标使用流程

总体来说，字体图标按照如下流程：

设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，比如下图：

之后保存为svg格式，然后给我们前端人员就好了。

其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。

上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。

推荐网站： http://icomoon.io

icomoon字库

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

推荐网站： http://www.iconfont.cn/

阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费，免费！！

字体引入到HTML

得到压缩包之后，最后一步，是最重要的一步了，就是字体文件已经有了，我们需要引入到我们页面中。

首先把以下4个文件放入到 fonts文件夹里面。通俗的做法

1498032122244

第一步：在样式里面声明字体：告诉别人我们自己定义的字体

@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;
}

第二步：给盒子使用字体

span {
    font-family: "icomoon";
}

第三步：盒子里面添加结构

span::before {
    content: "\e900";
}
或者  
<span></span>

追加新图标到原来库里面

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。

BFC(块级格式化上下文)

BFC(Block formatting context)

直译为"块级格式化上下文"。

那些元素会具有BFC的条件

不是所有的元素模式都能产生BFC，w3c 规范：

display 属性为 block, list-item, table 的元素，会产生BFC.

大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。

注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。

这个BFC 有着具体的布局特性：

有宽度和高度，有外边距margin 有内边距padding 有边框 border。

什么情况下可以让元素产生BFC

以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？

在好比，你光有资质还不行，你需要一定额外效果才能出发的武学潜力，要么你掉到悬崖下面，捡到了一本九阴真经，要么你学习葵花宝典，欲练此功必先....

同样，要给这些元素添加如下属性就可以触发BFC。

-float属性不为none

-position为absolute或fixed

-display为inline-block, table-cell, table-caption, flex, inline-flex

-overflow不为visible。

BFC元素所具有的特性

BFC布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

白话文：孩子在家里愿意怎么折腾都行，但是出了家门口，你就的乖乖的，不能影响外面的任何人。

BFC的主要用途

BFC能用来做什么？

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

主要用到

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

(2) 解决外边距合并问题

外边距合并的问题。

主要用到

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

(3) 制作右侧自适应的盒子问题

主要用到

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

BFC 总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。

css盒子模型

css盒子模型又称框模型(Box Model), 包含了元素内容(content), 内边距(padding), 边框(border), 外边距(margin)几个要素.

1555296613463

@import和link引入样式的区别

从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

引入：

@import url("green.css");
div {
  background-color: blue;
}

<head>
    <style>
        @import url("./green.css");
    </style>
    <link rel="stylesheet" href="./blue.css" />
</head>
<body>
    <div style="width:50px;height:50px;"></div>
</body>

虽然@import会在页面执行结束后加载，但是如果写在普通样式之前，还是会被后面的覆盖，并不是说最后加载会把其他渲染好的样式覆盖掉。

实际上，浏览器渲染的动作一般会执行多次的。最后一次渲染，一定是基于之前加载过的所有样式整合后渲染树进行绘制页面的，已经被渲染过的页面元素，也会被重新渲染。

那么我们就可以把@import这种导入 CSS 文件的方式理解成一种替换，CSS 解析引擎在对一个 CSS 文件进行解析时，如在文件顶部遇到@import，将被替换为该@import导入的 CSS 文件中的全部样式。

@import引入的样式会被层叠掉。其虽然后被加载，却会在加载完毕后置于样式表顶部，最终渲染时自然会被下面的同名样式层叠。

CSS

# CSS

# CSS引入方式（四种）

# 内部样式表(嵌入式)

# 行内式（内联样式）

# 外部样式表（外链式）

# 导入方式

# 三种样式表总结（位置）

# CSS基础选择器

# 标签选择器（元素选择器）

# 类选择器

# 多类名选择器

# id选择器

# id选择器和类选择器区别

# 通配符选择器

# CSS Unicode字体

# 链接伪类选择器

# 块级元素和行内元素区别

# 行内块元素（inline-block）

# 行高的测量

# CSS 三大特性

# CSS层叠性

# CSS继承性

# CSS优先级

# CSS特殊性（Specificity）

# 盒子模型（CSS重点）

# 盒子模型（Box Model）

# 表格的细线边框

# 外边距实现盒子水平居中

# 图片和背景区别

# 清除元素的默认内外边距

# 外边距合并

# 相邻块元素垂直外边距的合并

# 嵌套块元素垂直外边距的合并

# content宽度和高度

# 清除浮动

# 为什么要清除浮动

# 清除浮动本质

# 清除浮动的方法

# 额外标签法

# 父级添加overflow属性方法

# 使用after伪元素清除浮动

# 使用before和after双伪元素清除浮动

# 定位(position)

# 元素的定位属性

# 去除图片底侧空白缝隙

# web字体

# 字体格式

# 字体图标

# 字体图标优点

# 字体图标使用流程

# 设计字体图标

# 上传生成字体包

# 字体引入到HTML

# 第一步：在样式里面声明字体： 告诉别人我们自己定义的字体

# 第二步：给盒子使用字体

# 第三步：盒子里面添加结构

# 追加新图标到原来库里面

# BFC(块级格式化上下文)

# 那些元素会具有BFC的条件

# 什么情况下可以让元素产生BFC

# BFC元素所具有的特性

# BFC的主要用途

# BFC 总结

# css盒子模型

# @import和link引入样式的区别

ON THIS PAGE

CSS

CSS引入方式（四种）

内部样式表(嵌入式)

行内式（内联样式）

外部样式表（外链式）

导入方式

三种样式表总结（位置）

CSS基础选择器

标签选择器（元素选择器）

类选择器

多类名选择器

id选择器

id选择器和类选择器区别

通配符选择器

CSS Unicode字体

链接伪类选择器

块级元素和行内元素区别

行内块元素（inline-block）

行高的测量

CSS 三大特性

CSS层叠性

CSS继承性

CSS优先级

CSS特殊性（Specificity）

盒子模型（CSS重点）

盒子模型（Box Model）

表格的细线边框

外边距实现盒子水平居中

图片和背景区别

清除元素的默认内外边距

外边距合并

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的合并

content宽度和高度

清除浮动

为什么要清除浮动

清除浮动本质

清除浮动的方法

额外标签法

父级添加overflow属性方法

使用after伪元素清除浮动

使用before和after双伪元素清除浮动

定位(position)

元素的定位属性

去除图片底侧空白缝隙

web字体

字体格式

字体图标

字体图标优点

字体图标使用流程

设计字体图标

上传生成字体包

字体引入到HTML

第一步：在样式里面声明字体：告诉别人我们自己定义的字体

第二步：给盒子使用字体

第三步：盒子里面添加结构

追加新图标到原来库里面

BFC(块级格式化上下文)

那些元素会具有BFC的条件

什么情况下可以让元素产生BFC

BFC元素所具有的特性

BFC的主要用途

BFC 总结

css盒子模型

@import和link引入样式的区别