常见块级元素:address、div、dl、form、h1-h6、menu、ol、ul、li、p、table、header、nav、footer、article、section等
常见内联元素:a、br、font、img、input、label、select、span、textarea、b、small
块级元素具有以下特点:
1. 总是在新行上开始,占据一整行
2. 高度、行高以及内外边距都可以控制
3. 宽带始终是与浏览器宽度一样,与内容无关
4. 它可以容纳内联元素和其他块元素
内联元素的特点:
1. 和其他元素都在一行上
2. 高、行高以及内外边距部分可改变
3. 宽度只与内容有关
4. 行内元素只能容纳文本或者其他行内元素
5. 不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在 ie6 中不对上下起作用,只能对左右起作用。
CSS 改变元素类型
display: block 显示为块级元素
display: inline 显示为内联元素
display: inline-block 显示为内联块级元素,表现为同行显示并可修改宽高内外边距等属性
注意:内联元素的 margin-left / margin-right 及 padding-right / padding-left 是可以控制的,所以可以通过这四个属性来控制内联元素的宽度。
内联元素的内部也可以放块级元素标签,而且内部的块级元素标签会撑大外部的内联标签,所以可以通过放块元素来控制内联元素的高度。
网友评论