CSS 盒子模型 CSS 盒子模型Box Model所有HTML元素可以看作盒子，在CSS中，quotbox modelquot这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括边距，边框，填充，和实际内容盒模型；按步骤操作1首先划分好区域，编写一个html框架2编写css规则就可以在frameset和盒子模型创建简易网站了3frameset通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面4CSS盒模型本质上是一个盒子，用来封装；可以这么理解 盒子模型就是一个个的二维的纸盒子 页面布局就是一个空房间，要往里面放纸盒子 每个纸盒子之间要有间隔，这就是外间距 纸盒子里面要放东西，这些东西与纸盒子四壁的距离就是内边距 纸盒子的四个壁就是border。

div+css布局已经成为当前网页布局的潮流，通过盒子模型和浮动定位来控制页面布局比以前的表格布局容易控制多了1第一步 首先设置要了解网页页面布局框架结构，设定宽高和边框，以及设置好class或者ID名称2第二步；lthtml lthead lttitlelttitle ltstyle type=quottextcssquot lt！ div backgroundcolor#CCCCCC *这是div背景色可以不要~这里仅便于你区别* margintop 20px *div离页面面顶部的距离为20像素；页面布局要学习三大核心 盒子模型， 浮动 和 定位 学习好盒子模型能非常好的帮助我们布局页面网页布局过程网页布局的核心本质 ltu 就是利用 CSS 摆盒子 ltu所谓 盒子模型 就是把 HTML 页面中的布局元素。

所谓盒子模型就是，在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容content，元素的内边距padding，元素的边框border，元素的外边距margin四个部分这四个部分占有的空间中，有的部分可。

解决办法，CSS代码修改如下col2 background#F63 boxflex1 webkitboxflex1 mozboxflex1 width 0% * 加上这行代码 * #col3 background#690 boxflex3；DOM是 Document Object Model的缩写，即“文档对象模型”一个网页的所有元素组织在一起，就构成了一个棵“DOM”树一个HTML文档并不是一个简单的文本文件，而是一个具有层次结构的逻辑文档，每一个HTML元素都作为这个层次；在HTML文档中，每个元素element都有盒子模型，所以说在Web世界里特别是页面布局，Box Model无处不在下面是Box Model的图示说明上图中，由内而外依次是元素内容content内边矩paddingtoppadding。

lt！DOCTYPE html lthtml ltmeta charset=quotUTF8quot ltheadlthead ltstyle bodyfontfamily Microsoft YaHeifontsize14pxbackgroundcolor#fff padding 0margin 0 ul，olliststyle。