CSS

emmet语法

快速生成HTML结构

快速生成css属性

生成的css属性单位：默认为 px，可以直接指定其他单位，如： lh26em

组合选择器

作用：
可以选择某标签包含的所有后代标签

并集选择器

作用：
可以让多个选择器共享一套样式

交集选择器

作用：
将至少两个选择器连在一起使用（既要还要）

文档流与元素类型

学习路径

• 什么是 文档流
• 元素的显示模式
• 元素显示模式的转换
• 块级元素的特殊处理

文档流

文档流：是浏览器在显示（渲染）网页标签时所采用的一套排列规则

• 块级元素 上下排列：独占一行
• 行内元素 水平排列：默认从左到右，遇到障碍或宽度不够会自动换行
• 行内块元素 等…

元素显示模式

元素显示模式：就是 元素(标签) 以什么方式进行显示，如 ：

• div 独占一行
• span 不独占一行，一行中可以放多个 span常见元素显示模式类型：
• 块级元素 (容器级)
• 行内元素 (文本级)
• 行内块元素

类型          标签
块级元素      h1--h6  p  div  ul li ol dl dt dd table form....
行内元素		span  a  ladel  b i u s em mark code small strong...
行内块元素	 img video audio input  button  select  textarea...

块元素

常见块级元素：h1~h6、p、div、ul、li、ol、dl、dt、dd、table、form 等

典型：div
特点：

• 容器级，可以放 行内 或 块级元素
• 霸道 独占一行
• 宽高、内外边距 都可直接控制
• 宽度默认为父元素的 100%
• 高度默认由内容撑起来

注意：

• p 标签 主要用于存放文字，不能放其它块级元素
• h1-h6 标题标签 也是存放文字用的

行内元素

常见行内元素：span、a、label、b、i、u、s、em、mark、code、small、strong 等

典型：span

特点：

• 文本级，一般只放 文本 或 其它行内元素
• 和相邻行内元素在一行，一行可以显示多个，行满后另起一行
• 不占有独立区域，只靠自身内容尺寸来支撑高宽
• 宽高 无法直接设置
• 外边距 左右有效，上下无效；内边距都有效；

注意：

• 超链接 里 一般放文字，也可以放 img 标签，但不能再放 超链接

行内块元素

常见行内块元素：img、video、audio、input、button、select、textarea 等

典型：img

特点：兼有 行内元素 和 块级元素特点

• 和相邻行内元素（行内块）在一行，中间有空白间隙
• 一行可以显示多个，行满后另起一行
• 宽高默认值就是它本身内容的宽高
• 宽高和内外边距有可以控制

元素显示模式的转换

不同类型的显示模式 可以进行 转换

语法：

选择器{
	display: block | inline | inline-block;
}

属性值            作用
block			  块元素
inline			 行内元素 
inline-block	 行内块元素 

块级元素的特殊处理

文本换行

规则：

• 中文、日文、韩文等遇到边界自动会换行
• 英文按照 单词 会自动换行
• 英文连续长单词不会换行

文本内容多时，有时会需要强制换行

语法：

选择器{
	word-break: break-all;
}

文本内容多时，有时会需要强制不换行

语法：

选择器{
	white-space: nowrap;
}

溢出处理

块级元素内容占满高或宽后怎么办呢？

溢出处理

• 自动换行
• 滚动条

语法：

选择器{
	overflow:属性值
}

外边距合并

文档流中，相邻 块级元素 上下外边距会出现合并现象

使用外边距较大的值来撑开距离

外边距塌陷

在文档流中块级元素的子盒子设置了上外边距后，会产生子盒子外边距溢出父盒子的现象，我们称之为塌陷。

解决方案：

• 为父盒子 设置 border 属性
• 为父盒子 设置 overflow 属性( 值不为 visible)