第二章 CSS基础

Cascading Style Sheet —— 层叠样式表

Css的特性

层叠性
继承性
重要性、

Css基本规则

css基本规则.png

注意：大括号里面的；是一个分隔符，而不是编程语言中的表示语句的结束；因此，最后一个属性值后面可以忽略

选择器

选择器.png

选择器分类

选择器分类.png

选择器权重

选择器权重.png

选择器的权重是不进位的，11个类选择器并不能大于一个ID选择器，即官大一级压死人。
计算小技巧： 可以直接数id,class，元素的数量采取三位比较,如1,5,8,1,10,9.首先比较最左侧位置，然后比较中间。

选择器权重2.png

!important和行内优先级比较




  
  
  JS Bin

解析方式

与我们认知不同的是，浏览器对选择器的解析是自右向左，逐级验证的，这样做有利于提高解析速度。、

非布局样式

字体族

serif 衬线字体  例如 宋体
sans-serif 非衬线字体
monospace 等宽字体，写代码时多使用
cursive 手写体
fantasy 花体

多字体 fallback

定义多个字体，进行试错

网络字体，自定义字体

iconfont

行高

inline-box 决定 line-height，字体的大小决定inline元素的行高，当行高大于inline-box的高度，会垂直居中。
基线：以字母X底部为准
底线：
顶线：
应用

单行文本的垂直居中
图片底部的3像素空隙，img时inline，会按照baseline对其，可以改为vertical-align:bottom或者img {display: inline-block}

背景

背景渐变
利用背景渐变制作网格
背景渐变

Css边框

制作三角形

由于两段边框之间是45度衔接的，所以把左右两边都采用透明，盒子wdtrh为0.

文本折行

overflow-wrap|word-wrap:normal|break-word;
通用换行设置，内容将在边界内换行。
word-break:break-word|break-all
white-space:wrap|no-wrap
控制是否换行；
text-overflow:ellipsis  溢出显示省略号

单行省略：

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

面试题

1.Css优先级

权重计算，不进位
!important
内联样式
如果权重相同，后写的优先级高；

优先级从大到小依次是!important 内联样式计算权重后写的权重高；
2.雪碧图

3.base64

4.伪类和伪元素的区别、

伪类表示状态，是不存在的，比如hover,active...；伪元素是真实存在的，before,after
在写法上，Css3规定，伪元素为::，伪类为:；但是before和after有些浏览器不支持:: ；
5.如何美化checkbox

lable for 和 id
隐藏input
:checked + lable