html&CSS-----元素类型

目录

前言：

元素类型

 1.块级元素

2. 行内元素

3. 行内块元素

---

前言：

        今天我们就学习CSS中的元素的类型，了解网页元素类型的相关性质，有助于我们去对网页进行排版处理。下面就一起去看看吧。

元素类型

常见元素类型有：块级元素、行内元素、行内块元素 

 1.块级元素

块级元素独占一行，不和其他元素并排；

可以设置宽高和上下外边距；

不设置宽度时默认宽度100%；

可以容纳其他块元素和内联元素（元素嵌套）；

常见的块级元素：div h1~h6 p ul ol li dl dt dd，以及后面会学习的table form等。

 这里我就以div标签作为一个例子：

 效果如下：

这里我没有设置宽度为多少，此时div标签占用的宽度为父类元素宽度的百分百，也就是此时页面的整个宽度。可以看出块状元素是按照行为一整块进行占用的。如果没有去特别设置宽度的大小，结果会占用整个行宽度的百分百。

2. 行内元素

不霸占位置，可以和其他行内元素或文字内容并排；

不支持设置宽高，默认宽高为0，内容撑开宽高；

只能容纳文本和其他内联元素；

不能设置上下外边距；

常见的内联元素：a span b i strong em del等。

下面这里我就以span标签作为示例

    
    
    
    
    


  

  
    
      darling in the franx
     
    
 
   
    
      亲爱的弗兰克斯
    
   
    

    

效果如下：

1686205157109

这里可以看出，我对span标签设置的宽度和高度，结果是没有生效的，所以行内元素是不支持宽高的设置的。同时行内元素是可以去通过padding的值来调整元素的占距，那这里就会出现一个问题了，如果没有设置好的话就会覆盖到其他的元素，所以要想好了再去使用。

3. 行内块元素

 特点：

可以通过 display 属性对元素进行类型转换：

• display:none; /* 元素不显示 */

• display:block; /* 元素以块级形式展示 */

• display:inline; /* 元素以行内形式展示 */

• display:inline-block; /* 元素以行内形式排列，以块级形式展示 */

inline-block（行内块元素）的特点：

块级元素转换后宽高默认为0，且能够水平排放

行内元素转换后支持宽高和上下margin

行内块元素和行内元素或者文字 之前的空格和换行会被解析成一个空格字符（通过设置父级字体大小解决，或者直接删除代码中的间隙内容）

不支持margin的auto属性

margin：auto只对有流体特性的元素生效。

流体特性：元素可以自适应它所处包含块的尺寸。比如常见的块级元素，默认是占满整个包含块的水平宽度。除此之外，绝对定位元素如果在对立方向设置了相同数值，也会产生流体特性。

inline-block：没有流体性，因为元素会改为收缩性（shrink），收缩到他可以收缩的最小宽度。

IE6 7不支持

另外，img input 等元素属于inline元素，但是拥有inlin-block的特性。

示例： 

    
    
    
    
    


  

    
      darling in the franx
     
    
    

    
      亲爱的弗兰克斯
    
    
002

 效果：

这里我设置了margin的值，虽然是同一行的元素，但是会与上一行出现空气墙的情况，这里就是行内块元素的特点之一。

 今天就先到这里了，后面还会有相关的处理方法，我们接着看。

分享一张壁纸：