html如何隐藏盒子的边框线,HTML盒子模型+边框
盒子模型(框模型)
一个盒子分为四部分
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，就会居中