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设置颜色,这样就可以出来一个三角形