CSS 盒子模型LOGIN

CSS 盒子模型

CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border) 和 外边距(margin) 的方式。在HTML文档中,每个元素(element)都有盒子模型,所以说在Web世界里(特别是页面布局),Box Model无处不在。

CSS盒子模型:W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在)

1009.png

 说明:上图中,由内而外依次是元素内容(content)、内边矩(padding-top、padding-right、padding-bottom、padding-left)、边框(border-top、border-right、border-bottom、border-left)和外边距(marging-top、margin-right、margin-bottom、margin-left)。

1010.png

和第一幅图一样,在上图中,元素框的最内部分是实际的内容(element);直接包围内容的是内边距(padding),内边距呈现了元素的背景(background);内边距的边缘是边框(border);边框以外是外边距(margin),外边距默认是透明的,因此不会遮挡其后的任何元素(其实元素的margin就是其所在父元素的padding)。元素的背景应用于由内容和内边距、边框组成的区域。

一个盒子的构成:
盒子中的内容:content
盒子的边框:border
盒子边框与内容之间的距离:称为填充---padding内边距(内补丁)
如果有多个盒子存在,盒子与盒子之间的距离:称为边界---margin,外边距(外补丁)

 整个盒子模型在网页中所占的宽度:左边界+左边框+左填充+内容+右填充+右边框+右边界

CSS盒子模型的属性:
内容属性:宽=width 高=height
内填充属性(内容与边框之间的距离):padding
外边距属性:margin(使用该属性的时候注意浏览器的兼容性)
内填充与边界的规则:
如果有四个参数:表示上右下左,也可以单单指定某个方向
如果只有一个参数:表示上右下左
如果有两个参数: 第一个参数表示上下 第二个参数表示左右
如果三个参数:表示上 左右 下

边框属性:border

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style type="text/css">
#box {  
    width:200px;  
    height:100px;  
    margin:10px 20px 30px 40px;  
    border:solid 10px red;  
    padding:10px 20px 30px 40px;  
    background-color:green;  
}  
#content {  
    width:100%;  
    height:100%;  
    background:blue;  
}  
</style>
</head>
<body>  
<div id="box">  
  <div id="content"></div>  
</div>  
</body>  
</html>


下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> #bigBox{ width:300px; height:300px; background:#F30; padding:20px 0px 0px 20px; margin:20px; } #smallBox{ width:150px; height:150px; background:#6F9; padding-top:20px; } </style> </head> <body> <div id="bigBox"> <div id="smallBox"> 小盒子 </div> </div> </body> </html>
提交重置代码
章节课件