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


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

    <!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>
  • 相关阅读:
    openGL
    shader
    安卓2
    安卓
    错误整理
    3D图形学
    shaderlab
    MVC
    一、TCP扫描技术
    端口扫描技术
  • 原文地址:https://www.cnblogs.com/xiangxuemei/p/9392075.html
Copyright © 2020-2023  润新知