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

关于css的标准盒子模型

2015-10-10 12:57 465 查看

I. 标准盒子模型包括四个部分

II. 标准盒子模型的代码示例如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>盒子模型</title>
<style type="text/css">
div{
width:100px;   /*在标准盒子模型中，这个是指content的宽度*/
height:100px;   /*在标准盒子模型中，这个是指content的高度*/
border:1px solid red ;  /*这个是指div的border的厚度*/
padding:20px;   /*这个是指div的border内边界与content的距离，例如：
在
<body>
<div>你好</div>
<div>你好</div>
</body>
中，<div></div>就相当于<body></body>的content；
而在
<div>你好</div>
中，“你好”就是div的content,padding就是“你好”与div的border的内边界之间的距离*/
margin:30px;   /*这个是指div的border到外边的距离*/
}

body{
padding:40px;
margin:50px;
border:1px solid red;
}

</style>
</head>
<body>
<div>你好</div>
<div>你好</div>
</body>
</html>

III. 上述代码的盒子模型如下所示：

body:

=====>

div:

====>

IV.上述代码实际的页面效果：

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

标签：

相关文章推荐

新的分享

章节导航