基本概念

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）