针对div无法实现的"精细控制"(只控制一行内某几个文字)的问题,
=>
内联元素
定义
内联元素, 又叫"行内元素"
w3c称之为: "行内框"
网友比喻: "橡皮筋"
块状元素 vs 内联元素 的区别
| 独占一行 | 能设宽高 | 竖直方向的 margin, padding | |
|---|---|---|---|
| 块状元素 | 是 | 是 | 有, 可以设置 |
| 内联元素 | 否 | 否 | 没有, 也不可以设置 |
※ 其实因为内联元素跳脱不出一行, 即给内联元素设置高无意义, 因为理解为不能设置
相互转化
a{
display: block; // 强制声明某元素为块状元素
width: 200px;
height: 100px;
background: #EFEFEF;
}
display: inline; // 强制声明为内联元素
display: none; // 压根不显示
※ 设置为display: none; 时, 该元素和该元素的子元素不再显示
内联元素下方空白问题
在一大段N行(N≥2)文字中,
文字的行与行之间有行距, 切行距是可以控制的,
每行行距也相等
但是在最后一行, 与后面的块状元素则有一个明显的边距
这个边距是我们用 css 控制不了的
图片是 内联元素 还是 块状元素 ?
=> 内联元素
目前所学,
块状元素: div p h1~6 pre form
内联元素: a span br
开发中常碰到的 图片下方留白 问题
解决: 转成块状元素
※ 一般在初始化的时候就进行了
2012_d1_①_020
