首页 > 技术文章 > html_Css 行内快元素

shiyi2009 2020-10-25 10:09 原文

一、内联块级(行块元素)

    取值:inline-block : 

       含义: 1.非占一行

        2.包裹性:盒子默认会紧紧的包住内容

        3、可以设置宽高

    相关标签 : image input

二、内联元素(行级元素)

    取值“ inline:

    含义:1.非独占一行;

       2.包裹性:盒子默认会紧紧的包住内容。

       3.设置宽高无效。

     相关标签:a span,s(删除线),em(语句加重倾斜标签),i(倾斜),   b(加粗)。

三、 块级元素:

     取值: block

     含义:1.独占一行

        2.流动性:盒子在水平上会自动填满其父元素的内容高度;

        3.设置宽高有效

      相关标签:ul li p h1-h6 div ol li  dl dt dd 

四、单标记 ;hr  br

五、双标记: <body></body> 等等。

注意:1.行内元素和行内块级之间回车换行会有1像素的缝隙,行级元素是放在基线上它的父元素包住行级元素的时会离基线有距离,所以会产生缝隙。

   2.块级元素的宽度 默认值时auto  不是100%;

   3.子元素宽度设置100%表示宽度等于父元素 content区域的宽度。

   4.尽量不要去设置宽度值,如果确实需要设置width,尽量设置为百分比

    这样有弹性;如果确实设置一个具体值,那就设置。

   5.宽度width指定后,注意一下问题:内外边剧。

   

推荐阅读