Web前端----CSS盒子模型教学总结

此文章是对CSS盒子模型进行的一些学习，一看就懂，一学就会。 

---

 

前言

随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下CSS盒子模型，用来对CSS进行的学习。

---

一、CSS是什么？

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、CSS盒子模型

1.1 优先级

如果这个标签用了多个选择器，从上到下进行执行，如果用了！important就先执行加了！imporant，！important不要给继承的添加，自己有样式是无法继承父级样式的。

代码示例如下：

    
    
    
    
    


    
    
测试优先级用的

代码示例如下：

 1.2 权重叠加计算

这个是来数个数，行内，ID，类，标签来数个数来进行权重叠加计算，可以自己把注释解开试试

代码示例如下：

    
    
    
    
    


    

        
我是一个标签
    

代码运行结果如下：

 1.3 体验盒子模型

代码示例如下：

    
    
    
    
    


    
内容电脑
    
内容电脑

代码运行结果如下：

 1.4 盒子模型-内容

代码示例如下：

    
    
    
    
    


    
文字

代码运行结果如下：

 1.5 盒子模型-边框

代码示例如下：

    
    
    
    
    


    
内容

代码运行结果如下：

1.6 盒子模型-尺寸 

代码示例如下：

    
    
    
    
    


    
文字

代码运行结果如下：

 1.7 盒子模型-案例

代码示例如下：

代码运行结果如下：

1.8 新浪导航-案例 

代码示例如下：

    
    
    
    
    


    

        新浪导航
        新浪导航
        新浪导航
        新浪导航
    

代码运行结果如下：

 1.9 盒子模型-内边距

代码示例如下：

    
    
    
    
    


    
文字

代码运行结果如下：

 2.0 盒子模型-内边距-尺寸

代码示例如下：

    
    
    
    
    


    
文字

代码运行结果如下：

 2.1 新浪导航-优化

代码示例如下：

    
    
    
    
    


    

        新浪导航
        新浪导航航
        新浪导航
        新浪导航
    

代码运行结果如下：

 2.2 盒子模型-C3

代码示例如下：

    
    
    
    
    


    
文字

代码运行结果如下：

 2.3 盒子模型-外边距

代码示例如下：

    
    
    
    
    


    
div

代码运行结果如下：

 2.4 清除默认的内外边距

代码示例如下：

    
    
    
    
    


    
ppppp
    
ssssss
    
ssssss
    

        
ssssss
    

代码运行结果如下：

 2.5 版心居中

代码示例如下：

    
    
    
    
    


    
    
    
版心

代码运行结果如下：

 2.6 综合案例-新闻列表

代码示例如下：

    
    
    
    
    


    
    

        
最新文章/New Aricles
        

            
  1111  
            
  22222  
            
  33333  
            
  44444  
            
  555555  
        
    

代码运行结果如下：

 2.7 外边距的合并问题

代码示例如下：

    
    
    
    
    


    
111
    
111

代码运行结果如下：

 2.8 外边距的问题-塌陷的问题

代码示例如下：

    
    
    
    
    


    

        
son
    

代码运行结果如下：

 2.9 行内元素的内外边距的问题

代码示例如下：

    
    
    
    
    


    
    
    
    
    span
    span

代码运行结果如下：

---

总结

以上就是CSS盒子模型中比较重要的代码，谢谢大家的观看。