内嵌元素块元素内联块的区分以及内嵌元素的问题

Posted 2020-12-26 xiangxuemei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了内嵌元素块元素内联块的区分以及内嵌元素的问题相关的知识，希望对你有一定的参考价值。

那么什么是块元素，什么是内嵌元素他们都有什么特征呢请看下面的代码？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
<!--
一、块的特征
    1、默认独占一行 
    2、没有宽度时，默认撑满一排
    3、支持所有css命令
        1.无默认样式：
        <div ><nav><section><header><footer>
        2.有默认样式  
        <h></h>标题 margin 字体加粗 字体大小
        <p></p> 段落margin 
        <dl></dl>列表maigin
        <dd></dd>列表项maigin
        <ul></ul> 无序maigin  padding
        <ol></ol>有序maigin  padding
        <li></li>列项表项 list-style：none

二、内嵌(内联、行内)的特征
    1、同排可以继续跟同类的标签
    2、内容撑开宽度
    3、不支持宽高
    4、不支持上下的margin和padding
    5、代码换行被解析
        1.无默认样式：
        <span></span>
        2.有默认样式：
           a标签 默认有颜色、下划线
           strong 默认有字体加粗，强调的意思
           em，i 默认有字体倾斜
           mark 默认有背景颜色、字体颜色
           table 默认有表格边框颜色，边框间隙
           big  默认有字体加大
           b  默认有字体加粗
           table表格边框颜色、边框间隙。
           big字体加大
           
三、内联块 img input
-->
        <style>
            span{
                width: 200px;
                height:200px;
                background-color: red;
                padding: 30px;
            }
            div{
                width: 200px;
                height: 200px;
                border:1px solid black;
                margin-top: 10px;
            }
            .span{
                background: blue;
                /*margin: 30px;*/
                padding: 30px;
            }
        </style>
        
    </head>
    <body>
        <span>内联元素不支持宽高</span>
        <div><span class="span">span1</span></div>
    </body>
</html>

我们再来了解一下他们之间是如何转换的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--
            1、块转内联:display: inline;
            2、内联转块:display:block;
            3、内联块:display: inline-block;
                注意:IE67需要加.inlineB{*display: inline;*zoom: 1;}
                 IE67用*前缀;IE6用_前缀。
            inline-block特性：（1）块在一行显示
                             （2）行内属性支持宽高
                                （3）没有宽高时内容撑开宽高
                   问题：（1）内容换行被解析
                              （2）ie6,7不支持

        -->
        <style>
            .body{
                width: 700px;
                height: 400px;
                border: 1px solid #000000;
                font-size: 0;
            }
            .div1{
                display: inline;
                width: 200px;
                height:200px;
                background-color: red;
                font-size: 16px;
                
            }
            .span1{
                display: block;
                width: 200px;
                height:200px;
                background-color: red;
                border:10px solid yellow;
                margin-top: 70px;
                font-size: 16px;
                
            }
            #inlineB div,#inlineB span{
                display: inline-block;
                width: 100px;
                height: 100px;
                background: #CCCCCC;
                border: 1px solid #F0AD4E;
                font-size: 16px;
                
            }
            .box{
                width: 150px;
                height: 150px;
                background-color: red;
                border: 1px solid black;
                display: inline-block;
                *display: inline;
                *zoom: 1;
                font-size: 16px;    
            }
        </style>
    </head>
    <body>
        <div class="body">
            <div class="div1">div1</div>
            <span  class="span1">span1</span>
        </div>
        <div id="inlineB"  class="body">
            <div>div2</div>
            <span>span2</span>
        </div>
        <div class="body">
            <div class="box">box1</div>
            <div class="box">box2</div>
        </div>
    </body>
</html>

最后我们来看一下内嵌元素的问题：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        /*
         1、内联换行被解析出一个字体的间距，解决方法是给父集加font-size:0;自己重新设置字体。
         
        */
            #box1 span,#box1 div{
                width: 200px;
                height: 200px;
                border:1px solid black;
                background-color: red;
                margin-right: 100px;
                margin-bottom: 10px;
            }
            #box2{
                font-size: 0;
            }
            #box2 span{
                border:1px solid red;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <span>span1</span>
            <span>span2</span>
            <hr />
            <span>span1</span>
            <div></div>
        </div>
        
        <div id="box2">
            <span>span1</span><span>span2</span><span>span3</span>
            <hr />
            <span>span1</span>
            <span>span2</span>
            <span>span3</span>
        </div>    
    </body>
</html>

以上是关于内嵌元素块元素内联块的区分以及内嵌元素的问题的主要内容，如果未能解决你的问题，请参考以下文章

块元素block与内嵌元素inline的基本特征