css要点补充（文章空白处理）

常见样式声明

font-size
字体大小
单位：
1.px,绝对单位，文字高度占多少像素；
2.em,相对单位，相对于父元素的字体大小，如父元素字体大小为10px,若子元素字体大小为2em则子元素字体大小为20px;若向上找父元素没有字体大小则基于浏览器字体大小；

font-variant
small小写
small-caps大写

text-indent
文本首行缩进

line-height
每行文本的高度，通常设置为容器的高度可以让单行文本垂直居中；

letter-spacing
文字间隙

text-align
文本水平对齐方式；center left right

background-color
默认值：transparent(透明)

选择器

伪类选择器
选中某些元素的某种状态
1.link:超链接为访问状态
2.visited:超链接访问后的状态
3.hover:鼠标悬停状态
4.active:鼠标按下状态

若以上样式都要使用，就要按照以上顺序写选择器

伪元素选择器
1.before
如：span::before{
content:"<"
}
2.after
span::after{
content:">"
}

继承

子元素会继承父元素的某些属性

通常文字类属性都会被继承

属性值的计算过程

一个元素，从所有属性都没有值到所有属性都有值，这个计算过程，叫做属性值计算过程

1.确定声明值（样式表中写的样式）
2.层叠冲突（权重）
3.使用继承
4.使用默认值

a元素为什么不会继承颜色

如果没有给a元素声明颜色，则a元素已经确定了默认颜色（-webkit-link），也没有冲突所以也不会继承父级及以上元素颜色；

a元素的重置（强制继承）
a{
text-decoration:none;
color:inherit;(继承父元素颜色)
}

特殊的两个css取值

• inherit:强制继承，父元素的取值继承到该元素；
• initial:初始值，设为默认值；

盒子模型

盒子类型

• 行盒：display-inline
• 块盒：display-block

bordre-sizing(css3)

• box-sizing:content-box;内容盒，默认值

• box-sizing:border-box;边框盒，固定盒子宽高后，设值padding margin border 不改变盒子大小

改变背景覆盖范围

默认情况下，背景覆盖边框
可通过background-clip进行修改

溢出处理

overflow
默认值:visible(溢出部分可以看到)；
auto：自动需要时出现不需要不出现滚动条；
出现滚动条：scroll；
hidden：溢出部分隐藏；

截断规则

word-break
影响文字在什么位置被截断换行；

• word-break：normal，正常截断；
• word-break：break-all,所有字符处截断；
• word-break：keep-all，所有文字都在单词出截断；

空白处理

溢出文章省略（…）
处理方法：三部曲(单行文本)
{
white-space：nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

可替换元素和非可替换元素

非可替换元素
大部分元素，页面显示的结果，取决于元素内容
可替换元素
少部分元素，页面显示的结果，取决于元素属性；

• 如img元素，显示的结果取决于src = "…"属性
• 这类元素还有如video,audio等
  ** 对大部分可替换元素均为均为行盒，却类似行块盒，可以设置宽高；**