html设计模式日常学习笔记整理

本周，没有项目要做，我们一直在研究HTML设计模式，现在我将分享我本周的研究成果，供大家参考。
html设计模式学习笔记

本周，我主要学习了HTML的设计模式，现在我总结我的学习内容如下：

1。盒子模型学习

在CSS中一个基本的设计模式称为盒模型，它定义了一个元素被解析为一个盒子。我主要研究六盒模型，分别为（内联盒子）内联盒模型，内联块盒模型（内联块盒），块盒（黑箱），模型表箱（表盒），绝对定位框模型（绝对盒）和浮箱模型（浮箱）。

盒模型的设计模式是建立在CSS，它定义了属性之间的关系如下：边界，边界，填充，和内容。每个属性分为四个部分：在右边，在左边；四部分可同时设置，也可单独设置的分帧；尺寸和颜色，我们可以了解生活在盒子的厚度和盒子是用什么颜色的材料，边界点保持多大距离箱和其他，盒子里的内容，并填写装箱免费本地材料。

1.1内联盒模型

收件箱模型以内联排列顺序解析。他们是按照从左到右的顺序排序，当他们超过其最近的终端块祖先的宽度，他们改变到新的一行。宽度，高度，和溢出不工作，内联元素，因为他们总是与内容的宽度和高度一致。缘线高度可应用于一个特定的内嵌元素。水平外缘的变化在排列顺序的内联元素的位置。一个左边界的正面价值将离开元远离其前面的元素，和负价值将更接近它。的正价值的边缘吧将元素从下一个元素，和负价值将更接近。M缘上缘底不为内联元素的工作。和边界设置在一个特定的内嵌元素的边界和水平边界将改变内联元素的排列位置。左边框将左边的元素，下一个元素的右边框的上、下界。边框显示内外缘，但他们不会延伸到行的高度或改变元素在垂直方向的位置。这一模式的模板可以表示如下：
复制代码代码如下所示：
inline_selector {
显示：内联；
可见性：值；
行高：值；
保证金：价值；
填充值；
边框：宽度样式颜色；
}
此设计模式可应用于任何内联元素和以内联方式显示的任何元素。

1.2内联块盒模型

内联块元素是内联的排列顺序，就像其他内联盒子，但它们包含块元素的一些属性：外缘、内缘，边界的宽度和高度。内联块元素不与其他线相交。内联块状元素增加线的高度让它适应自己高度，内缘和外缘边界。宽度和高度设置高度和宽度的元素。你可以扩大或减少的另一种元素，如图片，只是把他们的宽度或高度的一个特定的值，宽度和高度：汽车：汽车也可以用来匹配的替代元素的尺寸的实际大小。假设一个显示：内联块的跨度，设置宽度和高度被调整。内联块元素，也可以用宽度和高度：汽车：汽车。宽度：100%可延长内联块元素，当它作为块元素相同。裕元将改变元素的大小从四个方向。边距顶部和边距底部将增加或减少行高。边距和边距将绘制或展开元素和它们的前后元素在水平方向上的距离。边框和填充也可以用来扩展内联元素的外围维度。

内联框模型的典型模型如下：
复制代码代码如下所示：
选择器{
显示：内联块；
行高：值；
溢出：值；
可见性：值；
宽度：值；
高度：值；
保证金：价值；
填充值；
边框：宽度样式颜色；
}
此设计模式可应用于所有内联元素。

1.3块箱模型

在块格式化的环境，黑盒模型是垂直排列，从上到下，这是块元素布置顺畅，黑箱模型可以包含其他的块盒模型，或者他们可以终止块格式化的环境，并开始一个内联格式化环境包含收件箱终端块元素创建模型。内嵌在其内箱环境的格式，但它的外包装箱必须在一块格式化的环境在这个时候。

