CSS基础【更新中】

一 前言

关键词：前端必知必会、css基础、前端面试
适用用人群：对CSS有简单了解的新手、准备面试的前端或作为前端人员日常参考手册

使用CSS的优势：
（1）视觉效果的命令集中在一个方便的位置
（2）创建一个样式表可以应用到多个页面
（3）有助于尽可能的缩减文档大小，大大减少文档下载时间

二 正文

替换元素与非替换元素

替换元素：
是指用来替换元素内容的部分并非由文档内容直接表示。如img元素，它由文档本身之外的一个图像文件来替换。
举例：img input
非替换元素：
非替换元素其内容由用户代理（通常是浏览器）在元素本身生成的框中显示。
举例：div p a ul等

行内元素与块级元素

行内元素
概念：行内元素在一个文本行内生成元素框，而不打断这行文本。
特点：【待补充】
例如:a span

块级元素
概念：它会生成一个元素框，（默认地）它会填充父元素的内容区（width:100%），旁边不能有其他元素。
特点：【待补充】
例如:div p ul li

转换

display: block | inline | inline-block |flex ...

@import

概念：css文件中用于web浏览器加载一个外部样式表，它必须放在其他规则之前才起作用。
带来的问题：【】

选择器

MSDN CSS 选择器

选择器优先级
！important（Infinit）>行间样式（1000）>id（100）>class|属性|伪类（10）>标签选择器|伪元素（1）>通配符（0）>继承(没有特殊性)
特权值相同的，出现在后面的优先级越高。

注：并不是数字大小的比较，而是从左到右逐个比较

ID选择器还是雷选择器？
（1）可以为任意多个元素指定相同的类，但是ID选择器只会使用一次
（2）ID选择器不能结合使用，不允许以空格分隔的词列表
（3）如果你想确定应当向一个给定元素应用哪些样式，ID能包含更多含义（唯一，可以做位置标识）
伪类元素使用顺序
考虑样式层叠（特权值相同的时候后面的样式会覆盖前面的）：

L(link)V(visited)H(hove)A(active)

::before与::after
【待补充】

样式继承

可继承：文本的字体颜色、大小、字体类型等
不可继承：盒模型相关等，如margin padding width background

盒模型

分为：标准盒模型和IE盒模型
设置：

box-sizing:content-box;标准盒模型
box-sizing:border-box; //IE盒模型

标准盒模型

元素框的总宽度:
width+padding-left+padding-right+border-left+border-right+margin-left+margin-right; 

元素框的总高度:
height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom;

IE盒模型

元素框的总宽度：
padding-left+padding-right+border-left+border-right；

元素框的总高度：
padding-top+padding-bottom+border-top+border-bottom;

水平居中

行内元素水平居中

display:inline-block; // 变为块级元素
text-align:center;// 设置text-align

块级元素水平居中
方法一【定宽】：margin

margin:0 auto

方法二：使用定位
定宽:

// 父元素设置相对定位
position:relative;
// 当前元素设置
position:absolute;
left:50%;// left会相对父元素宽度计算
margin-left:--元素宽度的一半px; // 或者transform:translate(50%); translate会相对元素自身宽度计算

不定宽:

// 父元素设置相对定位
position:relative;
// 当前元素设置
position:absolute;
left:50%;
transform: translateX(-50%);
方法三【不定宽】：

方案三：即将其转换成行内块级/行内元素

// 父元素设置 
text-align: center;
// 当前元素设置
display: inline-block; // 或 display: inline;

方法四：使用flexbox布局实现水平居中【宽度定不定都可以】

display: flex; 
justify-content: center;  

垂直居中

单行的行内元素垂直居中
只需要设置单行行内元素的"行高等于盒子的高"即可。

// 行高32px 文本垂直居中
line-height:32px;

或者设置 verticle-align:middle

多行的行内元素垂直居中

display:table-cell;
vertical-align: middle; // verticle-align只应用于行内元素和表格元素

块级元素垂直居中
方案一：使用定位实现
定高度：

// 父元素设置
position:relative
//子元素设置
position:absolute;
top:50%;
margin-top: -元素高度的一半px; // 或者translateY(-50%)

不定高度：

// 父元素设置
position:relative
//子元素设置
position:absolute;
top:50%;
translateY(-50%)

方法二：使用flexbox布局实现（高度定不定都可以）

//父元素添加属性
display: flex; 
align-items: center;

水平垂直居中

已知高度和宽度的元素
方法一：

// 设置父元素为相对定位
display:relative;
// 给当前元素设置
display:absolute;
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
margin: auto;

方法二：

// 设置父元素为相对定位
display:relative;
// 给子元素设置绝对定位
display:absolute;
left: 50%; 
top: 50%; 
margin-left: --元素宽度的一半px; 
margin-top: --元素高度的一半px;

未知高度和宽度的元素
方法一：使用定位属性

// 设置父元素为相对定位
display:relative;
// 给子元素设置绝对定位
display:absolute;
left: 50%; 
top: 50%; 
transform: translateX(-50%) translateY(-50%);

方案二：使用flex布局实现

//设置父元素
display:flex;
//当前元素
justify-content: center; 
align-items: center;

清除浮动

1. 在当前元素应用 clear：both；
2. 浮动元素后添加新的元素，应用 clear：both；
3. 父级div定义 overflow: auto
4. 清除浮动的最佳实践方案：

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

值&单位&字体

web安全色：256色计算机上总能避免抖动的颜色。web安全色可以表示为RGB值20%和51的（相应的十六进制为33）倍数，例如rgb(40%,100%,80%)。
em:定义为一种给定（当前元素）字体的font-size值。
rem:rem是和根元素关联的，不依赖当前元素。不管你在文档中的什么地方使用这个单位，1.2rem的计算值是相等的，等于1.2倍的根元素的字号大小。
px:像素其实是一种相对度量单位（不同设备会将像素缩放为更合理的度量），尽管在web设计中像素表现的很像是绝对单位。

学会分辨在什么场景下该使用什么工具
我的选择是，对font-size使用rem，对border使用px，对其他的度量方式如padding、margin、border-radius等使用em。然而在必要时，需要声明容器的宽度的话，我更喜欢使用百分比。
响应式demo

// root相当于html选择器
:root {                            
  font-size: 0.75em;               
}                                  

@media (min-width: 800px) {        
  :root {                          
    font-size: 0.875em;            
  }                                
}                                  

@media (min-width: 1200px) {       
  :root {                          
    font-size: 1em;                
  }                                
} 

normal	bold	bolder
400	700	相对于父元素字重更大一点，最大为900

font-size: 百分比 根据父元素字体大小来计算。

//font-size是可以继承的，继承的是计算值不是百分数，这会导致大小有误差。
12px * 120% =14.4px =>14px
14px * 135% = 18.9px =>19px

line-height vs verticle-align

line-height

是指文本行基线之间的距离。指定line-height可以用来增加或减少文本行之间的垂直间隔。
应用：所有元素
继承性：有

行间距(顶部/底部) =(line-height值 - font-size值)/2  //可能是一个负值

对于块级元素，它指定元素行盒的最小高度。对于非替换元素，它用于计算行盒高度。

verticle-align

应用：行内元素 替换元素 表格元素
继承性：无
百分数：相对于line-height的值

对行高的影响
verticle-align:值 很明确它把一个元素升高或者降低指定的距离。要认识到垂直对齐的文本并不会成为另一行的一部分，它也不会覆盖其他行的文本，这会影响行高（其高度要足以包含最高行内框的顶端和最低行内框的底端）。

三 后记

css相关其他参考
css进阶指南