主要内容：

　 

    

    

    

    

    

    

 

 

1️⃣  CSS布局之浮动

　　float:即浮动，CSS布局用得最多的一个属性。

　　效果：元素并排，并且两个元素都能够设置宽度和高度。

　　要想学好必须要知道的四个特性：

　　（1）浮动的元素脱标；

　　（2）浮动的元素互相贴靠；

　　（3）浮动的元素有“字围“效果；

　　（4）紧凑的效果

　　1、元素脱标

　　　　脱离标准文档流

　　　　原本设置标准文档流中的左上方的第一个盒子，设置了浮动（成了浮动元素，飘了起来），便脱离了

　　标准流，另一个盒子便渲染到了左上方。

　　　　示例：　　　

    
                  
      
        
       
我是小黄
    
      
    
      
        
       
我是小蓝
    
      
    
          
          我是一个小小的span标签    
          我是一个小小的span标签

　

　　2、 浮动元素互相贴靠　　　

            
                              
      
       一哥
      
        
      
       二哥
      
        
      
       三弟
      
    

　　总结：　

如果浏览器页面（父元素）有足够的空间，那么多个盒子（div标签）设置浮动时，则依次从左至右（float设为left时）排列。（以下默认float设置为left）    当浏览器页面（父元素）空间无法容纳并列的盒子的宽度时（比如将浏览器页面缩小），此时位于右侧的盒子就会向左侧贴靠，需要分两种情况讨论：    以上方源码为例：        ①当一哥的高度小于二哥时，压缩浏览器页面，三弟向左贴靠，会直接滑到最左侧的边框上，与一哥左侧对齐了。        ②当一哥的高度大于二哥时，压缩浏览器页面，三弟向左贴靠，会滑到紧靠一哥的右侧的边框上，与二哥左侧对齐。

 

　　3、  浮动元素之字围效果

　　示例：

    
                  
      
    
           
      
    
路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞        路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞    

当div标签设置浮动，p标签不设置浮动时，div挡住了p(div的层级提高)，但是p中的文字不会被遮盖，此时    就形成了字围效果，关于浮动必须要强调的是：浮动一个元素，我们要遵循一个原则，永远不是一个盒子单独浮动，    要浮动就要一起浮动。

　　

　　4、 浮动元素之紧凑效果

　　未设置元素的width属性值时，会自动收缩到元素自身的宽度（这一点和行内元素很像）。

·　　示例：　

    
                  
      
       浮动元素之紧凑效果
      

　　

2️⃣  清除浮动带来的问题

　　方法1：给父盒子设置高度

　　　　当子元素设置为浮动后，就脱标了（脱离标准流），不在当前页面上占据位置，不再

　　填充父元素的高度了，所以导致该父盒子无高度，添加下一个父盒子时，就会顶到左上角

　　（即上一个父盒子位置），导致两个父盒子相互重叠。

 

　　方法2：内墙法（clear:both）

　　　　给浮动元素最后面添加一个盒子（div），并且不设置浮动，然后设置clear:both，即清除

　　别人对我的浮动的影响（此时父盒子father2不再顶在左上角，与父盒子father重叠，而是紧贴

　　在父盒子father下面）

　　示例：　　

                            
                                                          
      
                
       
                    
        
1
                    
        
2
                    
        
3
                    
                        
       
                
       
                   
      
            
      
                

 

　　方法3： 伪元素选择器（给祖先元素加一个类）

    
                                      
      
            
       
                
        
1
                
        
2
                
        
3
            
       
        
      
        
      
    

　　

　　方法4：overflow:hidden（表示超出部分隐藏）-- 需要在父级元素上设置　　

            
                                      
      
                   hello world hello world hello world hello world hello world            hello world hello world hello world hello world hello world            hello world hello world hello world hello world hello world            hello world hello world hello world hello world hello world            hello world hello world hello world hello world hello world            hello world hello world hello world hello world hello world            hello world hello world hello world hello world hello world            hello world hello world hello world hello world hello world            hello world hello world hello world hello world hello world            hello world hello world hello world hello world hello world        
      
    

 

