每一个 HTML 元素就相当于是一个矩形的 "盒子
这个盒子由这几个部分构成
border —— 边框
content —— 内容
padding —— 内边距
margin —— 外边距
粗细: border-width
样式: border-style,默认没边框;solid-实线边框;dashed-虚线边框;dotted-点线边框
颜色: border-color
支持简写:
border: 1px solid red;
border: 1px solid blue;
border-top: red
上述代码只给上边框设为红色, 其余为蓝色 (层叠性,就近原则)
举例:
<head>
<title>边框</title>
<style>
#d1 {
width: 300px;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
通过 box-sizing 属性可以修改浏览器的行为,使边框不再撑大盒子
* {
box-sizing: border-box;
}
刷新页面:
padding —— 设置内容和边框之间的距离
四个方向内边距:
举例:
<head>
<title>内边距</title>
<style>
#d1 {
width: 300px;
height: 200px;
border: 2px solid blue;
padding-top: 10px;
padding-left: 5px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
可以把多个方向的 padding 合并到一起
举例:
<head>
<title>内边距</title>
<style>
#d1 {
width: 300px;
height: 200px;
border: 2px solid blue;
padding: 5px 10px 20px 30px;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
margin —— 控制盒子和盒子之间的距离
四个方向外边距:
举例:
<head>
<title>外边距</title>
<style>
#d1 {
width: 200px;
height: 100px;
border: 2px solid blue;
margin-bottom: 10px;
}
#d2 {
width: 200px;
height: 100px;
border: 2px solid red;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="d1">牛奶</div>
<div id="d2">鸡蛋</div>
</body>
类似于 padding 的复合写法
举例:
<head>
<title>外边距</title>
<style>
#d3 {
width: 200px;
height: 100px;
border: 2px solid red;
margin: 5px 10px 20px 30px;
}
</style>
</head>
<body>
<div id="d3">复合写法</div>
</body>
前提:
举例:
<head>
<title>块级元素水平居中</title>
<style>
div {
width: 300px;
height: 200px;
background-color: thistle;
}
</style>
</head>
<body>
<div></div>
</body>
<head>
<title>块级元素水平居中</title>
<style>
div {
width: 300px;
height: 200px;
background-color: thistle;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
注意:
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://xhuahua.blog.csdn.net/article/details/122473135
内容来源于网络,如有侵权,请联系作者删除!