关于CSS的布局的一些想法与建议

前言

前段时间做了创匠科技官网的自适应网页，在编写过程中收益良多。之后又参与了公司的PC收银台的开发，对其中CSS的修改痛苦不已。痛定思痛，参考了阮一峰老师的《深入理解bootstrap》一书，总结出一些关于CSS布局的想法与建议。

CSS框架的设计基本思想

CSS使用的基本理论就是一个A/O模式。

A即append，添加；

O即overwrite，覆写;

通过添加来逐步增加样式，通过覆写来达到所需要的样式变化。

根据这个原理，我们就可以将元素的样式进行分解。

普通元素的样式

基础样式

在基础样式中，我们一般用于定义统一的字体样式（font-family）、背景色、外内边距、显示方式、边框等等。

颜色样式

针对不同情况下增加元素在不同情况下的显示。这个情况包括提示、警告、正常、成功、错误设置你可以使用颜色进行命名。

特殊效果

增加友好的互动而设置的效果。包括hover，active，visited，focus等状态下的问题。

尺寸样式

针对不同的分辨率或者特殊要求产生的尺寸要求。我们可以通过超小、小型、普通、大型、巨大等命名方式对元素进行元素的字体大小、行间距、高度、宽度、边距等多个影响元素尺寸的属性进行调整。

状态样式

根据其状态来显示其效果，可以根据其属性

element[atrribute]

来设置效果，效果类型包括但不限于①元素的阴影②样式的颜色③透明度④虚框⑤可能的动画效果

指定样式

上述的过程都是按部就班的过程，而这一步是针对特殊情况：

如果一个元素的样式修改，超出了我们先前定义的统一风格，我们可以针对这个元素添加新的class。

所需要注意的是：

①这个class应该添加在class的最后以确保它可以覆盖掉前面的样式

②这个class应该归在最近父类的id或者特殊（命名独特的）父类class中，以防止该cla
4000
ss不恰当的命名对其他样式产生影响

③不推荐使用id添加为该元素添加指定的样式。

④在样式改动特别小，同时没办法继续起一些特殊命名的类名时，可以直接在元素中使用内联式的样式。

特殊元素样式

特定类型的组件，一般只针对一个或几个固定元素

例如，导航元素na的中的li元素样式

特殊元素使用的途径相对比较固定，这就意味着

我们可以将上述几种样式集成在这一步：

设置字体、背景色、内外边距，文本颜色，特殊效果

状态样式等等



图片地址：

/Uploads/Images/Content/201801/52820f7a927c0aefef788d385c24bc60