CSS盒子模型(box-model)

CSS盒子模型(box-model)

• 我们在进行网页设计的时候,可以将一切的HTML元素看作为盒子.在CSS中盒子模型用来设计和布局时使用

• CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里.如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是放盒子

• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局

• 一个盒子分为以下几个部分:

  内容区(content),内边距(padding),边框(border),外边距(margin)

  

   

  上述图片展示的即为一个盒子模型,可以使我们更加形象的了解,下面我们来逐对盒子模型的几个部分进行介绍:

  首先,我们要知道,一个标签的大小是由以下部分组成:

  标签大小 = 内容大小 + 内边距 + 边框

  • 内容区:

    • 内容区指的是盒子中放置内容的区域,也就是标签中的文本内容,子标签都是存在于内容区中的

    • 如果没有为标签设置内边距和边框,则内容区大小默认和盒子大小是一致的

    • 通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小

    • width和height属性只适用于块标签(包含行级块)

    代码示例:

    
    
        
            
            
            
        
          
            
    这是一个标签3
        
    

    ​运行结果如下:

     

    • 边框:

      • 可以在标签周围创建边框，边框是标签可见框的最外部

      • 可以使用border属性来设置盒子的边框

      • 边框可以设置样式: dotted （点线） dashed （虚线） solid （实线） double （双线） groove（槽线）

      代码示例:

      
      
          
              
              
              
          
          
              
      
                  
                      这是一个标签2
                  
              
        
          
      
      ​

      运行结果如下:
       

       

    • 外边距:

      • 外边距是标签边框与周围标签相距的空间

      • 使用margin属性可以设置外边距,用法和padding类似，同样也提供了四个方向的

        • margin-top/right/bottom/left margin的值可以为负值。 margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为 auto时，浏览器会将左右外边距设置为相等

      • 外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围

      代码示例如下:

      
      
          
              
              
              
          
          
              
      
                  
                      这是一个标签2
                  
              
        
          
      

      ​运行结果如下:
      

    • 

  • 内边距:

    • 顾名思义，内边距指的就是标签内容区与边框以内的空间

    • 内边距会影响整个盒子的大小

    • 使用padding属性来设置标签的内边距

    代码示例:

    
    
        
            
            
            
        
        
            
    
                
                    这是一个标签1
                
            
        
    
    ​

    运行结果如下:
    

     

下面我们来介绍一个额外的知识点:

    清除浏览器的默认样式

• 浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。

  所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

• 代码如下:

  *{  /* 清除浏览器的默认样式*/
                  margin: 0;
                  padding: 0;
              }