CSS 盒子模型

来源：互联网发布：淘宝卖家怎么弄优惠券编辑：程序博客网时间：2024/06/07 04:27

CSS盒子模型

CSS盒子模型是非常重要的概念，理解了盒子模型才能更好的进行排版；

1、概念:HTML中的任何元素都可以看作为盒子，规定了元素框处理元素内容、内边距、外边距和边框的方式；

2、盒子模型分类

a) 标准盒子模型

从上图可以看出:标准盒子模型包括了border、padding、margin、content，其中content只为内容本身；

b)IE盒子模型

从上图可以看出:IE盒子模型包括了border、padding、margin、content，但是content与标准盒子模型不同，包括了border、padding；

<html><head><title>盒子模式</title><meta content="text/html" http-equiv="content-type" charset="UTF-8"><style type="text/css">*{margin:0}#container1,#container2{width:200px;height:200px;background-color:#cccccc;padding-top:150px;padding-left:150px;border:20px solid blue; /*边框：大小 实线 颜色*//*border-width:20px;border-style:solid;border-color:blue;*/margin-top:20px;margin-left:20px;}</style></head><body><div id="container1">元素1</div><div id="container2">元素2</div></body></html>

0 0