css的布局方式

一、布局方式：固定布局、自适应布局、响应式布局、流式布局

1、固定布局：

固定布局可以固定最外层宽度布局，也就是最外层设置1150px(具体值自己设定) 当页面缩小，小于1150px那么 将出现滚动条，而不会缩小页面。http://www.mi.com/index.html（小米官网）；

2、自适应布局：

自适应布局，就是所有的宽度都不是固定的，用%，em，rem等单位来达到自适应的目的。也就是 当屏幕尺寸缩小，内容也随着缩小，这里需要配合媒体查询或者是js脚本等。（即每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。）

3.响应式：

响应式就是响应不能的设备，展现不同的页面效果；

<meta name=”viewport”content=”initial-scale=2.0,width=device-width，user-scalable=no” />

initial-scale=2.0将页面放大两倍。

device-width设备的宽度。

user-scalable=no禁止缩放。

Meta(详细描述meta标签): http://wenku.baidu.com/view/bc0ee0d049649b6648d7478e.html

 

CSS媒体查询（响应式）:

定义：媒体查询是向不同设备提供不同样式；

http://www.adobe.com/cn/devnet/dreamweaver/articles/introducing-media-queries.html

 

<!--link元素中的CSS媒体查询 -->

<linkrel="stylesheet" media="(max-width: 800px)"  href="example.css" />

 

<linkrel="stylesheet" media="screen and (animation)” herf=“…”

如果设备支持CSS动画，那么就能执行这个外部样式表文件。

 

<!--样式表中的CSS媒体查询 -->

<style>

@media screen and(max-width:240px){

  body{font-size:medium;}

}如果设备的浏览器的最大宽度是240px，则页面将使用中号字体。

 

 

多个CSS属性判断可以用关键字and连接：

@mediascreen and (min-width:1024px) and(max-width:1280px){

      body{font-size:medium;}

}

</style>

4.流式：

也就是div自行排列 比如[div 宽是100px  那么我浏览器宽是500px 我们可以排列5个div 如果浏览器宽是300px 那么div就会自动排列成2行 第一行是3个div 第二行是2个div]

 

静态、自适应、流式、响应式四种网页布局有什么区别：

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

固定和流动布局的不同点

这种布局有一个设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。重要的是容器（外包裹）元素是设置为不能移动的。无论访问者屏幕的分辨率是多少，网页都显示为和其它访问者相同的宽度。

上图展示的是一个固定宽度布局的基本轮廓。里面的三列分别是520，200和200px宽度。960px已经成为现代web设计的标准，因为大多数站点用户被假定为使用1024×768分略率。

 

自适应布局，主体部分都是用了百分比宽度，因此可以自适应用户的分辨率。

上图是一个简单自适应布局的轮廓。虽然有些设计师可能给流动布局中某些元素设置了固定宽度，比如margin，只要主体元素是百分比宽度，就可以让布局自适应适应各种分辨率。

二、标签语义化：

语义化html，正确使用标签，充分利用无兼容性问题的html自身标签。

三、css的3种布局方式

1、文档流布局方式：

这是最基本的布局方式，就是按照文档顺序一个一个地显示，块元素独占一行，内联元素共享一行。

2、浮动布局方式：

如果不定义浮动的话，各个div的内容在页面上是由上向下排列的(http://blog.csdn.net/xxssyyyyssxx/article/details/49129595)。
而如果某个div定义了float: left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。
同样，如果定义了float:right，那么这个div就会出现在上层div下最靠右的位置，而与它同等级，但列在它前面的div就会显示在他的左侧。

某个元素浮动之后，其后面的元素就当其不存在而占用其原来的地方，按照原来文档流布局方式布局。可以通过清除（左或右）浮动清除掉浮动元素对后面的影响（clear）。可以向左向右浮动，在左边或者右边离其父元素的左边或者右边父元素的padding距离。浮动布局的经典就是列表横排。

浮动元素对父元素的影响：

如果父元素没有设置高度，其高度不会自动增加。

div是块级元素，默认的宽为100%,也就是你div外面的元素有多宽，div就是多宽。
div的高默认为内部元素的高，也就是DIV里面的元素有多高，div就是多高。当div里面的元素为浮动元素时候就会出现div高为0，所以这时候就得清除浮动 因为浮动元素脱离了文档流，所有包围图片和文本的 div并不占据空间。

那么如何让父类包围元素在视觉上包围浮动子元素呢？或者，更抽象层次的说，当一个盒子内部的子盒子由于设置了float属性导致父类盒子无法被撑开，如何撑开父类盒子呢？我们可以对某个元素使用clear:both撑开父类盒子：

清除浮动的三种方法：

    1.W3C推荐，在父元素的末尾添加一个clear：both的空元素，强迫父元素增加高度以容纳所有浮动的元素。

     2.最简单的，使用overflow：hidden，但是对于子元素通过position定位的不起作用。

         overflow：默认visible，既不剪切也不滚动；auto，自动；hidden，隐藏多余部分；scroll：滚动。

    3.利用伪对象after。

3、定位，通过position属性定位

position的四个属性值：

1.   relative

2.   absolute

3.   fixed

4.   static

 

下面分别讲述这四个属性。

<divid="parent">
     <div id="sub1">sub1</div>
     <div id="sub2">sub2</div>
</div>

1. relative

relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系

标准流下如图：

 

如果设定sub1一个relative属性，比如设置如下CSS代码：

#sub1
{
    position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;
}

运行结果如下：

我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。

对于此，只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。

随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。

如果此时把sub2的position也设置为relative，会发生什么现象？此时依然和sub1一样，按照它原来应有的位置进行偏移。

注意relative的偏移是基于对象的margin的左上侧的。

2. absolute

这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

（1）当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。

注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。

接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。

（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。

如图：父元素设置了定位，且父元素设置了padding值30px，sub1的定位就相对于父元素的定位；

如果父元素没有定位但是有padding值，则相对于浏览器左上角定位；如图：

3. fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

4. static

position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。