网页设计布局的方法
所谓T型布局，使指页面上部为横条（网站标志+广告条）、下方左半部为主菜单、右由半部分显示内容的布局。因为看上去像英文字母“T”，所以称为T型布局。下面介绍网页设计布局的方法，希望这些内容对您有帮助。
l T型布局
所谓T型布局，使指页面上部为横条（网站标志+广告条）、下方左半部为主菜单、右由半部分显示内容的布局。因为看上去像英文字母“T”，所以称为T型布局。
T型布局的优点是页面结构清晰，主次分明，强调秩序，能给人以稳重、可信赖的感觉，比较容易上手。缺点是规矩呆板，如果细节和色彩搭配上不注意，容易让人乏味。
2、口型布局
口型布局的页面上下各有一个广告条，左侧是主菜单，右侧放置友情链接等内容，中间是主要内容。
口型布局的优点是充分利用版面，信息量大。其缺点是页面拥挤，不够灵活。
3、POP布局
POP引自广告术语，是指页面布局象一张宣传海报，以一张精美图像作为页面的设计中心，在适当位置放置主菜单，如图（c)所示。这种布局不讲究上下左右对称，但要平衡和有韵律，能达到强调、动感、高注目性的效果，常用于时尚类网站。其优点是漂亮吸引人，缺点是速度慢。
网页设计的布局要点
一、基于模块或网络
有些排版方式是建立在模块化或类似网格的结构上的，在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用，它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。
二、无边界
无边界的布局模式，只是画出了一个大致的框架图，也许你只是想说这只是框架，因为设计规划前期很多素材还并不完善。一段文字和一张图片，甚至一个图标，在你进行布局的时候，由于素材并不是立刻手到擒来，因此布局总是喜欢用一个个矩形来代表一段文字或一张图片，这本没有错，但这个做法也会让人陷入“框架陷阱”。
可以肯定的是，这样设计网页并没有多少呼吸的空间，整个网页都被信息所填满，如果稍微改变一下布局的元素大小和位置，其实就会展示出不一样的版面效果，这样的排版也是更灵活的。
三、垂直分割
垂直分割式的布局在上一篇文章中我们也有提到过，使用垂直分割布局，原因有两个。有时候在一套设计中，的确存在两个同等重要的主体元素。网页设计的通常方法，是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢？这种方式，可以让你突出两者，并让用户迅速在其中做出选择。第二是要表现出重要的两面性。
四、几何图形
网页设计布局几乎都是由几何构成的，三角形、圆形、矩形等等，都经常被使用。加之显示屏本身就是矩形，因此在布局时最常用到的也是矩形。
在实际的设计过程中一定是花样百出的，绝不可能用一两种布局模式就轻松完成，多思考多改变，总不会出错。但不管如何变化设计方式，最终还是要围绕着“美观”与“用户”进行的。
网页布局方式
网页布局方式
标准流（文档流/普通流）排版方式
浮动流排版方式
定位流排版方式
图文混排
什么是图文混排，怎么样实现环绕效果，实现的原理是什么
清除浮动
为什么要清除浮动？
清除浮动是什么意思？
在企业开发怎么应用？
有几种清除浮动的方式？分别有什么优缺点？
解答
确保两个浮动元素独占不同的行，即第二个浮动元素不去找（靠在）第一个浮动元素边上
思路
我们希望而且也认为我们所见的复杂事物都是表现，其背后一定有原理在驱动，而掌握了原理，我们就能更好地掌握事物表现出来的现象。这几乎是一种下意识的反应。
但实际上我们应该细化这个问题：是否存在一类现象和图文混排现象是相似的，而且可以用同一种CSS规律进行解释
大部分时候我们下意识地想要进行原理的解释是因为我们没有学习过，我们学过css的三大元素，学过盒子模型，他们是有涉及到排版的，当我们学标准流、浮动流、定位流的时候自然而然地会去想，这些排版的规律是否只是元素本身规定的表象，自然地会去追求其原理
而某一种流排版方式中的是否能实现环绕效果和图文混排更是细枝末节中的细枝末节
有时候我会看得很快，甚至不做笔记，因为我遇到了问题，而这个问题并没有被解释清楚，一来我是想，没有任何问题都能在刚提出的时候被解决，你可能需要一些背景知识才能去解决，甚至你可能需要横向对比，阅历过其余相关的知识才能更好地了解
但是同时也有一个问题：你怎么确认你的老师你读的书会给你解答
像是浮动float究竟和CSS三大元素的属性有什么关系？比起三大元素的属性他会更本质吗？只不过因为之前因为种种原因，甚至是考虑到入手难度的情况下没有一开始就去讲解
我们设置一个div.box1宽度为300，高度为200,设置一个div.box2宽度为300，高度为200,两个都设置为float:left，当浏览器宽度为600时，两个div并列显示；当浏览器宽度为500时，box2被挤到了下方，box1能够完全被显示；当浏览器宽度为200时，box2被挤到下方，box1的显示需要滚动滚动条才能完全看得清楚，为什么会是这样的
半桶水的时候是才最容易响，因为不想空桶的时候什么东西都能完全接受而不产生疑问，也不是填满了知道其前因后果，懂得一些，但是懂得又不够多
设计理念，为什么会选择这样设计而不是其他的设计方式？(本质上还是最求核心和原理）以后还会不会发生改变
html的布局
1、流动布局（html网页默认的布局方式）
特点：
1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
2、内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行）
2、浮动布局（float)
特点：默认布局下，块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示。就需要使用float来实现。
3、层模型
特点：如果我想一个div在另外一个div的上面，我们就需要可以使用绝对定位来完成，层模型的三种定位方式relative、absolute、fixed
absolute
需要设置position:absolute(表示绝对定位），这条语句的作用将元素从文档流中拖出来，
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
relative
如果想为元素设置层模型中的相对定位，需要设置position:relative(表示相对定位），
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素（并且元素像层一样浮动了起来），
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
fixed
fixed：表示固定定位，与absolute定位类型类似，
但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，
除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，
这与background-attachment:fixed属性功能相同。
注意
在使用z-index属性的时候，只有元素使用了position属性的，才具有z-index属性。没有使用position的属性的元素是没有z-index属性的，设置了也没有用
