本文主要介绍在页面开发时常用的一些基本css样式属性：box-sizing、clip、margin、left、top之间的一些关系。
1. 盒模型-box-sizing
box-sizing用于修改计算元素宽度和高度默认的css盒子模型。可以使用该属性统一盒子模型，减少浏览器差异性引发的问题。box-sizing: content-box;/*默认值*/
两种盒模型的效果图
<div class="content-box">
<p>content-box</p>
<div class="border-box">
<p>border-box</p>
</div>
</div>
box-sizing: content-box;
.content-box {
width: 400px;
height: 400px;
padding: 10px;
border: 10px solid #1b809e;
box-sizing: content-box; /*重点是这里呀~~~*/
background-color: #eeeeee;
}
box-sizing: border-box;
.border-box {
width: 300px;
height: 300px;
padding: 10px;
border: 10px solid #4cae4c;
box-sizing: border-box; /*重点是这里呀~~~*/
background-color: #cccccc;
}
2. 裁剪-clip: rect(top, right, bottom, left);
裁剪后的效果图
注：html写法没变
.content-box {
position: absolute; /*clip属性只适用于绝对定位的元素*/
width: 400px;
height: 400px;
padding: 10px;
border: 10px solid #1b809e;
box-sizing: content-box;
background-color: #eeeeee;
clip: rect(0px, 440px, 440px, 10px); /*剪掉左边框 把10px换成9px就知道参考点在哪啦*/
}
.border-box {
position: absolute; /*clip属性只适用于绝对定位的元素*/
width: 300px;
height: 300px;
padding: 10px;
border: 10px solid #4cae4c;
box-sizing: border-box;
background-color: #cccccc;
clip: rect(0px, 290px, 300px, 0px); /*剪掉右边框 把290px换成291px就知道参考点在哪啦*/
}
划重点了：裁剪的参考位置是最左上角的那一点（content+padding+border），跟盒模型无关。
3. 绝对定位-absolute
使用定位后的效果图
注：html写法没变
.content-box {
position: absolute;
/*这里省略若干属性....跟前面一样*/
}
.border-box {
position: absolute;
top: 0px;
left: 0px;
/* margin: 10px; 在这里 这个外边距也是相对内容（不含边框）的距离 定位属性top等和margin不互相影响*/
/*这里省略若干属性....跟前面一样*/
}
划重点了：定位的参考位置是内容最左上角的那一点（不含border，即content+padding）。定位只考虑了left和top属性，其它right和bottom的参考点也是不含边框的，只是参考点的位置变了。如果不设置left、top、right、bottom是按正常文档流的样式展示的。
有关css定位的基础知识
4. 外边距-margin
设置了外边距的效果图
注：html写法没变
p {
border: 5px solid #ff9966;
}
.content-box {
width: 400px;
height: 400px;
padding: 10px;
border: 10px solid #1b809e;
box-sizing: content-box;
margin-top: -5px; /*这里换成-4px看看效果呀~~*/
background-color: #eeeeee;
}
.border-box {
width: 300px;
height: 300px;
padding: 10px;
border: 10px solid #4cae4c;
box-sizing: border-box;
background-color: #cccccc;
}
.border-box p {
margin-top: -10px; /*这里换成-9px看看效果呀~~*/
}
划重点了：如果设置了外边距margin它的参考是父元素的内容区（content）和相邻兄弟元素的盒子（含border）垂直外边距取最大，水平外边距就相加（水平外边距不会受行内元素和块级元素影响）。如果你的兄弟是行内元素，它是垂直边距是不起作用的，你的参考点就是行内元素兄弟的content了
