博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

CSS之行内元素与块元素

Posted on 2013-03-07 13:05  Step at a time  阅读(520)  评论(0编辑  收藏  举报

1、概念:

行内元素:又叫内联元素-只能容纳文本或者其他内联元素,常见内联元素有<span>,<a>,<input>

块元素:一般都从新行开始,可以容纳文本,其他内联元素和其他块元素,即使内容不能占满一样,块元素也要把整行占满,常见元素有<div>,<p>

这样理解:行内元素它只占能显示自己内容的宽度,而且他不会占据整行。块元素它不管自己的内容有多少,会占据整行,而且会换行显示

示意图:对照行内元素与块元素的概念,可以快速理解行内元素与块内元素的知识

2、行内元素与块元素的区别

  • 行内元素只占内容的宽度,块元素内容不管内容的多少要占满全行
  • 行内元素只能容纳文本和其他行内元素,块元素可以容纳文本、行内元素和块元素(与浏览器类版本和类型有关)
  • 一些CSS属性对行内元素不生效,如margin,left,right,width,height.建议尽可能的使用块元素定位。(与浏览器类版本和类型有关)

3、行内元素与块元素的互换

如:display:inline --->转为行内元素(如 div)

.d1{
background-color:silver;/*我的第一个div变成了行内元素*/
display:inline;
}

display:block ---->转为块元素(如a)

a{
display:block;
background-color:yellow;   /*链接到我的主页变成了块元素*/
}

 4、标准流与非标准流

  • 流:现实中是流水,在网页设计中就是指元素标签排列的方式
  • 标准流:元素在网页中,排在前面的元素(标签)内容前面出现,排在后面的元素内容后面出现
  • 非标准流:当某个元素标签脱离了标准流(如相对定位)排列,我们统称为非标准流排列