第三周

Bootstrap

 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单

Bootstrap的引入

 1个css文件：
      <link rel="stylesheet" href="css/bootstrap.min.css"/>

 2个js文件：
      <script type="text/javascript" src="js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/jquery-1.11.2-min.js"></script>

栅格系统

 class前缀： .col-xs-
 栅格系统行为：总是水平排列
 最大 .container宽度：none（自动）
 列数：12
 最带列宽：自动
 槽宽：30px (每列左右均有15px)

   代码：
       <div class="container">

           <div class="row nav">
               <div class="col-xs-7 left">
                   <ul>
                       <li>nav1</li>
                       <li>nav2</li>
                       <li>nav3</li>
                       <li>nav4</li>
                       <li>nav5</li>
                       <li>nav6</li>
                  </ul>
                 </div>

            <div class="col-xs-2 col-xs-offset-3 right">
                  <ul>
                      <li>nva1</li>
                  </ul>
            </div>
         </div>

          <div class="row content"></div>
       </div>

sass

 1.后缀名为.sass      ------不使用{}或；
   后缀名为.scss      ------使用{}或；  类似css格式

 2.变量
   $变量名：值

 3.默认变量
   在之后面街上 ！default
   例： $color:red  !default

 4.mixin混合
  @mixin声明混合，通过@include调用
    @mixin 名称 {属性：值}

less

 作为CSS的一种扩展，LESSCSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松，
 而且你可以在任何时候回退到CSS。

 语法：
 1.变量：
     @自定义名称：值

 2.混合：
     .自定义名称{值}

 3.多参数混合：
     .自定义名称（@自定义名称）{值}

常见的浏览器兼容问题

一.随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大

 解决方案：CSS里 *{margin:0;padding:0;}
 备注：这个是最常见的也是最易解决的⼀一个浏览器兼容性问题，几乎所有的CSS文件开头都会⽤用通配符*来设置各个标签
 的内外补丁是0

二.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大（IE6中后面的一块被顶到下一行）

 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

三.子元素和父元素之间没有任何内容，将子元素设置margin-top后，子元素不会动，而父元素会因为margin-top往下移动

 解决方案：在父元素和子元素之间加入<div stye=‘height:0’>&nbsp;</div>。或者设置父元素的padding-top

条件注释

 <!--[if lte IE 6]> 这段⽂文字仅显⽰示在 IE6及IE6以下版本。 <![endif]-->
 <!--[if gte IE 6]> 这段⽂文字仅显⽰示在 IE6及IE6以上版本。 <![endif]-->
 <!--[if gt IE 6]> 这段⽂文字仅显⽰示在 IE6以上版本（不包含IE6）。 <![endif]-->
 <!--[if IE 5.5]> 这段⽂文字仅显⽰示在 IE5.5。 <![endif]-->
 <!--在 IE6及IE6以下版本中加载css-->
 <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
 缺点是在IE浏览器下可能会增加额外的HTTP请求数。

解析模式

 1.标准  <！DOCTYPE html>
 2.混杂  不写DOCtype
 3.准标准  针对IE浏览器