第二次讨论

【响应式设计】

集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。

响应式布局:

meta标签的实用:设置布局宽度等于设备宽度,布局viewport等于度量viewport

<meta name="viewport" content="width=device-width,initial-scale=1">

【【布局】】

【水平居中】

一、text-align和inline-block的联合使用:

text-align属性:通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。(从而child为文本行内元素,parent为块状元素,可以通过display来设置)。

.parent{text-align: center;} //父元素
.child{display: inline-block;}//子元素

不过此方法兼容性比较好,IE浏览器接收。不过代码较多,同时要设置父元素和子元素。

二、使用margin:0 auto设置

.child{width:100px;margin:0 auto;}//必须要有宽度

margin设置的是块级元素的居中。兼容性好,不过需要设置宽度。

三、display:table设置

.child{display:table;margin:0 auto;}

此方法只需对自身进行设置,代码简短。不过在IE6、7上,需要进行调整。

四、使用绝对定位

.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);}

transform:translate。移动transform在translation的方向和距离。简单的说,向某方向移动物体多少距离。

不过这个方法兼容性不好,要IE9 以上。

【垂直居中】

一、vertical-align方法

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell。

二、使用绝对定位

.parent{position:relative;} 
.child{positon:absolute;top:50%;transform:translate(0,-50%);}

注意与水平居中的区别

【水平垂直居中】

一、利用vertical-align,text-align,inline-block实现

.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}

二、使用绝对定位

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

由上可知,绝对定位可以实现任何方式的居中,不过还要考虑兼容性问题。

【多列布局】

一、左列定宽,右列自适应:

(1)使用float+margin

.left{float:left;width:100px;}
.right{margin-left:100px;}

经试验,如果不用margin的话,必须设置高度。IE6会有3px的bug

(2)使用table实现

.parent{display:table;table-layout:fixed;width:100%;}
.left{display:table-cell;}
.right{width:100px;display:table-cell;}

二、两列定宽,一列自适应

(1)使用margin+float

(2)利用float+overflow实现

.left,.center{float:left:width:200px;}
.right{overflow:hidden;}

(3)利用table实现
三、两侧自适应,中间定宽(网页布局常用)

(1)使用margin+float

.left{width:100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}

(2)利用table实现

四、一列不定宽,一列自适应

(1)利用float+overflow实现

.left{float:left;background-color: red;height: 100px;}
.right{background-color: blue;overflow: hidden;height: 100px;}

不需要设定高度。会自适应。

五、多列式分布

(1)div+float

六、九宫格布局

(1)div+table

【css性能优化】

一、模块化:让代码高度重用,提高开发效率。

      模块与模块之间尽量不要包含相同的部分,如果有,提取出来,拆分成一个独立的模块。

二、css命名:用英文。大小驼峰、下划线等。驼峰表示区别不同单词,下划线表示从属关系。

      避免重复命名,自己的代码前加上属于自己的前缀。

三、class的使用:多组合,少继承。

四、上下margin处理:如果不确定模块的上下margin特别稳定,最好不要将它写在模块的类里,而是使用类的组合,单独为上下margin挂用于边距的原子类(如mt10、

          mb20)。模块最好不要混用margin-top和margin-bottom,统一使用某一个。

五、低权重原则:避免滥用自选择器。当不同选择符的样式设置有冲突时,会采用权重高的选择符设置样式。选择符权重相同,为就近原则。

        权重原则:HTML标签为1(如p),class为10,id为100。css选择符保证权重尽可能低。

        使用子选择器,会增加css选择符的权重。新添class更利于维护。

六、css sprite技术:将网站的多张背景图片合并到一张大图上。利用background-position属性来展示我们需要的部分

          图片加载会发出HTTP请求,而使用css sprite就减少了HTTP请求次数。减轻服务器压力。

          只能合并背景图片。对于横向和纵向都平铺的图片,不能使用css sprite,只能或横向,或纵向。排版要尽量紧凑。

          缺点:降低开发效率和增大维护难度,是否使用取决于网站流量。

