CSS学习第二天--盒子模型
2018-08-28 本文已影响31人
胆小的米老鼠
之前我们学习了用table来添加样式制作内容，这样内容是相对固定的，不好修改，所以我们引入了盒子模型，盒子模型实现了网页内容都是有一个一个的盒子组成，我们对盒子设置样式即可。
| 名称 | 作用 |
|---|---|
| margin | 外边距 |
| border | 边框 |
| padding | 内边距 |
| content | 内容 |
图例样式说明：
image.png
接下来，我们一一对应练习一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型,padding margin 属性</title>
<style type="text/css">
.box{
width: 200px;
height: 100px;
background-color: gold;
text-align: center;
/*
设置边框练习
border-top: 10px solid #000;
border-left: 10px dashed;
border-bottom: 10px solid #000;
border-right: 10px dotted #000;
*/
/*
设置边框一致
*/
border:10px solid #000;
/*设置内边距:只有一个值，代表内边距一致*/
padding: 20px;
/*设置内边距：设置两个值，第一个值代表上，下，第二值代表左，右*/
padding: 15px 20px;
/*设置内边距：设置三个值，第一个值代表上，第二值代表左，右，第三个值代表下 */
padding: 15px 20px 30px;
/*设置内边距：设置四个值，第一个值代表上，第二值代表右，第三个值代表下，第四个代表左 */
padding: 15px 20px 30px;
/*设置外边距*/
/*设置内边距:只有一个值，代表内边距一致*/
margin: 20px;
/*设置内边距：设置两个值，第一个值代表上，下，第二值代表左，右*/
margin: 15px 20px;
/*设置内边距：设置三个值，第一个值代表上，第二值代表左，右，第三个值代表下 */
margin: 15px 20px 30px;
/*设置内边距：设置四个值，第一个值代表上，第二值代表右，第三个值代表下，第四个代表左 */
margin: 15px 20px 30px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
边框效果展示：
外边矩效果展示：
