css的厉害之处

CSS的厉害之处在于层叠样式表，其中包括

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

CSS的版本

CSS2是最广泛使用的版本，兼容一切IE，CSS3是现代使用的版本，之后就分模块升级

caniuse.com查询兼容性

可以在caniuse上查询CSS样式在不同浏览器的兼容性

CSS语法

语法一：

p {
 color: red;
 /*注释*/
}

语法二：@语法

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

CSS文档流

文档流

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

• inline 元素从左到右，到最右边会换行，如果最右边长度不够一个Inline元素，会自动切割为两半，一半在这一行，一半在下一行, 即会跨越两行
• Block元素的流动方向是从上到下，每一个都另起一行
• inline-block元素从左到右，但不会跨越两行

宽度

1.inline元素的宽度是内部inline元素宽度的和，不能用width指定
2.block元素默认自动计算宽度(width: auto)，即能占多宽就占多宽，可用width指定，block元素的默认宽度不是100%，永远不要对Block元素写 width: 100%;
3.inline-block默认宽度是内部inline元素宽度之和，可以用width指定宽度
inline元素是尽可能窄，block元素是尽可能宽

高度

1.inline元素的高度是由line-height间接确定(大部分情况下，Inline元素和Line-height一样，但如果字体不一样，会有细微的区别，比如差1-2px)，和height无关
2.block元素的高度是由内部文档流元素决定的，可以设Height
3.inline-block元素和Block元素一样
一个空的div的高度是0
一个空的span元素的高度不是0，因为span元素的高度是line-height决定的
问题是，如果我设置的高度小于内容元素的高度怎么办？
这就是溢出

溢出

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

脱离文档流

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

• position: absolute
• float:left