您的位置：首页 > Web前端 > CSS

CSS——盒子模型(margin\padding\border)

2018-10-15 12:05 561 查看

盒模型的宽高

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航