css知识点回顾

－ css 样式由选择符和声明组成，而声明又由属性和值组成

• 选择器{属性:值}

• 声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔

• 注释方式 /**/

－ css引入方式 优缺点 场景 优先级

• 内联式css样式 把css代码直接写在现有的HTML标签中，如下面代码：

这里文字是红色。

优点：优先级高，不会被其他样式覆盖影响。缺点：不利于代码的维护，没有样式内容分离。影响阅读体验。

• 内部引用 style 位置在head

• 外部引用 link 位置在head

• @import url(reset.css);使用@import会增加页面的总体加载时间。
  IE中使用@import会改变文件的加载顺序。这可能会增加CSS文件的加载时间，阻碍页面渲染。

－选择器 及 优先级

• id选择器 ＃id
• class选择器 .class
• 标签选择器 tag
• 通配选择器 *
• 层级选择器 div span div>span
• 分组选择器 html,body{width:100%;height:100%} 偏重于代码优化，html,body{width:100%;height:100%;}
• 伪类选择器 A的4个伪类
• 伪元素选择器 : ::

－ !important 为某些样式设置最高权值

－ 尺寸 width height

－ 颜色值

• 关键词 直接使用的名字的颜色值称为命名颜色，CSS支持17种合法命名颜色(标准颜色):
  aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal 浏览器支持140种颜色

• 16进制 6进制是设置颜色值的常用方式，将三个介于00-FF的十六进制数连接起来，若16进制的3组数各自成对，则可简写为3位

• rgb 通过组合不同的红色、绿色、蓝色分量创造出的颜色成为RGB模式的颜色。显示器是由一个个像素构成，利用电子束来表现色彩。像素把光的三原色:红色(R)、绿色(G)、蓝色(B)组合起来。每像素包含8位元色彩的信息量，有0-255的256个单元，其中0是完全无光状态，255是最亮状态 ,若数值小于最小值0,则默认调整为0;若数值大小最大值255,则默认调整为255.

• rgba (IE8-浏览器不支持) rgba模式是在RGB基础上增加了alpha通道，用来设置颜色的透明度，其中这个通道值的范围是0-1。0代表完全透明，1代表完全不透明

• hsl (IE8-浏览器不支持) HSL模式是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色.h:色调(hue)可以为任意整数。0(或360或-360)表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红(当h值大于360时，实际的值等于该值模360后的值).s:饱和度(saturation)，就是指颜色的深浅度和鲜艳程度。取0-100%范围的值，其中0表示灰度(没有该颜色)，100%表示饱和度最高(颜色最鲜艳).l:亮度(lightness)，取0-100%范围的值，其中0表示最暗(黑色)，100%表示最亮(白色)

• hsla (IE8-浏览器不支持)HSLA模式是HSL的扩展模式，在HSL的基础上增加一个透明通道alpha来设置透明度
  hsla(,,,)

－ 单位

• px 具体单位 具体到像素

• 100% 百分比 根据父级

• em 单位被定义为当前字体大小 根据body 例如：body{font-size:14px}

• rem root em 基于根元素html进行设置

－ vh和vw 视窗单位 vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px

－ line-height

• 基线、底线、顶线
  

行高指的是文本行的基线间的距离。
基线并不是汉字的下端沿，而是英文字母”x”的下端沿

• 行距、行高

－ font字体

字体是文字的外在形式，就是文字的风格，是文字的外衣。比如行书、楷书、草书，都是一种字体。同样一个字每个人写起来都会有差异，可以说每个人都有一套潜在的字体库。对于web页面来说，字体就是计算机上存储的一套文字显示方式。通过对文字进行一些特殊处理（比如末端加强）来提高不同环境中文字的可读性。

比如同样大小的文字，在不同字体下的可读性是不同的。

• font-family 将一系列近似的字体按照优先级顺序组成一个列表，浏览器从第一项开始依次查找，找到第一种可用的字体来显示文字。font-family: Times New Roman,”open-sans”,”幼圆”,sans-serif—当浏览器显示一个字符时，会首先从Times New Roman中寻找这个字符，如果找到就用Times New Roman字体来显示这个字符。如果没找到就去open-sans中寻找，如果找到就用该字体显示字符，没找到就会依次寻找下去，如果在通用字体库sans-serif中也没有找到就会用一个缺字符代替（通常是小方框）。

• font-family中有时候字体加引号有时候不加引号。区别在于对字体名称中空格的处理不同。不加引号时，忽略字体左右两端的空白字符，单词之间的空白字符被解释为一个空白字符。比如font-family: Times New Roman , sans-serif。被解释为font-family:Times New Roman,sans-serif。加引号时，需要保留引号内的所有空格。比如font-family:”Times New Roman”,sans-serif。浏览器会去寻找“Times New Roman”这个字体。

• 

• 具有继承性

• w3c建议在定义字体是最后以一个类别结尾，例如sans-serif，来保证不同操作系统下网页都能够正确显示。常见的字体族为serif（衬线字体）、sans-serif（非衬线字体），可以简单理解为在所有字体都是失效的情况下，浏览器从字体族中选择一种字体来显示

• sans-serif 非衬线字体，衬线字体以外的所有字体都成为非衬线字体。非衬线字体的线条比较均匀，通常在艺术字、标题中的使用较多。

• serif 衬线字体，通常是指使用末端加强原则的字体，通过在文字末端加入细小变化来改变小号文字的可读性

－ BFC

• FC全称”Formatting Context”, 中文为“格式化上下文”

• BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”

• IFC全称”Block Formatting Context”, 中文为“行级格式化上下文”

－ BFC的生成
满足下列CSS声明之一的元素便会生成BFC。

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

－ BFC的约束规则

• 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。

• 生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

如想更深入了解：可以看一下这个http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/和http://www.cnblogs.com/dojo-lzz/p/3999013.html这个，不错的分享。