Web前端基础（八）：CSS模块开发细则

设计普通模块流程？

选择标签——布局样式——文本样式——代码优化

一、空隙问题

多个行元素并排显示，默认状态下，行元素之间会存在间隙，这个间隙由HTML文件中的空格引起，解决方案是给行元素设置浮动。

二、浮动对元素的影响

1. 可以让块元素并排显示；
2. 在不设置宽高的情况下，宽高由内容决定；
3. 元素会脱离文档流；
4. 行元素浮动，可以设置宽高；

三、a 标签的4个伪类

:link ( a标签还未被访问的状态 – href 属性 )
:visited ( a标签已被访问过的状态 )
:hover ( 鼠标悬停在a标签上的状态； )
:active ( a标签被鼠标按着时的状态； )

四、背景图合并

优点：减少服务器请求压力
考虑：

1）backgroung-repeat：是否有重复；
2）背景图的显示范围

五、普通模块

p：定义段落；
ol：有序列表，li（列表项）；
ul：无序列表；
dl：自定义列表，只包含dt（标题）、dd（列表项）；
eg： 图文并茂—>图片放在dt中，文字放在dd中；

六、普通模块实现方法

 1、选择标签考虑：
      1）SEO
      2）样式代码的控制难易程度
      3）关于链接跳转
      4）小icon、使用背景还是img

 2、布局与自身样式考虑：
      1）标签的默认样式，是否需要浮动处理；
      2）有没有必要设置宽高；

 3、文本样式主要考虑因素：
      1）对齐方式
      2）行高的利用
      3）字体样式
      4）鼠标交互效果

 4、CSS效果书写顺序：
      显示属性：float     overflow     position     z-index    display
      自身属性：盒模型 margin     padding     border     width     height
      文本属性：text     font     background
      良好的命名规则。     

tips：在使用数据图时，一定要限制宽高；——min-width，min-height；max-width，max-height

 img下方默认有3px bug：
      解决：
          1） 给img设置浮动；
          2）给img设置display：block;
          
 超出隐藏的设置：
      width: 155px;               设置宽度
      white-space: nowrap;     强制不换行
      overflow: hidden;          文本超出隐藏
      text-overflow: ellipsis;     显示省略号

背景图不放在内容区里面，要放到padding里。