CSS盒子模型教程

.第四：DIV CSS布局- CSS框模型，网页上的单个元素(插图、段落、单元格)。即可从workspace页面中移除物件。即可从workspace页面中移除物件。)以“方框”的形式存在。在浏览器中，网页看起来好像有几个框排列在一起或嵌套在一起。框模型是CSS控制页时的重要概念。您必须熟悉长方体模型以及其中每个元素的用法，才能真正控制页面上的各个元素。本部分主要介绍长方体模型的基本概念，并说明CSS定位的基本方法。1.1“长方体”和“模型”的概念，框架图，图2框模型，1.2框属性值的缩写(组合属性)、参考教材、组合属性标记，即按照规定的顺序给出2、3或4个属性值，其含义区分如下：(1)给定两个属性值时，表示上、下、下、下、左和右padding的属性。示例：padding 336010 px 20 px；(2)如果给定三个属性值，则前面的值表示padding的属性，中间的值表示左侧和右侧的padding属性，表示下面的padding的属性。(3)给定四个属性值后，依次表示上、右、下、左padding的属性。也就是说，它们是顺时针对齐的。1.3在一行中设置边框的宽度、颜色和样式，并将border-width、border-border-color和border-style这三个属性的组合在一起，还可以简单地写入border属性。例如，border:2pxgreendashed线条样式表示将所有4个边框都设置为2个像素的绿色虚线，这比拆分为3个样式要方便得多。案例a，调整网页中的排序，目标：1，了解框的各个属性2，了解空格的影响3，了解body标签的margin属性4，如何使用CSS控制页面特定的元素(请参见id和class属性之间的区别)5，如何在Dreamweaver中创建CSS，2框之间的关系，2.1HTML和文档对象模型(DOM)1 . html标签是嵌套层次结构，每个标签表示的元素都可以视为“框”，即框嵌套关系。2.DOM树以树状结构表示每个元素(对象)的关系。DOM树与页面布局的对应关系，2.2标准文档流，新概念“标准文档流”(NormalDocumentStream)，或简称“标准流”。所谓标准流是指在不使用与对齐和定位相关的其他特殊CSS规则时各种元素的排序规则。要了解浏览器中元素的处理规则，必须了解两种类型的元素(标记)。1.块级元素2。行内元素可以视为一个框，而不考虑任何元素。但是，显示块级元素导航器时，这些元素前后会自动换行，因此多个块级元素不会排成一行。行内元素默认显示在一行中，仅在最右端进行换行。一般区块层级元素和列层级元素，以及XHTML中一般区块层级元素有哪些？div常用块级元素form-交互表单h1-大标题H2-副标题H3第3级标题H4第4级标题H5a锚点b粗体(不推荐)br换行font-字体设置(不推荐)I斜体img图ing，显示行级元素和块级元素之间的差异的示例1，典型标记2，分析案例c .2.3分析案例b的处理过程，3框在世界流中的位置，行3.1中元素之间的水平margin，行中元素之间的margin、3.2块级元素之间的垂直margin，块元素之间的margin，3.3嵌套框之间的margin、父-子块的margin、ie和Firefox浏览器对父