html中的块级元素和行内元素区别--------(回顾一)

情景：最近由于公司的项目中需要用到CSS调整一些样式，嘿嘿 CSS有些知识已经记不太清楚啦，在网上重新学习一下，顺便把一些常用的知识点记录一下。

1.块级元素和行内元素什么是？

[1].块级元素:根据W3C上的解释，就是说block（块级）元素是独占一行显示的,它的兄弟元素必定不会与其在同一行中（除非脱离了文档流）；常见的块级元素如div 、p、hr 、ul、ol、li和form等。

[2].行内元素:也叫内联元素，行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素；常见的行内元素如a、span、br、 strong和em等。

2.块级元素和行内元素的区别 ?

[1] 区别一:块级元素会独占一行，默认情况下宽度自动填满其父元素宽度;行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

    
    
    
    
    


        
测试块级元素1
        
测试块级元素2
        测试行级元素1
        测试行级元素2

效果图如下:

[2] 区别二:块级元素可以设置宽高，行内元素不可以设置宽高，而且块级元素即使设置宽度也还是独占一行。

    
    
    
    
    


        
测试块级元素1
        
测试块级元素2
        测试行级元素1
        测试行级元素2

效果图如下:

[3] 区别三:块级元素可以设置margin，padding；行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果。

    
    
    
    
    


        
测试块级元素1
        
测试块级元素2
        测试行级元素1
        测试行级元素2

效果图如下:

[4] 区别四:块级元素对应display:block，行内元素对应display:inline,display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排,是一个很实用的属性。

    
    
    
    
    


        
测试块级元素1
        
测试块级元素2
        测试行级元素1
        测试行级元素2
        测试行级元素3

效果图如下:

ok 就到这里了( ^ - ^ )