做SEO
我们是认真的!

【seo广州】HTML设计模式日常学习笔记整理

HTML 设计模式 学习 笔记

本周我主要学习了HTML的设计模式,现将我的学习内容总结如下:

一.盒模型的学习

CSS中有一种基础的设计模型叫做盒模型,它定义了元素是如何被看做盒子来解析的。我主要学习了六种盒模型,分别为内联盒模型(inline box),内联块状盒模型(inline-block box),块状盒模型(block box),表格盒模型(table box),绝对定位盒模型(absolute box)和浮动定位盒模型(floated box)。

盒模型设计模式是CSS中内建的,它定义了如下属性之间的关系:边界、边框、填充和内容。每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;边框有大小和颜色之分,我们可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离,内容为盒子里装的东西,而填充式盒子内空余地方所填充的材料。

1.1内联盒模型

内联盒模型是以内联的排列顺序进行解析的,它们按照水平从左至右的顺序进行排序,当超过它们最近的终端块状祖先的宽度时,便换到了新的一行。width,height和overflow在内联元素上不起作用,因为它们总是与内容的宽度和高度相一致。margin和line-height可以以某种特殊的方式应用到内联元素上。水平外边距改变了内联元素在排列顺序中的位置。一个margin-left的正值会令元素远离它前面的元素,负值则会把它拉近。margin-right的正值会令元素远离它的下一个元素,负值则会把它拉近。margin-top和margin-bottom对内联元素是不起作用的。而border是以某种特殊的方式为内联元素设置边框,水平的边框会改变内联元素在排列中的位置。左边框会令元素靠左,右边框使得下一个元素靠右。而上下边框则会显示于内边距之外,但是没有扩展到行高或改变元素在竖直方向上的位置。该模式的模板可以如下表示:


复制代码


INLINE_SELECTOR{
display:inline;
visibility:value;
line-height:value;
margin:value;
padding:value;
border: width style color;
}

此设计模式可以应用于任何的内联元素和任何以内联方式显示的元素。

1.2内联块状盒模型

内联块状元素是位于内联排列顺序中的,就像其他的内联盒子一样,只不过它还包含了一些块状元素的属性:外边距、边框、内边距、宽度和高度。内联块状元素是不会与其他行交叉的。内联块状元素会增添行高以让其适应自身的高度、内边距、边框和外边距。width和height设置元素的高度和宽度,你可以扩大或缩小一个替代元素,例如图片,只要把他们的width或者height设置为某一个具体的值就可以了。也可以用width:auto和height:auto令替代元素的尺寸与实际尺寸相符。假设一个display:inline-block的span,设置它们的width和height便可调整大小了。也可以用width:auto和height:auto把内联块状元素包裹住。可用width:100%把内联块状元素拉长,此时它与块状元素是一样的。而margin元素会从上下左右四个方向来改变元素的大小,margin-top和margin-bottom会增加或减少行高,margin-left和margin-right会在水平方向上拉近或扩大元素与它前后元素的距离。border和padding也可以用于扩展内联元素的外围尺寸。

内联盒模型的典型模式如下:


复制代码


SELECTOR{
display:inline-block;
line-height:value;
overflow:value;
visibility:value;
width:value;
height:value;
margin:value;
padding:value;
border:width style color;
}

此设计模式可应用于所有的内联元素。

1.3块状盒模型

在块状格式化环境下,块状盒模型是竖直方向从上到下排列的,这是块状元素的正常排列顺利。块状盒模型可以包含其他的块状盒模型,或者它们可终结块状格式化环境,并开始一个包含内联盒模型的内联格式化环境。终端块状元素在其内盒里创建了一个内联格式化环境,但是它的外盒此时一定是处于块状格式化环境下。

块状元素的长度可以与它的父元素一致,也可以小于或大于它的父元素。当它的尺寸大于父元素的时候,它就会溢出来。overflow属性就是用来控制浏览器如何处理溢出的。在块状盒模型中,还是用width和height来设置元素的宽度与高度。其中,width:auto表示它使得元素的宽度与父元素一致,height:auto表示它使得元素的高度包裹住它的所以子元素。margin-left和margin-right会缩进或外延一个被拉伸的块状元素的两侧,它们会调整块状元素已设置的尺寸。margin-top和margin-bottom可以让不同块状元素之间的距离增大或减少,甚至可以让它们重叠。浏览器会抵消相邻块状元素的顶部和底部外边距。用margin-left:auto和margin-right:auto来控制已固定了尺寸的块状元素的水平排列。如果某个块状元素设置了width,margin-left:auto会令块状元素排列在父元素的右侧,margin-right:auto会令块状元素排列在父元素的左侧。而同时设定margin-left:auto和margin-right:auto会令块状元素位于父元素的中间。border和padding也会扩展盒模型的外宽和外高。块状盒模型的模式如下:


复制代码

seo广州】HTML设计模式日常学习笔记整理
未经允许不得转载:广州seo小雨 » 【seo广州】HTML设计模式日常学习笔记整理