的块元素的长度可以与它的父元素一致，也可以小于或大于它的父元素。它溢出时，其尺寸大于父元素。溢出属性用于控制浏览器如何处理溢出。在黑箱模型，该元素的宽度和高度设置宽度和高度。在这方面，宽度：自动显示，使元素的宽度与父元素，和高度一致：汽车表明它的元素的高度结束subelements.margin-left和利润会缩进或对拉伸块元件，调整块的底部和边缘element.margin-top尺寸两侧扩展可以增加或减少的距离不同的块元素之间，甚至让他们重叠。浏览器对顶部和底部的相邻块元素的利润。利润率左：汽车和右边距：汽车是用来控制水平排列的块元素，有固定的大小。如果一个块状元素设置宽度，幅度：汽车将安排在父元素的右侧块状元素。右边距：汽车将安排在父元素的左侧的块状元素，设置margin-left:汽车和右边距：同时自动将在父元素中使块元素。边框和填充也延长外宽和盒模型外的高度。黑箱模型的模式如下：
复制代码代码如下所示：
选择器{
显示块；
溢出：值；
可见性：值；
宽度：值；
高度：值；
保证金：价值；
填充值；
边框：宽度样式颜色；
}
此设计模式可用于所有块元素。

1.4桌箱模型

一个表是一个多行细胞块盒模型。桌子也位于块的元素排列，与表中的细胞是线和柱。桌上有一个外侧边缘，但没有内缘。细胞内边缘无外缘。桌子的宽度设置的宽度，在宽度是指相反的内边缘的边界周围的宽度。桌子的高度设置高度，在高度指的是边境周边的高度而不是内侧缘的缘。分辨率的大小、包，或伸展的表。当它是固定的尺寸和包装，外距离出招表和NExt元素。负外缘将相邻的元素与表重叠。表时捉襟见肘，外距离会使表订货，这将使其内部尺寸更小，减少细胞的大小。边界将会使一个表已定义的内盒尺寸或伸展。溢流不能用于表由于表不能溢出，只有表细胞溢出。溢出：隐藏的应分配给细胞以确保所有浏览器的行为是一致的，一个固定大小的细胞是overflowed.border-collapse确定相邻帧合并成一个。表布局决定表单是否为固定大小（固定）或根据内容（自动）更改。表框模式如下：
复制代码代码如下所示：
选择器{
显示：表；
可见性：值；
宽度：值；
高度：值；
保证金：价值；
边框：宽度样式颜色；
边境塌陷：价值；
表布局：值；
}
此设计模式可用于所有表元素。

1.5绝对定位箱模型

绝对定位的元素是从正常的元素的顺序分开，放在上层或下层。它位于或固定在一个相对最近的位置，祖先窗口的位置。你可以设置它的大小，包装它，或它的弹力的大小是与父元素一致。任何元素可以是绝对定位，绝对定位框模型的位置不影响其他盒子模型的位置。

集中控制的定位元素的堆叠顺序。负值放正常排列，并把它们放在顶部。值越大，越是在前面的垂直对齐方式。你可以分配上，左，下，右的绝对定位框模型。当一个值集，左将绝对定位元素的定位基准和定位根据正价值或负价值的你，以同样的方式，它也适用于其他的三个属性，设置宽度的元素的宽度和高度，设置元素的高度当利率为正，对绝对定位的箱盒模型移动到其容器的中心，当它是负面的，它将远离中心。边框和填充缩小拉伸绝对定位框模型内盒，绝对定位框模式如下：
复制代码代码如下所示：
选择器{
位置：absolute_fixed；
Z：价值；
溢出：值；
可见性：值；
左：值；
权利：价值；
顶部：值；
底部：价值；
宽度：值；
高度：值；
保证金：价值；
填充值；
边框：宽度样式颜色；
}
这种设计模式可以应用于所有元素。

1.6浮箱模型

