-这里指的模块是页面布局块,不是逻辑模块
1.做页面前先布局,整体,既不能过细,也不要太粗糙,大概看一下页面分几块就好,然后布局这几个大块。具体每块的样式,在写页面的时候在详细的去做。
- 一般一行中有两个及以上的大模块 一般给其模块div设置固定高度。
- 布局中,非最后一行 且只有一个模块大模块div时,尽量不用
min-height
, - 即使是最后一行大模块div 用
min-height
也要考虑页面是否允许有竖向滚动条,如果不允许,最好不用min-height,同时要考虑是否需要配合
max-height` - 模式模块中在做具体样式的时候,有些中间父级需要由内容撑起高度,记得同时需要考虑
min-height
,max-height
,以及其内子元素多超出后的处理方式。
- 模式模块中在做具体样式的时候,有些中间父级需要由内容撑起高度,记得同时需要考虑
- 一般情况下,用了
min-height
同时需要考虑设置max-height
- 一般情况下,用了
2.布局前考虑是否为相应式。如果不是响应式用百分比做宽度。
- 假如不是相应式的时候,一般用百分比,给大模块设置,在写页面的时候 在模块中用到固定宽度的是时候,做后都
要
给该模块内最大
父级设一下最小宽度,不用
给最小
父级设置最小宽度。
3.以布局模块为单位。适合给大模块的样式有 background
,font-size,font-color,
这几个样式一般越大的模块设置,可以统一背景,字体大小,颜色。
这几个样式 如 width,height,marign,padding
给最小的单位元素设置较好,充分利用css 选择器。
width,height
这俩样式尽量不要用在中间的父级模块中
marign,padding
根据需求用在对应的中间父级中。