zoukankan      html  css  js  c++  java
  • css块状元素、行内元素、行内块元素

    1、块状元素

           1、元素《==》标签

           2、标签的显示模式:块状元素、行内元素(内联元素)、行内块元素 

           3、块状元素:

    4、div/h1-h6/p/ul/li/ol/dl/dd/dt/table/tr/td/caption/thead/tbody/form/textera/

            5、块状元素的特点:1、有默认的宽高,宽是父元素的100%,高度是内容所称起来的高度

                                                      2、宽高是可以设置的

                                                     3、独占一行

                                                     4、可以容纳其他的块状元素、行内元素、行内块元素

                                                      5、可以设置外边距、内边距、边框

      6、注意:h标签、p标签尽量的不要去容纳块状元素 

    2、行内元素

           1、行内元素:span b strong i em u ins s del a

           2、行内元素的特点: 1、有默认宽高,都是内容所撑起来的

                                              2、宽高设置无效

                                              3、与相邻的行内元素或者行内块元素同一行上显示

                                               4、可以去包含行内元素,但是不能包含块状元素及行内块元素

                                               5、水平方向上的外边距和内边距是可以设置的,垂直方向无效,边框也是可以设置的

    3、 注意:a标签可以去包含块状元素以及行内元素 ,链接里面不能再放链接

    3、行内块元素

      1、行内块元素:img/input/

      2、行内块元素的特点:1、 有默认的宽高,就是自带的宽高

                            2、可以设置宽高

                            3、可以与相邻的行内元素和行内块元素在同一水平线下显示

                            4、外边距、内边距、边框都是可以设置的

    4:元素的转化

    块转行内:display:inline;

    行内转块:display:block;

    块、行内元素转换为行内块: display: inline-block;

     

  • 相关阅读:
    找水王续
    大道至简-阅读笔记01
    第二阶段冲刺(第二天)
    第二阶段冲刺(第一天)
    找小水王
    《大道至简》阅读笔记02——关于项目经理
    学习进度第十二周
    找水王
    学习进度第十一周
    博客园用户体验
  • 原文地址:https://www.cnblogs.com/wangxue13/p/13512823.html
Copyright © 2011-2022 走看看