CSS基础概念

CSS：层叠样式表

样式层叠：可以多次对同一选择器进行样式声明
选择器层叠：可以用不同选择器对同一元素进行样式声明
文件层叠：可以用多个文件进行层叠

这些特性使得CSS极度灵活

CSS的版本

CSS2.1是使用最广泛的版本

CSS3是现代版本，分模块，之后就分模块升级

可以使用caniuse.com,查询CSS样式在不同浏览器的兼容性

CSS语法

语法一：样式语法

选择器{

属性名: 属性值;/注释/

}

例：

p {
 color: red;
}

注意：

所有的符号都是英文符号
区分大小写
任何地方写错了，浏览器不会报错，会直接忽略
需要写分号

语法二：@语法

@charset "UTF-8";  /*声明用什么字符编码，必须放在第一行, 而且要加分号*/
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {
	语法一
}

注意：

@charset必须放在第一行
前两个@必须以 ; 结尾

文档流 Normal Flow

文档流是指HTML元素的流动方向

流动方向

inline：元素从左到右，到最右边会换行，如果最右边长度不够一个Inline元素，会自动切割为两半，一半在这一行，一半在下一行, 即会跨越两行
block：元素从上到下，每一个都另起一行（即使设定宽度，也占一行）
inline-block：元素从左到右，但不会跨越两行

宽度

inline：元素的宽度是内部inline元素宽度的和，不能用width指定，不要在inline里加block
block：元素默认自动计算宽度 (width: auto) ，即能占多宽就占多宽，可用width指定
- block元素的默认宽度不是100%，不是100%，不是100%
- 永远不要对Block元素写 width: 100%; 除非有特殊需要
inline-block：默认宽度是内部inline元素与inline-block元素宽度之和，可以用width指定宽度

inline元素是尽可能窄，block元素是尽可能宽

高度

inline：元素的高度是由line-height间接确定(大部分情况下，Inline元素和Line-height一样，但如果字体不一样，会有细微的区别，比如差1-2px)，和height无关
block：元素的高度是由内部文档流元素决定的，可以设Height
inline-block：和Block元素一样

所有元素都可以是块级元素或内联元素，主要看它的display属性

  <span>第1个span元素<span>xxx</span></span>
  <span>第2个<div>hi</div>span元素</span>
  <span style="width: 100px;">第3个span元素</span>
  <span>第4个span元素</span>
  <span>第5个span元素</span>
  <span>第6个span元素</span>
  <span>第7个span元素</span>
  <span>第8个span元素</span>
  
  <div style="width: 100%;">第1个div元素</div>
  <div style="width: 100px;">第2个div元素</div>
  <div style="margin: 20px;width: auto">第3个div元素</div>
  <div>第4个div元素</div>
  <div>第5个div元素</div>
  <div>第6个div元素</div>
  <div>第7个div元素</div>
  <div>第8个div元素</div>
  
  <span class="ib" style="width: 100px;">第1个inline-block元素</span>
  <span class="ib" style="width: 400px;">第2个inline-block元素</span>
  <span class="ib">第3个inline-block元素</span>
  <span class="ib">第4个inline-block元素</span>
  <span class="ib">第5个inline-block元素</span>
  <span class="ib">第6个inline-block元素</span>
  <span class="ib">第7个inline-block元素</span>
  <span class="ib">第8个inline-block元素</span>

span{
  border: 1px solid red;
}
div{
  border: 1px solid green;
}
.ib{
  border: 1px solid blue;
  display: inline-block;
}

一个空的div的高度是0

一个空的span元素的高度不是0，因为span元素的高度是line-height决定的

问题是，如果我设置的高度小于内容元素的高度怎么办？

这就是溢出

溢出 overflow

overflow: auto; 灵活地显示滚动条，只有在需要的时候才会出现滚动条
overflow: scroll; 显示滚动条，但问题是，如果内容宽度和高度没有溢出，也会有滚动条
overflow: hidden; 隐藏溢出内容
overflow: visible; 显示溢出部分

<div class="div1">
  1内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容2
  <div style="border: 1px solid blue; width: 800px">你好</div>
  <span style="border: 1px solid red;"></span>
</div>

.div1{
  border: 2px solid green;
  height: 200px;
  /*overflow*/
  overflow: auto;
}

脱离文档流

block元素的高度是由内部文档流元素决定的，这就意味着，如果元素脱离了文档流，block元素就不会计算它的高度。

脱离文档流的两种方式

position: absolute/fixed;
float: left/right;

<div class="div1">
  <div class="div2"><span>你好</span></div>
</div>

.div1{
  border: 1px solid red;
}
.div2{
  border: 1px solid green;
}
span{
  /*position: absolute;*/
  float: left;
}

<div>
  <span>span元素</span>
  <span style="font-family: 宋体;">你好</span>  
</div>
  <div style="width: 100px;">第2个div元素第2个div元素第2个div元素第2个div元素第2个div元素第2个div元素<div>额外的Div</div>
</div>
  <div style="width: 100px;">第3个div元素第3个div元素第3个div元素
    <div style="position: absolute; background: white">额外的Div</div>
    第3个div元素第3个div元素第3个div元素第3个div元素
</div>

span{
  border: 1px solid red;
  padding: 10px 20px;
  line-height: 100px;
}
div{
  border: 1px solid green;
}
body{
  padding: 20px;
}

CSS语法和文档流