基本概念
CSS（层叠样式表）
1. 层叠的含意？
- 款式层叠
能够屡次对同一选择器进行款式申明 - 选择器层叠
能够用不同选择器对同一个元素进行款式申明 - 文件层叠
能够用多个文件进行层叠
2. 语法
- 语法一
选择器{
属性名：属性值；
/**/;
} - 语法二
@charset “UTF-8” // 申明字符编码
@import url(2.css); // 导入额定的 css 文件
@media (min-width:100px) and (max-width:200px){
语法一
}
3.CSS 查资料相干
- MDN
- CSS ticks
- 张鑫栋
4. 文档流
流动方向：
- inline 元素从左到右，达到最左边才会换行 e.g span
- block 元素从上到下，每一个都另起一行 e.g div
- inline-block 元素也是从左到右
内联元素：
- inline 宽度为外部 inline 元素的和，不能用 width 指定
- inline 高度由 line-heigth 间接确定，跟 height 无关
块级元素：
- block 默认主动计算宽度，可用 width 指定
- block 高度由外部文档流元素确定，能够设 height
- block 默认主动计算宽度，可用 width 指定 备注：width 默认值是 auto，留神永远不要自行设置 width：100%；
inline-block：
- inline-block 联合前两者特点，可用 width 备注：宽度默认和 inline 一样，然而能够自行设置
高度； - inline-block 跟 block 相似，能够设置 height
留神：
1. 不存在内联元素和块级元素，能够说目前这个元素是内联的，或者是块级的。因为这些元素都能够通过 display：inline 或者 display：block 来批改默认款式
2. 不要在 inline 元素外面加上 display 为 block 的元素，不然会出问题
overflow 溢出：
- 当内容的高度或高度大于容器的。会产生溢出 备注：当内容的高度或者宽度大于你本人设置的高度或者宽度，内容会产生溢出。
- 能够 overflow 来设置是否显示滚动条，相干值：scroll（永远显示）、auto（灵便设置）、hidden（暗藏溢出内容）、visible（间接显示溢出内容）
脱离文档流：
block 的高度能够由外部文档流元素决定，换句话说如果这个块外面所在的元素不在这个容器外面，也就是脱离了文档流，那么该容器在计算高度时，就不会计算脱离了文档流的元素
设置脱离文档流元素的款式：
float：left；
position：absolute/fixed
额定：纠错形式：border 调试法（给元素加 border）、开发者查看、开发者工具
5. 盒模型
- content-box（内容盒）：宽度只蕴含内容 - 内容就是盒子的边界
- border-box（边框盒）：宽度蕴含了 border- 框架才是盒子的边界
content-box width= 内容宽度 备注：同理高度也是一样
border-box width= 内容宽度 +padding+border - 边距重叠：只产生在上下边距 左右边距不会产生重叠
- magin 合并：前提是外面的值雷同，即 padding、border。若要扭转边距重叠状况，只须要使外面的值不一样就行。
根本单位：
- px- 像素
- em- 绝对于本身 font-size 的倍数 即 font-size*em
- 百分数
- 整数
- 十六进制：e.g #FF6600
rgb（0，0，0）/ RGBA 色彩 rgba（0，0，0，1）