CSS——盒子模型(margin\padding\border)
盒模型的宽高
p{background-color: #ececec;width: 400px;}
/*也可以设置百分比来进行宽度设置,是相对父元素的百分比宽度*/
.two{max-width: 300px;}
.three{min-width: 250px;}
/*高度属性设置同理*/
<body>
<p>盒子模型宽度width:400px</p>
<p class="two">盒子模型最大宽度:300px</p>
<p class="three">盒子模型最小宽度:250px</p>
<!-- 盒子模型的计算需要内容的高度加上padding+margin+border,所以在设置盒子的大小的时候是设置内容大小,而不是总体大小 -->
</body>
盒子模型的计算需要内容的高度加上padding+margin+border
所以在设置盒子的大小的时候是设置内容大小,而不是总体大小
盒模型的边框
边框的颜色
border-color: #0099ee;
边框的样式:
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
solid : 实线边框(常用)
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
border-style: dotted;
边框的宽度
border-width: 10px;
border-left 设置左边框,一般单独设置左边框样式使用
border-right 设置右边框,一般单独设置右边框样式使用
border-top 设置上边框,一般单独设置上边框样式使用
border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
展示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{width: 150px; height: 100px;background-color: #ececec;}
.one{border-top-width: 10px;border-top-color: #0099ee;border-top-style: solid;}
.two{border-right-width: 10px;
border-right-color: #0099ee;
border-right-style: solid;
border-top-width: 10px;
border-top-color: red;
border-top-style: dotted;
border-left-width: 5px;
border-left-color: green;
border-left-style: double;
border-bottom-width: 8px;
border-bottom-color: blue;
border-bottom-style: dotted;
}
/*单边框设置*/
/*边框设置可以进行缩写*/
.three{border-top: 5px red solid;
border-right: 10px blue dotted;
border-left: 10px blue dotted;
border-bottom: 5px red solid;
}
</style>
</head>
<body>
<p class="one">边框属性border</p>
<p class="two">边框属性border</p>
<p class="three">边框属性border</p>
</body>
</html>
盒模型的padding
.one{height: 300px;width: 300px;background-color: #acacac;
padding-top: 20px;
padding-left: 30px;
padding-bottom:50px;
padding-right: 40px;
}
/*那么这个div的高度就是300+20+50,宽度同理*/
.two{
width: 100px;
height: 100px;
padding:10 20;
}
/*padding缩写如果一个值就是4个方向都是一个值,
两个值就是上下和左右各一个,
三个值就是左右是一个值,
上下分别是一个值,
4个值就是上右下左这样顺时针取值*/
盒模型的margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one
{
width: 300px;
height: 300px;
background-color: #ececec;
margin: 10px 20px 30px 40px;
}
/*用谷歌浏览器进行F12查看,这是div盒子与body之间的间距*/
/*margin是外边距,也就是离其他元素的边距,一般在编码前为了不影响编码布局,提前设置margin为0*/
/*margin: auto;可以设置为水平方向居中*/
.two
{
width: 300px;
height: 300px;
background-color: #ececec;
margin: auto;
}
.three
{
width:100px;
height: 100px;
background-color: blue;
margin: auto;
}
/*当两个垂直边距时,会选取大的外边距 如margin-top:30px;另一个为margin-bottom:20px;则两个盒子之间的距离为30px*/
</style>
</head>
<body>
<div class="one">margin属性</div>
<div class="two"><div class="three">margin属性</div></div>
</body>
</html>