css盒子模型
【摘要】 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="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: 1px solid blue;
/* 层叠性 只是层叠了上边框 */
border-top: 1px solid red;
}
/* 4.1.2表格的细线边框 */
/* border-collapse:collapse */
</style>
</head>
<body>
<table align="center">
<tr>
<th><img src="../盒子模型样式.png" alt=""></th>
</tr>
</table>
<div> </div>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）