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

为什么80%的码农都做不了架构师？>>>   

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

              

在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

图片来源：百度图片里面搜索的两张；

转载于:https://my.oschina.net/ito/blog/77597