html 块状元素、内联元素、内联块状元素


  1. 块状元素   display:block的特性是水平拉伸,垂直包裹,可以设置宽度和高度。块状元素还有个特性就是它的margin如果碰不到祖先元素的border或者padding,会与祖先元素垂直方向的margin-top、margin- bottom交叠。上下相邻的同级元素的margin也会交叠,就产生了margin合并。
  2. 内联元素   display:inline的特性的自动包裹,水平和垂直方向会自动包裹至内容的宽度。 因为元素的内联的,是嵌入到行里面 的,所以对内联元素垂直方向设置的margin-top、margin-bottom不会影响span元素的layout,但是水平方向设置的 margin-left、margin-right会影响内联元素的缩进。因为其具有自动包裹的特性,所以overflow属性无效。
  3. 内联块状元素display:inline-block,  除了具有内联元素自动包裹的特性外,还具有块状元素可以设置高度和宽度的特 性。内联块状元素还有一个重要的特性就是可以通过设置它的margin来改变其layout,但是内联块状元素的margin不与其他元素的margin 交叠。

  1. 常用的块状元素:  <div><h1>-<h6><ul><ol><li><dl><dt><dd><hr><ul><p><tabel><thead><tbody><tfoot>
  2. 常用的内联元素:  <a><b><i><span><em><label><strong><img><input><tr><th><td>
  3. display:block    支持padding,margin,width,height,float,overflow 等属性   @ 默认 width:100%; height:auto; overflow:hidden;
  4. display:inline    支持padding,margin-left,margin-right 等属性                 @ 可以通过 display:block/ float:left  转换为块状元素。不同的是float会导致器改变对齐。
  5. display:inline-block   支持padding,margin,width,height,float,overflow 等属性  
  1. IE6/IE7不识别display:inline-block属性
    1. div {display:inline; zoom:1;...}
    2. 即  {display:inline-block;} =={display:inline; zoom:1;}    后者兼容浏览器
  2. 内联元素不能包含块级元素。
    1. 比如 P 元素,只能包含内联元素,而不能包含块级元素。

       

以上纯属个人总结,如有错误或不完善的地方,请指点,必第一时间完善,十分感谢。

 

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2020 CODEPRJ.COM