3️⃣  margin塌陷问题　　

　　1、当给未设置浮动的两个兄弟盒子设置垂直方向上的margin时，那么以较大的值为准，我们称这种现象为塌陷。 而当给盒子设置浮动时，垂直方向上不塌陷。 　　需注意：水平方向无塌陷问题。 　　示例如下：

　　2、设置水平居中（margin:0 auto）

　　示例如下：

                
                                                
      
       水平居中
      
            

　　总结：　

（1）使用margin:0 auto 水平居中盒子，必须要设置明确的width,            盒子内的文字水平居中需要使用text-align:center.        （2）只有标准流下的盒子，才能使用 margin:0 quto;            当一个盒子设置浮动了，或者固定定位或绝对定位时，margin:0 auto；            就不能用了。        （3）margin:0 auto 表示水平居中盒子，不是文本，文本要单独用 text-align:center。

 

4️⃣  善用父级的padding取代子级的margin

　　示例如下：　

　　总结：

子盒子在父盒中设置间距，有两种方式：    一、如上①②③式所示，设置父级的border,子级中设置margin（切记盒子总大小要加上边框border）    二、在父盒中设置padding参数，同时对应减小width和height的参数。    原理：如果父级没有设置border,那么子级margin实际上“挤”的是“流”（标准文档流，即行），所以父级就会被挤掉下来。

　

5️⃣  文本属性和字体属性

　　示例如下：

    
                 
     
              我是一个小盒子    
     
    
     
              多行文本 多行文本 多行文本 多行文本 多行文本 多行文本        多行文本 多行文本 多行文本 多行文本 多行文本 多行文本        多行文本 多行文本 多行文本 多行文本 多行文本 多行文本    
     

总结：　

使用font-family注意几点：        1、网页中我们要注意使用字体（用户可能没有某些字体），没有时，中文默认宋体；            一般页面中，中文只使用：微软雅黑，宋体，黑体；            英语一般用：Arial,Times New Roman；            英语能够显示英文和中文，但设为中文就只能显示对应的中文。        2、为防止用户电脑没有某个字体，就设置多个字体，中间用英语逗号隔开，            备选字体可以有无数个。        3、讲英语字体放在最前面，如此所有的中文都不能匹配，局自动变为后面的中文字体。            如：font-family:"Times New Roman","微软雅黑","宋体"。

 

6️⃣  超链接美化

    
                  
      
        
       
            
        
                
         
菜单1
                
         
菜单2
                
         
菜单3
                
         
菜单4
                
         
菜单5
                
         
菜单6
            
        
        
       
    
      

 

7️⃣  背景属性（颜色，图片，位置）

　　1、background-color

　　颜色表示方法有三种：单词、rgb表示法、16进制表示法

　　（1）单词：如 red,green,blue等。

　　rgb：红，绿，蓝三原色

　　rgb（r,g,b） r,g,b的值，每个值的取值范围都是0~255，一共256个值。

　　如：黑色=rgb(0,0,0)

　　　　白色=rgb（255,255,255）

　　　　最后显示的颜色是三个数值的叠加。

　　（2）十六进制表示法　　

以#开头，后接十六进制数，可以和rgb之间转换（即十六进制转十进制）        十六进制可以简化为3位，所有 #aabbcc的形式，能够简化为 #abc。        如background-color:ff0000;等于background-color:#f00;        background-color:#112233;等于background:#123;

　　2、background-img　　　　

1、平铺图片（铺满盒子）         background-image:url(lufei.jpg);        background-repeat:repeat;    2、不平铺图片        background-image:url(lufei.jpg);        background-repeat:no-repeat;        background-repeat: repeat-x; /*在盒子内仅水平方向平铺*/        background-repeat: repeat-y; /*在盒子内仅垂直方向平铺*/    3、给网页设置背景        body{            background-image:url(lufei.jpg);/*背景如果是一张图片多次填充，图片应选择轴对称的*/        }    4、设置图片位置       background-position: 0 0; /*默认位置为左上角*/       background-position: 100px 100px;

　　示例：

    
                    
      
       我的图片