目录
- 基本概念
- 理解以下几个重要的概念
- 文档流Normal Flow
- 块(block)、内联(inline)、内联块(inline-block)
- margin合并
- 两种盒模型(border-box更符合人类思维方式)
文档流
- 基本概念(文档的流动方向)
-
- 内联元素(inline)从左到右,到达最右边才会换行
- 当内联元素<span>到达最右端时,发现空间不够会截取自己(字会断开)
- 块级元素(block)从上到下,每一个都另起一行
- 内联块(inline-block)也是从左到右
- 到达最右端时,发现空间不够时不会截取自己(字不会断开)注意与内联的区别
- 内联元素(inline)从左到右,到达最右边才会换行
-
小技巧:
1.做东西前先加 border
2.批量生成代码:<span>{第$个元素}*8+tab键
output:<span>第1个元素</span>
...
<span>第8个元素</span>
注释:新的HTML5不区分内联元素和块级元素——通过"display"来决定
- 宽度
- inline宽度为内部inline元素的和,不能用width指定
注释:inline内部不能设置block元素!
2. block默认自动计算宽度,可用width指定
注释:任何时候都不能指定block(宽度)width:100%,会引起bug!
width可以指定单位像素px、em...
3. inline-block结合前两者特点,可用width指定
注释:与inline宽度一样,但可以设置宽度
- 高度
1.inline高度有 line-height 间接 确定,跟height无关,与padding也无关!
注释:padding控制的是可视范围,实际范围并没有变化;inline<span>的实际范围是line-height(行高)控制。
为什么是间接控制?
答案:因为字体的不同也会对实际范围起到一定的影响!
2.block高度由内部文档流元素决定,可以设置height(但元素如果脱离文档流,父级容器就无法包裹)
3.inline-block跟block类似,可以设置height。
overflow溢出
- 当内容大于容器
- 当内容的宽度或者高度大于容器是,会溢出
- 可用overflow来设置是否显示滚动条
- auto是灵活设置
- scroll是永远显示
- hidden是直接隐藏溢出部分
- visible是直接显示溢出部分
- overflow可以分为overflow-x和overflow-y
注释:如果有滚动条,内容只会在第一屏幕中显示,后面是留空的!
脱离文档流
那些元素可以脱离文档流
- float
- position:absolute/fixed
怎么让元素不脱离文档流
不要用上面 的元素~
注释:如果div中什么也没有,则div高度为"0"
如果span中什么也没有,则仍能显示高度(inline高度是由inline-height来决定的)
两种盒模型(标准模型与IE模型)
什么是盒模型:盒模型又称框模型(Box Model),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:
由于IE盒模型的怪异模式,IE模型和标准模型的内容计算方式不同。
标准模型和IE模型的区别
IE模型
IE盒模型又称为border-box
IE模型和标准模型唯一的区别是内容计算方式的不同,如下图所示:
IE模型元素宽度width=content+padding,高度计算相同
标准模型
IE盒模型又称为content-box
标准模型元素宽度width=content,高度计算相同