一、布局方式:固定布局、自适应布局、响应式布局、流式布局
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属性时,会按照正常的文档流进行排列。