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

CSS+DIV之盒子模型

2017-11-20 00:00 549 查看

element : 元素。

padding : 内边距，也有资料将其翻译为填充。

border : 边框。

margin : 外边距，也有资料将其翻译为空白或空白边。

如图，元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。

实例代码：

文件名：index.html，如下：

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<head>
<title>盒子模型</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
<div id="first">第一个div</div>
<div id="second">第二个div</div>
</body>
</html>

文件名：main.css，如下：

#first{
left: 100px;
top: 10px;
width: 40%;
height: 150px;
background-color: #0fc;
float: left;
padding-top: 30px;
padding-left: 30px;
}

#second{
left: 100px;
top: 10px;
width: 40%;
height: 100px;
background-color: #f00;
float: left;
margin-top: -5px;
margin-left: 5px;
padding: 10px;
}

显示结果如下：

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

标签： CSS DIV

相关文章推荐

新的分享

章节导航