css的盒子模型-------边框篇
在HTML前端开发中，盒子模型是最基础的模型框架，也是应用最广泛的模型，而盒子模型中最基本的就是边框，如果理解了边框就可以理解所谓的盒子模型所阐述的大盒子套小盒子的页面布局，那么对于前端开发布局来说，就只剩下什么样的布局好看了。废话不多说了，下面上代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型--边框</title>
<style type="text/css">
/*主要操作都在css里，html我只写了一个大致的框架样子*/
.bord-fin{ width: 666px;height: 666px; background-color: black; border: 5px solid red;margin: 233px 233px;box-shadow: 10px 20px 30px 10px yellow;}
.bord-cen1{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;}
.bord-cen2{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;}
.bord-li1{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;margin:12px auto;border-radius:25px;}
.bord-li2{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: right;margin:12px auto;border-radius:25px;}
.bord-li3{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;;margin:12px auto;border-radius:25px;}
.bord-li4{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: right;margin:12px auto;border-radius:25px;}
</style>
</head>
<body>
<div class="bord-fin"><!-- 最外面的盒子边框-->
<div class="bord-cen1"><!-- 中间的盒子边框 -->
<div class="bord-li1"></div><!-- 最里面的盒子1 左-->
<div class="bord-li2"></div><!-- 最里面的盒子2 右-->
</div>
<div class="bord-cen2"><!---->
<div class="bord-li3"></div><!-- 最里面的盒子3 左-->
<div class="bord-li4"></div><!-- 最里面的盒子4 右-->
</div>
</div>
</body>
</html>