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是以某种特殊的方式为内联元素设置边框，水平的边框会改变内联元素在排列中的位置。左边框会令元素靠左，右边框使得下一个元素靠右。而上下边框则会显示于内边距之外，但是没有扩展到行高或改变元素在竖直方向上的位置。该模式的模板可以如下表示：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表