使用float：左或浮动：允许任何元素右浮动。浮动元素也从元素的正常秩序中分离出来，并被放置在边界和相邻块元素的背景。这减少了浮动元素的父元素，它完全消失时，所有的子元素是浮动的，甚至如果浮动元素从原始元素的行列中分离出来，它收缩的队伍满足某一特定方向。左侧的浮动将缩小相邻内容的权利，和右浮动将允许被缩进到左边的内容。浮动元件位于垂直于原来的位置。在父元素的内边缘，位于日右或左水平。浮动元素是在原位置布置在垂直方向。当浮动元素不接近下一个浮动元素，它向下移动到底部，位置，大小，内边缘，边界，和浮动元素的外边缘会影响相邻的浮动元素相邻的内联内容的位置，宽度和高度是用来设置浮动元素的宽度和高度。边缘有一个独特的浮动功能。积极的外部边缘会使浮动元素离原来的位置，让其他的浮动元素和内联内容远离它，和负的外缘正好相反。边框和填充增加浮动元素的外箱尺寸。左浮动左右padding将带来它的权利，和正确的距离和右边缘将给其他浮动元素和在右边的在线内容的右侧，右浮动元素，它是相反的。浮箱的模式如下：
复制代码代码如下所示：
选择器{
浮：left_right；
宽度：值；
高度：值；
Z：价值；
保证金：价值；
填充值；
边框：宽度样式颜色；
溢出：值；
可见性：值；
}
这种设计模式可以应用到元素中。
二：定位模型的学习

CSS提供了放置元件6定位模型：静态的、绝对的，固定的，相对的，浮动的，和相对浮动。静态定位模型可以找到内联内联块，块，和表盒模型。绝对定位模型可以找到绝对的盒模型。浮动定位模型可以定位浮箱模型的相对位置可相对于任何盒子模型在绝对的盒模型。相对浮动定位模型可以用来定位浮箱模型。每个位置的模型使用相同的属性设置控件的位置。

2.1静态定位

允许元素被安排在内联和块元素的顺序，一个接一个，位置：静态可应用于元素。在块状元素，一个或多个块状或内联元素垂直解析下来。在内联元素、文本和对象的解析水平的静态元素的开始。位置是在前面的静态要素确定的模式如下：

内联静态元素：
复制代码代码如下所示：
inline-selector {
位置：静态；
行高：值；
左缘：值；
保证金权利：价值；
}
海量静态元素：
复制代码代码如下所示：
block-selector {
位置：静态；
宽度：值；
高度：值；
保证金：价值；
}
2.2绝对定位

绝对元素允许您精确地控制相对于它们最近的祖先元素的位置。绝对元素在元素的正常位置进行解析。它就像一个独立的盒子模型。不同于浮动元素，绝对元素不移动，你可以使用绝对位置：解析任何元素作为一个绝对的盒模型。使用宽度和高度来设置它的大小。比例最近的盒模型的相对位置，而不是父元素。你可以分配给左、右、底部，和最高的价值，并把它放到最近的祖先元素的一面。保证金允许的元件侧被定位相对于最近的祖先元素侧偏移。用z-index控制元素的堆叠顺序，有一个大的Z指数价值元素将在用户附近的位置层该模式如下：
复制代码代码如下所示：
选择器{
位置：绝对；
Z：价值；
宽度：值；
左：值；
权利：价值；
顶部：值；
底部：价值；
保证金：价值；
}
2.3固定位置

想离开单元从其位置层固定在窗口中的位置，或者你想让它在元素的原始顺序的位置。当窗口滚动，你不希望它是伴随着它。这就是所谓的一个固定位置的元素或一个固定的元素你可以使用位置：固定转换任何元素到一个固定位置的元素。固定元件设置相对于窗口而不是最近的位置的其他祖先元素。所以如果你固定在原来的排列顺序位置的元素，它不会移动，当窗口滚动。该模式如下：
复制代码代码如下所示：
选择器{
位置：固定；
Z：价值；
宽度：值；
高度：值；
保证金：价值；
左：值；
顶部：值；
底部：价值；
权利：价值；
}
2.4相对定位

