一天搞定CSS：盒模型content、padding、border、margin--06

来源：互联网发布：网络推广工作安排编辑：程序博客网时间：2024/06/11 03:58

1.盒模型

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

2.盒模型分为：标准盒模型和非标准盒模型

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><!DOCTYPE HTML>

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

两者区别：计算宽高的方式不一样

1）标准盒模型：除IE以外的所有浏览器都是标准盒模型

width=content的宽；
height=content的高；

这里写图片描述

2）非标准盒模型：又称怪异盒模型，只有IE是使用该模型

width=content的宽+padding*2+border*2；
height=content的高+padding*2+border*2；

这里写图片描述

3.盒模型体系

这里写图片描述

4.盒模型详细说明

这里写图片描述

5.熟练盒模型：做一个如下效果图

这里写图片描述

代码：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .box1{                border:dotted;margin:0px auto;padding:25px;width:350px;            }            .box2{                border:5px solid blue;padding:20px            }            .box3{                background:#ffa0df;padding:48px;            }            .box4{                border:1px dotted white;padding:5px;            }            .box5{                border:1px dotted white;padding:40px;            }            .box6{                width:100px;height:100px;border:5px solid yellow;background:greenyellow;            }        </style>    </head>    <body>        <div class="box1">            <div class="box2">                <div class="box3">                    <div class="box4">                        <div class="box5">                            <div class="box6">                            </div>                        </div>                    </div>                </div>            </div>    </body></html>

0 0