前端页面制作思路

项目中css的页面布局，需要屡顺一下思路，在继续下面的学习。温故而知新！ W3C标准：是万维网制定的一系列标准，包括结构化标准语言（html、xml），表现 标准语言（css），行为标准语言（DOM，ECMAScript)组成。这个标准倡 要将结构，样式，行为分离。 在网页制作中，面对设计图，网页制作人员一般要遵循的原则： 先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化， 然后在考虑布局和表现形式。 今天主要对css的页面布局做过总结： css的页面布局模型分为三大种模式： （1）流动模型（标准文档流）（2）浮动模型（定位） （3）层模型 一、流动模型（标准文档流） 流动模型是浏览器默认的一种网页布局模式，布局方式：块级元素自上向下排列，行级元素子左向右排列，如下图： 二、浮动模型（float） 最初提出浮动模型的初衷是：为了实现文字环绕的效果； float属性是一个魔鬼：它会让它的父元素高度塌陷。 float属性也有包裹性：把一个容器设置了float属性，就会将器内容包裹起来。大小随着 里面的内容变化而变化。 float没有脱离文档流，它移动时会把旁边的人挤走。 注意：当我们把一个不是块级的元素设置为了float属性时，就会自动将该元素block化。 将元素设置float属性（设置方法：float:left或者floa:right） 1、该元素会一直向左移，或者一直向右移动直到碰到容器为止。 2、一个块状元素设置了float属性之后，它只影响临近它的后面的那个元素。 3、如果一个元素没有设置宽度，但是它设置了浮动属性，那么这个元素的宽度随着它 容的变化而变化。 浮动这个恶魔有的时候让我们的呈现的页面的效果不理想，此时要消除浮动属性： 对受浮动影响的元素消除浮动的影响的方法：（例子：如慕课网中点击打开链接） 1、加入clear:both;或clear:right/left;:一个元素被设置了float属性，如果不像让紧挨着它的元素受到影响跟着移动，就在 这受到影响的元素上加个clear:both;属性。 2、

afads

上面的情况，为img设置了浮动，如果不想让紧挨着div中的文字受到影响，我们可以对 外层包裹“主”div设置一个overflow:hidden;这样这个主div就被消除了float的影响，不会 就会自成一行，所以下面的文字不会跟着浮动到图片旁边。 利用float实现的两列布局（三种情况）：程序：程序连接 1、左侧固定，右侧自适应： 左侧设置属性：{设置width，设置float：left} 右侧设置属性：{padding-left/margin-left} 2、右侧固定，左侧自适应： 此中情况还分为两种情况： （1）html中的代码和我们的感官认知不同，先