前端css基础（一）盒子模型padding margin border overflow

复习css基础 从头开始 认清自己 认真做一遍抵上简单看一遍

1.盒子模型

    
    
    


    

        

            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        
    

---

2.overflow

    
    
    


    

            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    

（1）默认---超出情况下直接会超出盒子范围（等同于overflow：visible）

（2）overflow: hidden---超出部分隐藏

(3) overflow: auto---如果有超出部分显示滚动条 沒有超出则不显示滚动条

                       

（4）overflow: scroll---一直显示滚动条 不管内容有没有超出

                        

---

3.border边框

border有3个属性：width粗细、color颜色、style样式

其中style可以是 solid 实线 、 dashed虚线  、double双线  、dotted点状线。。。。。

写法1：

    

写法2：

也可以单独控制一边：

---

4.margin 外边距

margin属性和padding属性可以取值的单位有：px和%（外层盒子的高度和宽度），上右下左四个取值。

    
    
    


    

        
box1
        
box2
    

使用margin属性时要注意，两个盒子在垂直方向上的margin会合并。

margin属性还可以设定盒子的水平居中，将左侧和右侧的值取值为auto