HTMLCSS基础—margin、盒模型和结构样式

来源：互联网发布：php popen 编辑：程序博客网时间：2024/04/28 06:02

margin是一种复合属性，用来控制页面两个版块之间的间距大小，同padding一样margin也可用复合的方式进行编写，margin: top right bottom left。
当控制两个版块之间的间距时，注意只要对一个版块进行编写即可，否则会发生边距叠压的情况。比如你想让版块1的底边距离版块2的上边10px，只要选择对版块1margin-bottom或版块2的margin-top进行赋值即可。
当两个版块父子级包含的时候子级的margin-top会传递给父级（内边距替代外边距），因此这时需要用padding来调整距离，而不是margin。

<!--网页1--><!doctype html><html><head>    <meta charset="utf-8">    <title>样式1</title>    <style>        #box1{width: 360px;height: 360px;background: blue;padding: 20px 20px;}        #box2{width: 200px;height: 200px;background: green;}    </style></head><body>    <div id="box1">        <div id="box2"></div>    </div></body></html>

具体效果：
这里写图片描述

知道了border，padding，margin以后我们就可以了解一个叫做盒模型的概念。在实际的网页中，任何一个版块都可以看做是一个盒模型。
这里写图片描述
盒子大小 = border + padding + width/height
盒子宽度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border

0 0