CSS基础

基本概念

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）