css盒模型-margin、定位和clip的相关处理

本文主要介绍在页面开发时常用的一些基本css样式属性：box-sizing、clip、margin、left、top之间的一些关系。

1. 盒模型-box-sizing

box-sizing用于修改计算元素宽度和高度默认的css盒子模型。可以使用该属性统一盒子模型，减少浏览器差异性引发的问题。box-sizing: content-box;/*默认值*/

两种盒模型的效果图

    
content-box
 
    

        
border-box
    

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了