一、块元素的特性 block element
- 独霸一行,总是在新行上开始
- 宽度缺省是它父级元素的100%,除非设定一个宽度
- 高度、行高、外边距、内边距都可以设置
- 可以容纳其他内联元素或者其他块元素
常见块级元素 div ,p ,ul , li ,h1-h6…
二、行内元素的特性 inline element
- 和其他元素都在一行上,遇到父级元素边界会自动换行
- 高、行高以及内外边距都不可以改变
- 宽度与内容一样宽,且不可改变
- 行内元素只能容纳文本或者其他行内元素
对于行内元素,需要注意的是:设置宽度width无效,设置高度无效,可以通过设置line-height来设置,设置margin只有左右有效,上下无效,设置padding只有左右有效,上下无效
常见行内元素
span ,a ,strong ,em ,b ,s ,i ,font…
行内元素的间距问题
原因:标签段之间的空格
方法一:将元素写成一行,中间不换行;
缺点:代码可读性差,不建议使用
方法二:设置行内元素的父元素font-size:0;由行内块元素设置字体大小
缺点:父元素的子元素都要设置字体大小,不建议使用
方法三:可以为元素设置负margin值,
缺点:margin负值的大小与上下文的字体和文字大小相关。由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。
方法四:省略闭合符号 注意:为了兼容IE6/IE7的浏览器,最后一个列表的标签的结束(闭合)标签不能丢
方法五:使用 字符间距(letter-spacing
) 或者单词间距(word-spacing
),大同小异。
letter-spacing 属性增加或减少字符间的空白(字符间距)
word-spacing属性增加或减少字与字之间的空白。
letter-spacing:-5px;消除
标签段之间的空格
可以设置多大的负值(-1000px),最多空白为0;
行内块元素的特性
- 元素排列在一行l
- 宽度认由内容决定
- 元素间默认有间距
- 支持宽高、外边距、内边距的所有样式的设置
常见行内块元素
img ,input ,select ,textarea ,button ,label …