一蓑烟雨

很好吃的web前端菜鸟

• 于  h5

CSS知识点回顾

CSS知识点回顾

1.html内容，css样式，js行为

2.css引入方式 优缺点

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

内部引用：

<style></style>

标签引入，不用多一次请求，单一页面使用效果佳；缺点：不利于复用。

外部引用：样式内容分离，便于维护；多一次请求，增加服务器负担；

3.@import url（reset.css） 在css中引入

4.css的注释方式 /**/

5.选择器种类：

  • id选择器 #id
  • class选择器 .class
  • 标签选择器 tag
  • 通配选择器 *
  • 层级选择器 div span & div>span (前者包括子子孙孙，后者只包含子类)
  • 群组选择器 html,body{width:100%;height:100%} 偏重于代码优化
  • 伪类选择器 A的4个伪类
  • 伪元素选择器 : :: before&after

6.css中色彩的表示方式

  • css支持17种合法的颜色命名：aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal
  • 16进制：将三个介于00-FF的十六进制数连接起来
  • rgb 有0-255的256个单元，其中0是完全无光状态，255是最亮状态

三原色

  • rgba(IE8-浏览器不支持)，在RGB基础上增加了alpha通道，用来设置颜色的透明度，其中这个通道值的范围是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(length,percentage,percentage,opacity)

7.单位

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

8.line-height

  • 基线、底线、顶线

基线

  • 行高、行距

行高

9.字体

  • 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”这个字体。
  • 具有继承性
  • sans-serif 非衬线字体，衬线字体以外的所有字体都成为非衬线字体。非衬线字体的线条比较均匀，通常在艺术字、标题中的使用较多。

字体

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

字体

10.BFC

－ 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就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然