第二次讨论——响应式设计布局技巧css性能优化css预处理

Posted 2020-08-16

第二次讨论

【响应式设计】

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

响应式布局：

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 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。