前端学习笔记6-CSS入门四

前言：虽然做了几个前端项目，但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱，在网上找了一些网站，用于空闲时间学习。在此做下学习笔记，以做复习使用。

网站的课程讲的很好，很适合像我这样零基础的人学习，非常感谢网站的维护者，推荐下：绿叶学习网

1.表格样式：

---border-collapse，控制边框合并

---border-spacing，控制边框间隔，单位px

---caption-side，控制表格标题位置，默认top，可选bottom

    
    
    


    

      
默认边框
      
      

      

        
表头单元格1
        
表头单元格2
      
      
      
      

      

        
标准单元格1
        
标准单元格2
      
      

        
标准单元格1
        
标准单元格2
      
      
      
      

      

        
标准单元格1
        
标准单元格2
      
      
    
    

    

      
合并边框
      
      

      

        
表头单元格1
        
表头单元格2
      
      
      
      

      

        
标准单元格1
        
标准单元格2
      
      

        
标准单元格1
        
标准单元格2
      
      
      
      

      

        
标准单元格1
        
标准单元格2
      
      
    
    

    

      
间隔边框
      
      

      

        
表头单元格1
        
表头单元格2
      
      
      
      

      

        
标准单元格1
        
标准单元格2
      
      

        
标准单元格1
        
标准单元格2
      
      
      
      

      

        
标准单元格1
        
标准单元格2
      
      
    
    

    

      
标题在下
      
      

      

        
表头单元格1
        
表头单元格2
      
      
      
      

      

        
标准单元格1
        
标准单元格2
      
      

        
标准单元格1
        
标准单元格2
      
      
      
      

      

        
标准单元格1
        
标准单元格2
      
      
    

效果展示：

2.盒子模型：

---width、height，控制宽高

---border，控制边框

---margin，控制外边距

---padding，控制内边距

效果展示：

3.float，控制元素脱离文档流：

    
    
  


    

      
box1
      
box2
      
box3
      
这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
    

效果展示：

4.position，定位：

---fixed，固定定位，使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置

---relative，相对定位，使用top、bottom、left和right这4个属性来设置元素相对初始位置的位置

---absolute，绝对定位，使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置，与fixed相比，absolute的元素脱离了文档流，是独立存在的

 

    
    
    


    

    
相对定位
    

效果展示：