前端面试题-01块元素行内元素行内块元素

一、块元素的特性 block element

1. 独霸一行，总是在新行上开始
2. 宽度缺省是它父级元素的100%，除非设定一个宽度
3. 高度、行高、外边距、内边距都可以设置
4. 可以容纳其他内联元素或者其他块元素

常见块级元素
div ，p ，ul , li ,h1-h6…

二、行内元素的特性 inline element

1. 和其他元素都在一行上，遇到父级元素边界会自动换行
2. 高、行高以及内外边距都不可以改变
3. 宽度与内容一样宽，且不可改变
4. 行内元素只能容纳文本或者其他行内元素
   对于行内元素，需要注意的是：设置宽度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；

 

 

行内块元素的特性

1. 元素排列在一行l
2. 宽度认由内容决定
3. 元素间默认有间距
4. 支持宽高、外边距、内边距的所有样式的设置

常见行内块元素
img ,input ,select ,textarea ,button ,label …