简单介绍盒子模型的原理以及用法

最新推荐文章于 2022-11-13 22:35:11 发布

昨夜秋风拂

最新推荐文章于 2022-11-13 22:35:11 发布

阅读量674

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/L20220927Y/article/details/127288659

版权

一、含义

把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里

所以我们把所有的元素都想成盒子，矩形，只需要考虑大小即可

二、组成

1.内容区(content)

元素中所有的子元素和文本内容都在内容区中排列

默认情况：设置width，height都是内容区宽高

2.边框（border）元素设置边框

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部设置边框必须指定三个样式边框大小、边框的样式、边框的颜色

边框大小：border-width

边框样式：border-style

边框颜色：border-color

单独设置某一边的边框宽度

border-bottom-width

border-top-width

border-left-width

border-right-width

边框的样式

border-style 可选值

默认值：none

实线 solid

虚线 dashed

双线 double

点状虚线 dotted

设置边框的颜色默认值是黑色

border-color 也可以跟多个值

四个值上右下左

三个值上左右下

二个值上下左右

一个值上下左右

对应的方式跟border-width是一样

单独设置某一边的边框颜色

border-XXX-color: ;

简写border

1、同时设置边框的大小，颜色，样式，没有顺序要求

2、可以单独设置一个边框

border-top:; 设置上边框

border-right 设置右边框

border-bottom 设置下边框

border-left 设置左边框

3、去除某个边框

border:none;

小练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        #dh {
            display: block;
            background-color: rgb(245, 249, 252);
            width: 200px;
            border-width: 1px;
            border-style: solid;
            border-color: rgb(19, 129, 238);
            margin-left: 50px;

        }

        h3 {
            display: inline-block;
            color: rgb(5, 5, 132);
        }

        p>a {
            display: inline-block;
            color: black;
            padding-left: 5px;
            line-height: 30px;
            width: 170px;
        }
        
    </style>
</head>

<body>
    <nav id="dh">
        <div class="kj">&nbsp;<img src="./素材1/图片素材/title_icon.gif" alt="">
            <h3>课程导航</h3>
            <hr>
        </div>
        <main>
            <p><a href="">ACCP 软件工程师</a><img class="jt" src="./素材1/A`H6Z134%~6176MFU9GATM4.png" alt="">
                <hr>
            </p>
            <p><a href="">BTEST 软件测试工程师</a><img class="jt" src="./素材1/A`H6Z134%~6176MFU9GATM4.png" alt="">
                <hr>
            </p>
            <p><a href="">BENET 网络工程师</a><img class="jt" src="./素材1/A`H6Z134%~6176MFU9GATM4.png" alt="">
                <hr>
            </p>
            <p><a href="">JBNS 网站工程师</a><img class="jt" src="./素材1/A`H6Z134%~6176MFU9GATM4.png" alt="">
                <hr>
            </p>
            <p><a href="">ACCP 启蒙星</a><img class="jt" src="./素材1/A`H6Z134%~6176MFU9GATM4.png" alt="">
                <hr>
            </p>
            <p><a href="">ANDROID 软件工程师</a><img class="jt" src="./素材1/A`H6Z134%~6176MFU9GATM4.png"alt="">
                <hr>
            </p>
            <p><a href="">JAVA 软件工程师</a><img class="jt" src="./素材1/A`H6Z134%~6176MFU9GATM4.png"alt="">
                <hr>
            </p>
            <p><a href="">.NET 软件工程师</a><img class="jt" src="./素材1/A`H6Z134%~6176MFU9GATM4.png" alt="">
                <hr>
            </p>
            </p>
            <p><a href="">网络营销</a><img class="jt" src="./素材1/A`H6Z134%~6176MFU9GATM4.png"alt="">
                

        </main>
    </nav>
</body>

</html>