小白也能看懂的css基础（三）

接上文----css基础（二）

3.9 CSS布局问题

3.9.1 图片下方与盒子边框会多出空白间隙

   解决方法：
       对img设置display：block；
       调整vertical-align：取值 top | middle | bottom；
        对图片的父亲设置font-size：0；或line-height：0
        结合实际来选择解决方法
   ie兼容问题
        ie中图片放在a中默认会显示边框，img { border： none }
        ie8以下浏览器背景复合属性写法问题
        .bg { background： url (  )no-repeat center center }
         url和no-repeat之间没有空格，在ie8以下显示异常。
   ie6和ie7兼容问题（忽略）
         双倍margin  /

3.9.2 css-hack 了解 / 面试 /尽量少用

1 条件hack 选择ie浏览器以及不同版本

    ie特有功能，ie10开始标准模式下，不再支持条件注释

    <!--[if IE]>
         <p style="background: red;">
         </p>      //只能被IE识别
    <![endif]-->

    <!--[if IE 6]>
         <p style="background: red;">
         </p>      //只能被IE6识别
    <![endif]-->

   <!--[if  gt  IE7]>                   
   		 <p style="background: red;">
         </p>      //只能被IE7以上识别
    <![endif]-->

    gt大于   lt小于   gte大于等于  lte小于等于  ！非

2 属性级hack (了解)

  可能在样式属性名前面或者值的后面加上一些只有特定浏览器能识别的hack前缀或后缀
  _ 下划线  选择ie6或以下 如  _color： red
 *ie6/7识别

3 选择符级hack

    对ie6生效

3.9.3 透明

 1  opacity: number   （0-1）   
    兼容性 ：ie9及以上和标准浏览器都支持
    特点：设置opacity的元素的所有后代会一起具有透明性
    用法： 调整图片或模块整体不透明度
 2 rgba（255， 255， 255，.3）
    兼容性： ie9及以上和标准浏览器都支持
    使用  设置颜色的不透明度，用于调整color，bgc等
 3 ie专属滤镜
    filter： alpha（opacity=x）
    兼容性 ：ie6-9  ie10开始废除
备注：为了兼容性，一三同时写

3.9.4 css精灵

  css sprite  css精灵/css雪碧
  把网页中一些小的背景图整合到一个大文件图中，应用background-image，background-repeat，background-position组合进行背景定位，适用于小图标。
  优点： 减少网页的http请求，从而提升页面性能 / 图片命名容易 / 更换风格方便。
  缺点： 必须限定容器的大小，符合背景图元素位置。
  推介切图软件：fscapture切图, 蓝湖， 摹客

3.9.5 补充：

PC端项目规范
1 文件管理

  文件名：有意义的英文命名
   html + css（reset . css重置样式） + imgs + js + psd 
  * html：index.html  首页
   *css：reset.css 重置浏览器样式    public . css 公共样式（页面头部尾部或其他重复样式，字体字号等）  index . css 首页样式
   *upload 上传
   *图片命名： 尽量与其模块样式名称保持一致，尽量小写 如login_bg.jpg   login_user_ico.gif

2 html 书写规范

   *h5模板
   *代码书写规范 ：缩进 ，命名 ，属性值用双引号引起来 ，标签要闭合 ，语义化 ，选择合适标签 ，合理嵌套标签 ，用户体验 ，
   *保证结构样式相分离 ，尽量避免用行内样式

3 CSS书写规范

  *utf-8
  *版心 1100/1200px
  *{ } body 字体  a  a:hover  li  
  *书写代码时，添加注释，   常用CSS命名
  *（CSS书写顺序）
     布局定位属性-->自身属性-->文本属性-->其他属性
  *兼容性：

补充 CSS属性：

1、表格细线边框
  border-collapse：collapse；
2、鼠标形状：
  cursor：default（默认箭头） | pointer（手指）|  auto（浏览器默认设置光标） |  crosshair（十字）|  move （拖拽）
3、字间距：
  letter-spacing：1px；
  词间距：以空格解析为依据
  word-sapce: 1px; 
4、隐藏显示
  display：none；  隐藏（不占空间）
  visibility：hidden；隐藏（占空间）|  visible（默认可见）
  outline：none；轮廓边框，用法同border， input搭配使用
  border：0 | none；去除边框
5、src：source 图片资源  JS文件 <script  src=“ ”/>