css_7_盒子模型

盒子模型

边框线

border

<div id="box">
   xxxx
</div>

<style>

    #box{
        width:200px;
        height:200px;
        background：transparent； /**透明色/
        /* 边框的属性 */
        border-width:10px;
        border-color:red;
        border-style:solid;
        /* 
        	常用样式
        	solid:实线
        	dashed：虚线
        	datted：点线
        	double:双实线
        */
        
        /* border: 1px solid red */
        
        /*
        	border-top:设置边框顶线
        	border-bottom:设置边框底线
        	border-left:设置边框左线
        	border-right:设置边框右线
        */
        
        /*
        	border-top-color:设置边框顶线颜色
        		......
        */
    }
    
</style>

外边距

margin:设置与其他元素边界的外边距离

<div id="box1">
    
</div>
<div id="box2">
    
</div>

#box1{
    width:100px;
    height:100px;
    background:red;
    
    /* 四个方向都一样 */
    margin:50px;
    
    /*对应 上 右 下 左*/
 	margin：20px 50px 100px 200px; 
    
    /* 上 左右 下 */
    margin：20px 50px 200px; 
    
    /* 上下 左右 */
    margin：20px 50px; 
    	
   
}

外边距注意事项

块元素

1.上下的外边距会重叠

2.当两个正数时或负数时，以绝对值大的值为准

3.当有一正一负时，边距会塌缩

/* 以 50 为准*/
#box1{
    width:100px;
    height:100px;
    background:red;
    margin-bootom：50px；
}
#box2{
    width:100px;
    height:100px;
    background:green;
    margin-top：20px；
}

/* 以 -50 为准*/
#box1{
    width:100px;
    height:100px;
    background:red;
    margin-bootom：-50px；
}
#box2{
    width:100px;
    height:100px;
    background:green;
    margin-top：-20px；
}

/* 实际外边距30px */
#box1{
    width:100px;
    height:100px;
    background:red;
    margin-bootom：50px；
}
#box2{
    width:100px;
    height:100px;
    background:green;
    margin-top：-20px；
}
    

行内元素

4.行内元素没有上下外边距

5.左右外边距不会重叠

<strong id="s1">xxx</strong>
<strong id="s2">xxx</strong>

/* 总外边距40px */
#d1{
	background:red;
    margin-right：20px；
}
#d2{
    background:gold;
    margin-left：20px；
}

/* 外边距不生效 */
#d2{
    background:gold;
    margin-top：20px；
    margin-bottom：20px；
}

元素水平居中

<div id="box1">
    
</div>

<style>
	#box1{
    	width:100px;
   		height:100px;
    	background:red;
        /* 元素水平居中 auto只对水平生效，垂直不生效 */
        margin: 0 auto;/*  margin: 上下 左右; */
    }
</style>

内边距

padding：设置元素的内边距

<div id="box">
    xxxxx
</div>

#box{
    width:100px;
    height:100px;
    padding:20px;/* 设置上下左右内边距 */
    /* 复合属性，其他属性基本和margin一致 */
}

内边距注意事项

1.外边距会把元素本身撑开

2.如果设置元素背景，则内边距也会有

行内元素

3.行内元素如果上下内边距会与其他元素重叠

案例

<div id="box">
    <div id="box1">
        
    </div>
</div>

#box{
    width:500px;
    height:500px;
    background:red;
}
#box1{
    width:100px;
    height:00px;
    background:glod;
    
    /* 
    	由于父元素没有边界(border) 该元素也没有边界
    	margin-top会把box和box1看做是一体的，然后一起
    	向下移动100px
    
    	解决方案：给父元素(box)添加一个边界（border)
    */
    margin-top:100px;
}

盒子模型

页面上的元素我们可以把他看成一个盒子，叫做盒子模型

盒子模型组成：由外边距、边框、内边距、width/height

盒子模型总尺寸：border-width + padding + margin + 内容宽度