一、盒子模型

一、本课目标

• 了解盒子模型的含义
• 掌握组成盒子模型的几个必要属性的使用

盒子模型

上面这个图有错误：width和height属性指的是网页元素的宽和高，而不是整体盒子的宽和高，妈的，就这个地方让老子迷了大半天，我怎么说怎么改数值都跟我想象的不一样。正确的应该是从内到外：网页元素，内边距，边框，外边距。
盒子模型是分层的，如下：

image.png

盒子模型的宽和高只能影响border在浏览器上的显示大小，并不能真正限定content的高和宽。
疑问：内边距、外边距和高宽是有一定关系的不能只凭自己瞎设置啊？这个疑问可以打消了。这讲师在讲的时候也不会提醒一下啊。

二、边框

image.png

2.1边框颜色（顺时针转圈）

image.png

2.2边框粗细

image.png

前三个值了解一下就行了，不常用。一般用到的是像素值这个。

2.3边框样式

image.png

none-没有；hidden-隐藏；dotted-点线；dashed-虚线；solid-实线；double-双线。

注：上面这三个属性都是按照上、右、下、左的顺序来写的。

2.4border总体简写

一般我们不需要将边框的四条边的样式设置地不一样，所以可以直接使用border标签进行整体设置。
语法：border:1px solid #3a6587;要注意中间是空格。
可以同时设置边框的颜色、粗细和样式。并且，这三个样式是没有先后顺序的，你先写哪个都行的。

2.5示例

一般当这三个属性只写一个的时候，在浏览器界面上并不会显示。

代码1：

    
    
    


   
醉后不知天在水，满船清梦压星河。

运行结果：

image.png

代码2：

    
    
    


   
醉后不知天在水，满船清梦压星河。

结果：

image.png

代码3：（这个地方先不要纠结自带代码框的那种）

    
    
    


  

      
会员登录
      

          

              姓名
              
          
          

              邮箱
              
          
          

              电话
              
          
      
  

运行结果：

image.png

代码四：

    
    
    



    

        
        
        
    
    

        
 
        
 
        
 
    

    
会员登录
    

        

            姓名
            
        
        

            邮箱
            
        
        

            电话
            
        
    

运行结果：

image.png

这个里面存在的问题是div标签的使用以及div标签配合结构伪类选择器的时候到底选中的是哪个标签？
但是还有问题，如下：

image.png

边框周边存在空白间隙，这些空隙是如何产生的呢？

三、外边距

3.1设置四个边的外边距

image.png

如果margin后面只有两个值或者三个值，那缺少的值直接取这个边的对边的值。margin后面的值的顺序是按照“上、右、下、左”的顺序来写的。如果后面只有一个值，那就代表四个边的外边距都是这个值。

3.2外边距的妙用：居中显示

image.png

这个属性设置了之后，可以让我们这个边框在浏览器的界面中居中显示。无论浏览器的窗口怎么放大或者缩小，这个会员登录的框都会在浏览器界面的中央。 margin: 0 auto;表示上下的外边距是0，左右的外边距自动调节。
网页居中对齐的必要条件：

• 块元素
• 固定宽度

当没有设置宽度的时候，该盒子的宽度会自动延长到浏览器的宽度，此时没必要谈居中。块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。
示例代码：

    
    
    


我是p元素

运行结果：

image.png

当在style里面增加width属性的时候，代码如下：

    
    
    


我是p元素

运行结果如下：

image.png

示例代码：

    
    
    


我是p元素
我是span元素

运行结果：

image.png

结果分析：在这个示例中，span元素不是块元素，所以这个span元素不会居中显示。

四、内边距

image.png

五、会员登录界面中的空隙问题

引例：

    
    
    


h1
h2
p
span
div

    
li1
    
li2
    
li3

运行结果：

image.png

分析：可以看到在浏览器的显示结果中都有外边距和内边距，但是在代码之中只加了一个框而已，并没有设置内外边距。出现这种情况的原因是html5中好多元素都有默认的内外边距。
将内外边距都设为0就可以把这些空隙去掉：

    
    
    


h1
h2
p
span
div

    
li1
    
li2
    
li3

运行结果：

image.png

建议压面布局的时候先把默认的内边距外边距清除掉，这样才不会对你的页面布局产生干扰。
登录框问题：
代码：

    
    
    



    
会员登录：
    

        

            姓名：
            
        
        

            邮箱：
            
        
        

            密码：
            
        
    

运行结果：

image.png

六、盒子模型尺寸

image.png

上面这个图里面没有border。

6.1box-sizing属性

image.png

语法：box-sizing: border-box|content-box|inherit;
当使用border-box的时候，其实就是让盒子的高度和宽度等于设置的width和height，相当于把本来是元素属性的高和宽设置为盒子的高和宽，此时在内边距和边框尺寸不变的情况下，元素所占的空间被压缩了。
content-box就是默认的东西。
兼容性问题：

image.png