第四天：网页神器，盒子模型

今天的知识点相对来说比较少

也很好理解

主要学习了边框和边距，还有边框类型与盒子阴影

一、边框（border）

话不多说，先写代码

html中

<div  class="p1">你是谁</div>

css中

.p1{

width:200px;  height:200px;  background-color:#f00;  border: 2px  solid  #f00;}

意识是“你是谁”的背景大小为200px，背景颜色为红色，边框为2px粗的实线红色

二、边距（margin  padding）

打字太晕，代码为尊

html中

<div  class="p2">我是谁</div>

css中

.p2{width:200px;  height:200px;  margin-left:100px;  margin-top:100px； padding-top：20px  padding-left:20px; }

整体意思为，div标签尺寸为宽200px 高200px，距离上方标签100px  距离左方标签100px，内容“我是谁”距离div上边框距离为20px，距离左边框距离为20px，，大概就是这个意思

三、盒子阴影（box-shadow）

html中第一点第二点一样，

css中，.p{box-shadow: inset(嵌入型)  20px(X轴偏移)  20px（Y轴偏移）  2px（模糊半径） #ccc（阴影颜色）;}

就这样，很一目了然，不用多做解释

四、圆角边框（border-radius）

主要遵循顺时针原则

.p{ width:50px;height:50px border: 2px solid #f00; border-radius:20px 20px 20px 20px }

意思为某某某，我能看懂，相信你也能！！！