一、盒子模型
所谓盒子模型就是说一个元素它具备四大属性： 内容（content）、内填充（padding）、边框（border）、外边距（margin）
内容会有一个宽度和高度，内容与它所在的容器会有上下左右四个方向的内填充，内容所在容器会有上下左右四个方向的边框，容器与容器之间会有上下左右四个方向的外边距
二、3D盒子模型
三、W3C标准
W3C标准主要包含三大部分，结构化语言标准（HTML+XML）、表现标准（CSS）以及行为标准（JS，ECMAScript），倡导结构、表现、行为三者分离。
结构、表现、行为三者分离其实是一种网页布局的思想，就是在设计一个HTML页面时，先不考虑表现如何，以及会有什么效果与交互，仅仅把这个HTML页面包含的内容用符合语义的标签描述下来，然后再通过CSS样式进行装饰和布局排版，再最后通过使用JS脚本代码加上动画效果和交互动作。
四、布局模型
在W3C标准中，主要有三大布局模型：标准文档流模型、浮动布局模型、定位布局模型。
六、标准文档流模型
概念：所谓的标准文档流布局模型是指在文档中的元素会在自身特征的基础上，遵循从上到下，从左到右的一种默认的布局模型。
问题：文档中的元素会有脱离标准文档流的情况（如对元素进行了绝对定位），那么如何判断一个元素是否还在标准文档流中呢？
答：判断一个元素是否还存在于标准文档流中的依据是，该元素是否在标准文档流占有空间、位置，对其他元素是否产生影响。
七、浮动布局
- 使用：
float：left | right | none；
left ： 向左浮动
right： 向右浮动
none： 不浮动 浮动的特点：
1). 当一个元素设置了浮动后，它会随着您设置浮动的方向平移到该元素所在的父包裹层的最边边。
2). 当一个元素设置了浮动后，会对紧随其后的元素产生影响，显示上会使紧随其后的这个元素紧挨着它显示。
3) .当一个元素设置了浮动后，并且该元素没有指定宽度时，元素的宽度会根据元素内容的大小进行调节。
4). 虽然浮动后的元素大小位置会产生变化，但它仍占标准文档流的空间，所以浮动后的元素没有脱离标准文档流，严格点来说，应该是没有完全脱离标准文档流。清除浮动
概念：清除浮动带来的影响，应用在受到浮动影响的元素上。
因为当一个元素设置了浮动之后，会对紧随其后的元素以及父包裹层元素产生影响，所以必要时有清除浮动的动作。
对紧随其后的元素所造成的影响：会使紧随其后的元素紧挨着它显示
对父包裹层元素产生影响：在父包裹层没有明确指定高度的情况下，如果它的子元素设置了浮动，会导致它的高度塌陷。
清除浮动的方法：clear：both|left | right- 设置宽度值，然后
overflow：hidden；
注：对于父包裹层高度塌陷只能采用第二中方法。
对于父包裹层高度塌陷的原因：
网络上大多数人都说，之所以会高度塌陷，是因为浮动后的元素会脱离标准文档流，所以导致父包裹层高度塌陷；但我不觉得浮动后的元素会脱离标准文档流，我觉得是因为设置了浮动后的元素位置和大小会改变，导致它的父包裹层元素无法为其扩展高度。
八、position定位布局
position属性共有四个属性值分别为：static、relative、absolute、fixed；
- static：默认状态，相当于没设置定位。
相对定位(relative)特点
1). 相对自身的初始的位置进行偏移
2). 偏移后元素的大小不变，并且初始化的大小、位置还留在标准文档流中
2). 随即拥有偏移属性（top、left、bottom、right）、z-index属性，并且默认的偏移属性值为0px；
3). 还处于标准文档流中绝对定位特点
1). 建立了以包含块为基准的定位
2). 偏移量参考基准：
3). 有已定位祖先元素：参照距离最近的祖先元素
4). 无已定位祖先元素：参照html
5). 如果没有设置宽度时，元素的宽度会根据内容的大小进行调节
6). 完全脱离文档流
7). 随即拥有偏移属性、z-index属性，并且默认的偏移属性值为0px；fixed定位与absolute定位的区别
主要是参照的基准不同，无论如何，fixed参照的都是浏览器的窗口进行偏移。
PS:
- 本文属于本人原创文章,是本人在慕课网上学习网页布局类课程的总结,要想知道更多内容请到慕课网学习,转载请注明出处，如果你觉得这篇文章对你有帮助或启发，也可以来请我喝咖啡。
- 利益相关：本篇文章所有提到的商业品牌或网站链接均为笔者随意想到的,自己使用的，无任何广告费用。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
