<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<!-- 学习目标需要掌握 -->
<!-- 1.能够准确阐述盒子模型的4哥组成部分
2.能够利用边框复合写法给元素添加边框
3.能够计算盒子的实际大小
4.能够利用盒子模型布局模型案列
5.能够给盒子设置圆角边框
6.能够给盒子添加阴影
7.能够给文字添加阴影 -->
<style>
/* 盒子模型实质上是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距，和实际内容 */
/* 4.1.1边框border border可以设置元素的边框，边框有三部分组成：边框宽度单位px 边框样式，边框颜色 */
div {
width: 300px;
height: 200px;
border-width: 5px;
border-style: solid;
/* 实现边框 */
border-style: dashed;
/* 虚线边框 */
border-style: dotted;
/* 点线边框 */
/* border-color: red; */
/* border-bottom: 10px dashed; */
/* border-top: 1px solid rgb(22, 19, 182); */
border: 1pxsolidblue;
/* 层叠性 只是层叠了上边框 */
border-top: 1pxsolidred;
}
/* 4.1.2表格的细线边框 */
/* border-collapse:collapse */
</style>
</head>
<body>
<tablealign="center">
<tr>
<th><imgsrc="../盒子模型样式.png"alt=""></th>
</tr>
</table>
<div></div>
</body>
</html>
