网页设计前端——盒子模型

1、盒子模型的宽高以及padding和border的认识

　　盒子的宽高不是CSS样式的宽高，CSS样式里的宽高只是内容的宽高，而盒子真实的宽高计算：宽：内容宽+padding+边框的高度    高：内容高+padding+边框的高度。这个地方要有所意识。padding的背景颜色和内容一个颜色。

2、padding是有4个方向的，要控制这4个方向有两种方法。

　　①用小属性的方法：

　　　　padding-left:;左

　　　　padding-right:;右

　　　　padding-top:;上

　　　　padding-bottom:;下

　　②综合写法：

　　　　padding:上  右  下  左;

用小属性可以层叠掉综合写法。

3、border是一个大的综合属性，border:粗细   线型   颜色;

　　①按要素拆开

　　　　border-10px;

　　　　border-style:solid;//线型   实线

　　　　border-color:red;  //颜色

　　　　但是，如果值用空格隔开，他就代表一种顺序，上  右  下  左  一种顺时针顺序去设置border。

　　②按方向拆开

　　　　border-top:10px solid red;

　　　　border-right:10px dashed red;

　　　　border-bottom:10px solid green;

　　　　border-left:10px solid red;

　　　　还可以再拆，即把每个方向的每个元素拆开border-top-10px;

　　可以用盒子的border属性做一个三角形。网易多数三角形的角标就是用border做的，这样的话相比图片加载速度会更快。他利用的是border边的临接处平分那个正方形。

　　　　0;

　　　　height:0;

　　　　border:10px  solid  white;//用白色消除

　　　　border-bottom:none;//消除下三角

　　　　border-top-color:blue;//借助前边的白色，只给一个top设置颜色，这样就可以出来一个三角形