网页设计盒模型举例
1、在网页设计中盒模型的学习是必不可少的，从外到内依次是magin、boder、
padding、content
2、打开Pycharm开发工具，新建‘he.html’，并写代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>he</title>
<style>
div{
margin:15px;
width:200px;
height:300px;
background-color:red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3、点击左上角图标，在浏览器查看效果如下图，按F12打开开发者工具，选中div红色部分是div，黄色就是margin外边距
4、给上面的div加边框，修改后代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>he</title>
<style>
div{
margin:15px;
width:200px;
height:300px;
background-color:red;
border:solid 10px black
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
5、在浏览器查看效果，黑色的就是边框，边框的宽度相当于增加原来div的厚度，不会影响外边距
6、增加内边距，修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>he</title>
<style>
div{
margin:15px;
width:200px;
height:300px;
background-color:red;
border:solid 10px black;
padding:20px
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
7、内边距会占用div的空间，紧按着边框
8、在div中输入简单的内容，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>he</title>
<style>
div{
margin:15px;
width:200px;
height:300px;
background-color:red;
border:solid 10px black;
padding:20px
}
</style>
</head>
<body>
<div>
我是内容
</div>
</body>
</html>
9、在浏览器查看效果，内容会在内边距里边，这就是简单的盒模型实例，是网页设计必须掌握的基本功
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：64
阅读量：135
阅读量：89
阅读量：80
阅读量：151