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

一、含义

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

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

二、组成

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>