CSS盒子模型

作者: 钢笔先生 | 来源:发表于2020-02-05 23:28 被阅读0次

    Time: 20200205

    截屏2020-02-05下午10.35.57.png

    依据盒模型,如果我们在单个元素上,想浮动标记一下虚框,则可用margin来做。

    在中心是内容元素,注意在border和element中间是padding负责的区域。

    margin是与其他盒子进行的隐形边界。

    Play with box model

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>盒子模型</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>test</p>
        <p>test</p>
        <a href="http://">test</a>
        <a href="http://">test</a>
    </body>
    </html>
    

    可以看到:

    截屏2020-02-05下午11.15.32.png 截屏2020-02-05下午11.15.42.png

    块元素和行内元素的不同,一个默认占据父元素的全部空间,另一个则是只占一行的部分空间。

    如果修改样式:

    p, a{
        width: 50%;
        margin: 20px;
        padding: 30px;
        border: 2px solid black;
    }
    

    会得到失控的效果,因为a本身是行内元素,不是块元素。

    截屏2020-02-05下午11.22.10.png

    将行内元素改成块元素即可:

    p, a{
        width: 50%;
        margin: 20px;
        padding: 30px;
        border: 2px solid black;
        display: block;
    }
    
    截屏2020-02-05下午11.23.02.png

    如果将样式改为inline-block

    p, a{
        width: 20%;
        margin: 20px;
        padding: 30px;
        border: 2px solid black;
        display: inline-block;
    }
    

    显示效果如下:

    截屏2020-02-05下午11.24.27.png

    这种行内块元素不会占据父元素的一整行空间。

    END.

    相关文章

      网友评论

        本文标题:CSS盒子模型

        本文链接:https://www.haomeiwen.com/subject/edoexhtx.html