css中inline | block |inline-block|table|flex系统的整理和分析

来源:互联网 发布:淘宝感谢卡内容简短 编辑:程序博客网 时间:2024/05/16 17:33
参考链接:http://www.cnblogs.com/qingkong/p/4456213.html
  • block

  解释:指定对象为块元素(占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样)

  特点:1.处于常规流中时,如果width没有设置,会自动填充满父容器
      2.可以应用margin/padding
      3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
      4.处于常规流中时布局时在前后元素位置之间(独占一个水平空间)
               5.忽略vertical-align(垂直对齐方式

      常见问题:1.父子情况下的block元素,在大部分浏览器会垂直外边距合并问题(margin-top,margin-bottom会发生合并)

                   2.垂直上下排列的block盒子外边距合并问题(margin-top,margin-bottom会发生合并)

       3.没有设置高度,子元素是float的,结果auto的height设置无用    

  代表标签:block元素(块元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET |          ADDRESS(随着html5标准的推进,一些元素将被废除,而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block,像table这种display:table的元素也是block元素。

0 0
原创粉丝点击