盒子模型(框模型)

一个盒子分为四部分

1.内容区(content)

2.内边距(padding)

3.边框(border)

4.外边距 (margin)

盒子的大小是由(内容区、内边距、边框)决定

.box{

width:100px;

height:100px;

background-color:#bfa;

border-width:10px;

border-color:red;

border-style:solid;

}

设置边框上下左右的宽度

上top、下bottom、左left、右right。

.box{

boder-top-width:10px;

}

设置边框上下左右的颜色

上top、下bottom、左left、右right

.box{

border-top-color:

}

设置边框的形状

dotted(点状)、dashed(虚线)、double(双线)、solid(实线)

.box{

border-style:dotted;

}

边框

.box{

width:100px;

height:100px;

background-color:#bfa;

border-width:10px;

border-color:red;

border-style:solid;

}

如果不设置边框的宽度和颜色浏览器会默认为黑色3px;

边框的简写

.box{

width:100px;

height:100px;

background-color:#bfa;

border:10px red solid;

}

自定义边框颜色

.box{

width:100px;

height:100px;

background-color:#bfa;

border-top:10px solid red;

}

上top、下bottom、左left、右right

上下左都被设置就右面不会设置边框样式

.box{

width:100px;

height:100px;

background-color:#bfa;

border:10px red solid;

border-right:none;

}

内边距

.box{

width: 100px;

height: 100px;

background-color: #bbffaa;

border:red 10px solid;

padding-top: 20px;

padding-bottom:20px;

padding-left:20px;

padding-right:20px;

}

.box1{

width: 100%;

height: 100%;

background-color: orange;

}

注：内边距会影响盒子的大小

外边距

.box{

width: 100px;

height: 100px;

background-color: #bbffaa;

border:red 10px solid;

margin-top: 20px;

margin-bottom:20px;

margin-left:20px;

margin-right:20px;

}

.box1{

width: 100px;

height: 100px;

background-color: orange;

}

注：外边距会影响盒子的位置

margin外边距

可以设置"-"值

.box{

width: 100px;

height: 100px;

background-color: #bbffaa;

border:red 10px solid;

margin-top: -50px;

margin-bottom:-50px;

margin-left:-50px;

margin-right:-50px;

}

.box1{

width: 100px;

height: 100px;

background-color: orange;

}

给margin设置auto

.box{

width: 100px;

height: 100px;

background-color: #bbffaa;

border:red 10px solid;

margin-left:auto;

margin-right:auto;

margin: 0 auto;

}

.box1{

width: 100px;

height: 100px;

background-color: orange;

}

如果设定左外边距或者有外边距的话会把外边距设为最大，垂直方向设置auto相当于0，左右同时设置auto，就会居中