为了在正常排列位置的元素的堆叠顺序控制，它可以与位置相对定位的元素relative.the相对位置不是从正常的元素排列的分离，也不改变正常排列的形状。例如，如果一个内联元素跨越多行（大大于或等于一行），当它的相对位置，它将保持这种独特的布局，它可以选择性地抵消原来安排的相对位置的元素，使用左上。指定位置：相对于任何元素，所以绝对的后代元素可以定位相对。该模式如下：
复制代码代码如下所示：
选择器{
职位：相对；
Z：价值；
左：汽车；
顶部：汽车；
}
三：框式探究学习

在CSS2.1，块级元素只能是矩形的。当我们需要计算一个块级元素的整体规模，我们需要同时计算内容区域的长度和宽度（内容），连同外缘、内缘和单元边界盒模型。可分为标准W3C盒子模型和IE盒模型。标准W3C盒子模型图示如下：

图1

盒模型的范围包括边缘、边界、填充内容，和部分内容不包含其它部分。也就是说当宽度和高度属性，我们设计一个块级元素的CSS等。箱{宽度：100px；身高：100px }，其宽度和高度刚才的内容集的一部分，这是在顶部和底部填充填料上长之间的区域（区域之间的填充和填充右左宽）。它不在于内容，内边缘、边界的总和。和IE盒模型如下：

图2

框模型的范围包括边距、边框、填充和内容。不像标准的W3C的盒子模型，IE盒模型的部分内容包含边框和填充。也就是说，当我们设计的宽度和高度在CSS，一个块级元素如属性。箱{宽度：100px和高度：100px }，宽度和高度的内容的总和，利润和边界。

一种自动宽度，即静态定位元素没有位置，和相对定位元素，计算宽度的方法是减少他们的包含块的宽度，所有的外缘，水平边距，边框和该元素的滚动条。也就是说，从块的宽度，我们可以摆脱水平外缘、内缘，宽度的边框和滚动条是否存在。举一个例子，
复制代码代码如下所示：
test1 {。
身高：200px；
填料：20px；
保证金：30px；
边境：10px灰色点；
背景：红色；
}
在这里，没有设置位置。试验性质，即默认位置：static.among，HTML代码是静态定位或相对定位，结果如下：

图3

块的宽度是自动扩展以填充其父元素的宽度区域。

但浮动元素和绝对定位元素则相反，他们收缩使包着的内容。假设的例子the.test1重写为：
复制代码代码如下所示：
test1 {。
身高：200px；
填料：20px；
保证金：30px；
边境：10px灰色点；
背景：红色；
位置：绝对；
}
html不改变，则结果是：

图4

图1和图2，我们可以清楚地看到对元计算所需要的面积大小，已被列入计算。但事实上，在纵向非定位元素相邻的外部距离会叠加较大宽度的外缘的价值，不是两个的总和这意味着当计算实际需要的存储单元的面积，它不是从外缘最宽的距离，只有外将生效的边缘，和狭窄的外缘将叠加与较大的一个。如下图：

图5

此外，当一个元素的宽度设置为100%，也就是说，对父元素的内容的宽度是100%，它不应该有任何的外缘，内边缘或边界，这不仅使地区，投入了较大的面积，这是经常被忽视的设计师和严重影响页面的布局，使内容物溢出或元素应该比他们大。举个例子：
复制代码代码如下所示：
箱{。
背景：红色；
身高：200px；
宽度：100%；
}
含有{。
背景：黄色；
身高：220px；
宽度：300px；
}
HTML代码如下：：
也就是说，在没有边距和填充的情况下，100%的内容可以正确填充父元素：
复制代码代码如下所示：
箱{。
背景：红色；
身高：200px；
宽度：100%；
填料：10px；
保证金：10px；
}
剩下的都是一样的，结果是：
在这一点上，元素放错了位置，只出现左边的边界。解决方案是避免在大多数情况下为宽度属性添加特定的值，只使用外边距、内边距和边框。

四：总结

本周，我主要研究了盒子模型和HTML定位模型，进一步了解了盒子模型在每个属性和属性之间的关系，帮助我在应用后的几天内，同时对浏览器的CSS解析进行了进一步的研究。