前端---HTML-块元素、行内元素、浮动,定位

1.9 块状元素和内联元素的区别

a、块状元素单独成行吧,不用其他元素一起在一行,内联元素可以多个并排在一行

b、块状元素内可以有子元素,内联元素不能包括子元素

c、块状元素可以设置宽高,内联元素不能设置宽高

d、块状元素和内联元素可以通过display属性进行互相转换:

display:inline块状元素转换为内联元素

display:block内联元素转换为块状元素,然后就可以对其设置高度和宽度

ps:

如果要让块元素换行,需要在换行的2个div之间,加个clear属性为both的div*/-->

https://pc-shop.xiaoe-tech.com/appgp6EDV1w6936/video_details?id=v_5b4584dae8eaf_InGfun1H

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        body,div{
            margin: 0px;
            padding: 0px;
        }
        #div1{
            float: left;
            width:300px;
            height: 300px;
            margin-left: 30px;
            margin-top: 30px;
            background-color: #FF9000;
        }
        #div2{
            float: left;
            margin-left:30px;
            margin-top: 30px;
            width: 400px;
            height: 300px;
            background-color: fuchsia;
        }
        #div3{
            margin-left:30px;
            margin-top: 30px;
            width: 400px;
            height: 300px;
            background-color: blue;
        }
        #clear{
            clear: both;
        }
    </style>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <!--IE6的bug:margin-left变成double
            1、块状元素
            2、float方式在同一行
            3、margin-left不为零
        -->
        <div id="clear"></div><!--/*要块元素换行,需要在2个div之间加个clear属性为both的div*/-->
        <div id="div3"></div>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_35264169/article/details/82556895
今日推荐