做水工页面样式感悟小结

-这里指的模块是页面布局块,不是逻辑模块

1.做页面前先布局,整体,既不能过细,也不要太粗糙,大概看一下页面分几块就好,然后布局这几个大块。具体每块的样式,在写页面的时候在详细的去做。

  • 一般一行中有两个及以上的大模块 一般给其模块div设置固定高度。
  • 布局中,非最后一行 且只有一个模块大模块div时,尽量不用min-height,
  • 即使是最后一行大模块div 用min-height也要考虑页面是否允许有竖向滚动条,如果不允许,最好用min-height,同时要考虑是否需要配合max-height`
    • 模式模块中在做具体样式的时候,有些中间父级需要由内容撑起高度,记得同时需要考虑min-heightmax-height ,以及其内子元素多超出后的处理方式。
    • 一般情况下,用了min-height同时需要考虑设置max-height

2.布局前考虑是否为相应式。如果不是响应式用百分比做宽度。

  • 假如不是相应式的时候,一般用百分比,给大模块设置,在写页面的时候 在模块中用到固定宽度的是时候,做后都给该模块内最父级设一下最小宽度,不用最小父级设置最小宽度。

3.以布局模块为单位。适合给大模块的样式有 background,font-size,font-color, 这几个样式一般越大的模块设置,可以统一背景,字体大小,颜色。

这几个样式 如 width,height,marign,padding给最小的单位元素设置较好,充分利用css 选择器。
width,height这俩样式尽量不要用在中间的父级模块中
marign,padding根据需求用在对应的中间父级中。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,088评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,769评论 1 45
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 2,100评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,421评论 0 11
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,353评论 0 1

友情链接更多精彩内容