七、css常见问题:(1)编码风格:多行式可读性强,不过会增大css文件大小,一行式可读性较差,不过利于提高开发速度,减小css文件大小。推荐一行式。

         (2)id和class:同一网页,相同id只能出现一次,但是class无限制。id的权重大于class。不过原生JS提供getElementId()方法,不支持class。

                使用id会限制网页的扩展性。一般情况下,建议尽量使用class,少用id。

         (3)css hack:IE条件注释法(兼容性最好,增加了开发和维护成本)

                 选择符前缀法(增强了可维护性,不过兼容性欠佳,不能用于内联样式)

                 样式属性前缀法(集合度更高,代码更加精简,可维护性更强,但存在兼容风险,可用于内联样式)

         (4)解决超链接访问后hover样式不出现的问题:a标签四种状态的排序问题,love hate原则,即l(link)ov(visited)e h(hover)a(active)te。

         (5)haslayout:IE浏览器的专有属性,用于css的解析引擎。很多bug都因为haslayout没有被自动触发。最好的解决方法:zoom。

         (6)块级元素和行内元素:使用display转换。

         (7)IE6、7不支持display:inline-block。

         (8)relative、absolute和float:不要滥用。

【css预处理】

用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

第二次讨论——响应式设计、布局技巧、css性能优化、css预处理的更多相关文章

  1. 移动端和pc端,响应式设计布局

    1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...

  2. 响应式设计:理解设备像素,CSS像素和屏幕分辨率

    概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...

  3. 响应式设计的5个CSS实用技巧

    正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了.现在我分享在编码时常用的五个CSS技巧并举例说明.这些技巧都是使用简单 ...

  4. Windows10 UWP开发 - 响应式设计

      Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...

  5. CSS3知识点整理(五)----响应式设计及其他属性

    介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...

  6. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  7. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  8. HTML5、CSS3响应式设计——笔记

    1.1.响应式网页设计 响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(EthanMarcotte)提出.他在A List Apart 发表了一篇开创性的 ...

  9. web设计经验<一> 提升移动设备响应式设计的8个建议

    今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...

随机推荐

  1. Linux中最受欢迎的邮件传输代理(MTA)

    MTA(Mail transfer Agent) -对于服务器管理员来说,邮件传输代理是最为重要的工具.MTA的主要工作就是将电子邮件从一台主机发送到另一台主机.MTA使用SMTP(简单邮件传输协议) ...

  2. 使用LR11录制手机脚本

    要使用Loadrunner11录制手机脚本,需要先搭建好测试环境:  能够正常使用的LoadRunner11:  安装一个LR11的补丁包,用于手机录制:  pc端和手机端的网络在同一个网段.  ...

  3. MVC源码解析 - 配置注册 / 动态注册 HttpModule

    本来这一篇, 是要继续 Pipeline 的, 但是在 Pipeline之前, 我看到了InitModules()方法, 所以决定, 在中间穿插一篇进来. 这一篇来讲一下 IHttpModule 的加 ...

  4. Linux中top和free命令详解(转)

    top:命令提供了实时的对系统处理器的状态监视.它将显示系统中CPU最"敏感"的任务列表. 该命令可以按CPU使用.内存使用和执行时间对任务进行排序: 而且该命令的很多特性都可以通 ...

  5. java基础面向对象之类与对象

    java基础面向对象之类与对象 2017-01-14 1.面向对象的基本概念 以一种组建化的形式进行代码设计 1)在面向对象程序设计中包含有如下几种特性 •封装性:保护内部结构的安全性 •继承性:在已 ...

  6. Redis配置成系统服务(CentOS7)

    1. 进入到redis安装目录,具体位置看你安装时的路径了. cd /usr/local/redis/ 2. 编辑配置文件 sudo vim ./redis.conf 3. 将如下配置项注释掉 #bi ...

  7. CG 标准函数库

    (1)数学函数 函数 功能描述 abs(x) 返回输入参数的绝对值 acos(x) 反余切函数,输入参数范围为[-1,1], 返回[0,π]区间的角度值 all(x) 如果输入参数均不为0,则返回tu ...

  8. 有关C语言学习的调查

    有关C语言学习的调查 1.Q:你是怎么学习C语言的?(作业,实验,教材,其他),与你的高超技能相比,C语言的学习有什么经验和教训? A:之间在暑假的之后自己有买了一本C PRIME PLUS 来看基本 ...

  9. 在python上获得随机字符

    """今天写一个程序,在想既然可以获得随机数,那我可不可以获得任意字符呢,于是在stackoverflow.com 上找到了方法,几乎都是用导入random,然后再用其它 ...

  10. 【Time系列五】个性时钟与秒表升级版

    从昨天到现在,一直在研究这个看起来超级简单的时钟.界面非常简洁大方. 虽然是简单,可是这个对齐的问题还是把我整得一塌糊涂.谁叫作者不解释清楚的. 参考:http://bbs.fishc.com/thr ...