CSS学习笔记二:块元素与行内元素

元素(element)是文档结构的基础;文档中每个元素都对文档文档的表现起特定的作用;在CSS中,每个元素生成一个独立的框(box,也称盒);

CSS学习笔记二:块元素与行内元素               CSS学习笔记二:块元素与行内元素

在CSS中,元素通常有两种形式:替换和非替换元素;

    替换元素:是指用来替换元素内容的部分并非由文档内容直接表示;替换元素显示时也生成框;如img,input等;

    非替换元素:其内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示;如div,span等;

 

元素显示角色分为两种基本元素类型:块级(block-level)元素和行内(inline-level)元素;

块级元素

块级元素生成一个元素框,(默认地)它会填充父元素的内容区(块元素的margin-left+padding-left+border-left+width+border-right+padding-right+margin-right = 父元素的width,默认是这样的,在正常文档流中),且会在元素框的前后生成"换行符";

    块元素的特点:

  • 会在元素框的前后生成"换行符";
  • 每一个块元素都会新起一行;
  • 块元素会独自占领一个整行,默认width为100%;
  • 高,宽,上/下内边距,下/下外边距,可控制;
  • 块元素内可以包含其他块元素和行内元素
  • 常用的块元素如:div,p,table,ul,li等

    行内元素的特点:

  • 不会生成"换行符";
  • 不会新起一行,默认的行内元素会根其他元素一起显示在一行,其宽度由内容决定;
  • 高,宽,上/下内边距,下/下外边距,不可控制;(注:上/下内边距会把背景色或边框撑开,但是不会占据高度)
  • 行内元素只能包含其他行内元素,不能包含块元素;
  • 常用的行内元素如:span,a,label,label等

    块元素与行内元素间的转换(display属性):

    块元素默认的display:block;行内元素默认的display:inline;所以要转换,只需设置display为block或inline就OK啦。

    行内元素就算用display转换成块元素了,最好也还是不要qian tao块元素   

元素嵌套

    元素是不能随变嵌套的,像p标签就不能嵌套其他块元素!

    嵌套规则可以去这里查看详细内容:http://my.oschina.net/ito/blog/81019

图片来源:百度图片里面搜索的两张;

你可能感兴趣的:(css,块元素,行内元素)