盒子模型001-基础

当前div的宽度是 980px ,边框是 1px 那么这个div的总width是 982px

如果div宽度固定为 980px,但是又加1px的边框,那么宽度就应该写 978px


上右下左
border 边框
border-top 顶部边框
border-right 右边框
border-bottom 底边框
border-left 左边框

 

/*--边框属性 border border-style类型,border-color颜色,border-width粗细*/
/*边框属性的简写 border:1px soild[实线] #fc0*/
/*div{width:700px;height:200px;border:1px solid #A5CDEE;}*/
/*盒子一定要定 width height text-align:水平对齐*/
/*div{width:700px;height:200px;border:1px solid #A5CDEE;text-align:center;}*/
/*盒子一定要定 width height text-align:文字水平居中对齐*/
/*div{width:700px;height:200px;border:1px solid #A5CDEE;text-align:center;line-height:200px;}*/
/*
让盒子div居中 技巧操作:margin:0 auto;
如果想让一个DIV（大盒子）在浏览器水平居中显示，就加以上属性margin:0 auto;
*/
div{width:700px;height:200px;border:1px solid #A5CDEE;text-align:center;line-height:200px;margin:0 auto;}

 

<style type="text/css">
/*
如果div的宽度是360px,高度是310px;边框是1px
那么css里面应该写为width=360-左右的2=358px;
height=310-上下的2=308px;
*/
div{
width:338px;height:288px;
border:1px solid #ccc;/*将width和height都+2px*/
padding-top:20px;/*将盒子高度+20px*/
padding-left:20px;/*将盒子宽度+20px*/
}
</style>

 

<style type="text/css">
/*列表的样式 清掉 list-style:none;*/
h2,ul,li{margin:0;padding:0;list-style:none;}
.box{width:358px;height:308px;border:1px solid #ABBACA;}
div h2{
width:348px;height:40px;font-size:16px;background-color:#EEF2F6;
line-height:40px;
padding-left:10px;/*h2的宽度需要-10px;*/
}
/*因为 h2用了40px;所以 ul的height=308-40=268px;*/
/*链接访问后004276 鼠标在上面是c00;*/
/*ul{width:358px;height:268px;}*/
ul{width:328px;height:238px;padding:15px;background-color:yellow;}
 
ul li{height:28px;line-height:28px;}
a:link,a:visited{font-size:14px;color:#004276,text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
</style>

<style type="text/css">

/*他们之间的间距=30+40*/
.left {background-color:yellow;margin-right:30px;}
.right {background-color:blue;margin-left:40px;}
div{width:300px;heigth:150px;border:1px solid red;background-color:yellow;}
.top{margin-bottom:30px;}
.bottom{margin-top:50px;}

</style>