行内元素和块元素
行内元素和块元素
行内元素又叫内联元素,内联元素只能容纳文本或者其它内联元素
常见内联元素<span>,<a>
块元素一般都从新行开,可以容纳文本,其它内联元素和其它块元素,即使内容不能占满一行,块元素也要把整行占满
常见块元素<div>,<p>
块元素和行内元素的区别
1行内元素只占内容的宽度,块内元素不管内容多少要占全行
2行内元素只能容纳文本和其它行内元素,块内元素可以容纳文本,行内元素和块元素(与浏览器版本和类型有关)
3一些CSS属性对行内元素不生效,比如margin,left,right,width,height,建议尽可能使用块元素定位(与浏览器版本和类型有关)
块元素和行内元素可以转换
如果我们希望一个元素按照块元素方式显示,则display:block
如果我们希望一个元素按照行内元素方式显示,则display:inline
下面举个例子
my.css
