一、网页可以看成是盒子模型构造而成，这个盒子模型构造结构如图所示：
Content：内容区。 padding：内容与盒子里面的边距。 border：边框。 margin：整个盒子的外壳，盒子与外部的边距，若是两个盒子，则是盒子与盒子之间的边距。 若 padding：1px 2px 3px 4px ;则依次是top，right，bottom，left四个方向，以顺时针方式排序。 块状元素可以设置宽高，如div，内联元素不可以，如span。 类修饰元素：p.ex{ width:50px; height:50px; dsa} ............................... <p class="ex">。。。。。。。。。。。。。。。</p> 如图：
二、画圆 border-radius
div{
border: solid red 1px;
width: 150px;
height: 150px;
border-radius：100px；
}
或者`
div{
border: solid red 1px;
width: 150px;
height: 150px;
/*画圆*/
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}`
效果如图：
三、box-shadow(盒子阴影)
box-shadow: 10px 10px 50px red;
第一个10px是表示阴影的X轴。第二个10px是表示阴影的Y轴。50px是表示阴影的浓淡程度。red是表示阴影的颜色。
如图所示：
注意：不同的浏览器会给盒子内部的元素设置默认的margin和padding，从而导致有时候我们的内容与外部有一定的距离。，所以有时候需要自己修改margin和padding。我们可以把margin和padding设置成我们想要的宽高。，如下面的代码：
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
</style>
</head>
我们运用上面的代码将网页中所有的margin和padding设置成0px。* 表示所有的，这里表示所有的margin和padding。
四、背景色填充
我们在做div盒子，在给盒子填充颜色时，默认是将除margin外都填充颜色，这样有时候是我们所不需要的，如下图： 我们可以修改样式，使颜色填充到我们想要填充的地方，如图我们只想要颜色填充到内容部分，我们可以在div标签选择器里面增加代码 background-clip: content-box;如图所示：填充的绿色只填充到了盒子的内容部分 如果我们还想使颜色填充到padding部分，则可以增加代码 background-clip: padding-box; 如图所示： 还可以继续对border进行填充颜色，增加代码 `background-clip: border-box;
`五、背景图片定位 background-origin
background-origin:规定背景图片的定位区域，它的属性也有border-box、padding-box、content-box 这3种属性，但要注意他的描述是“背景图片”，也就是说它只能对背景做样式上的操作，它相当于positon,规定了图片开始绘制的的区域，也就是它只相当于规定图片的左上角从什么地方开始，其他的它就不负责了；
六、输入框（input）、表格（table）等边框变圆角样式：border-radius: 5px;overflow:hidden;
