css之盒子模型

css之盒子模型

---

####什么是盒子模型？

网页中任何一个标签都可以看做一个盒子模型。而所有的盒子模型都存在五个必要的属性：width，height，padding，border，margin。可以用生活中常见的物体来想想一下：比如相框。

可以想象一下：一面空白的墙上挂满了相框，这面墙相当于我们的网页。墙上的每一个相框就相当于是一个个html标签，也就是盒子模型。可以将相框和盒子模型一一类比一下：

每个相框之间的距离即盒子模型的外边距----margin；

相框的宽度就是盒子模型的边属性----border；

照片距离边框的距离相当于盒子模型的内边距----padding

照片的宽度--------width；

照片的高度--------height。

接着我们通过这五个必要属性来深入讨论一下盒子模型。

盒子模型的五个必要属性

1. width和height

   所谓的width和height指的是盒子模型中的内容的宽和高而不是指盒子模型的宽和高，当然也可以不设置width和height的值，那么会根据盒子中的内容来填充宽和高。

2. padding

   • 当设置背景颜色的时候，padding区域也会存在背景颜色

   • 设置padding值的时候应该先设置大属性，后写小属性

       常见误区写法：padding-left:30px;
       		    padding:20px;
       正确写法：padding：20px；
       		 padding-left：30px；
     

   • 在使用css的时候，能够使用简写就使用简写

       即：padding：10px；（上下左右四个方向的padding全部都是10px）
       	padding：10px 20px；（上下为10px，左右为20px）
       	padding：10px 20px 30px；（上为10px ，右为20px，下为30px）
       	padding：10px 20px 30px 40px；（上为10px，右为20px，下为30px，左为40px）
     

3. border

   • 三要素：粗细 border-width;线型 border-style;颜色 border-color

       如：border:1px solid red;
     

   • border值可以统一设置，也可以只设置某个边，border四个方向的设置：用top bottom left right

       如：统一设置：
       	border:1px solid red;
       	只设置某条边（设置上边框）：
       	border-top：1px solid red；
       	只设置某条边的某个属性（设置下边框的颜色）：
       	border-bottom-color：black；（即：border-方向-颜色；）
     

   将上边的属性合理运用就可以做出符合自己要求的盒子边框。

4. margin

   • margin值的设置方式与padding相似。

   • 在使用margin时需要注意margin塌陷现象：

     • margin塌陷存在于块级元素之间
     • 如果元素变成了块内元素或者行内元素则不会塌陷
     • 如果元素脱离了标准文档流也不会塌陷

   • 通过margin可以使盒子居中：

       让盒子左右居中：margin：0 auto；
       使用此方法让盒子居中时要注意：
       1. 盒子必须有明确的width
       2. 盒子必须处于标准文档流中
       3. margin：0 auto；是让盒子居中，而不是让盒子里边的文字居中。如果想让文字居中可以使用text-align:center；
     

---

小贴士：

1. 如果想要移动子元素的的位置，非必要情况下推荐使用父元素的padding，而不是子元素的margin，如果必须使用margin，父元素就必须要有border。

2. border-style属性的一些常用值（详见border-style属性）：

    none:定义无边框
    hidden：与“none”相同。但是用于表时，hidden用于解决边框冲突
    dotted：定义点状边框，但是在大多数浏览器中成现为实现。
    dashed：定义虚线，同样在某些浏览器为实线		
    solid：定义实线
    double：定义双线，双线的宽度等于border-width的值
    inherit：规定从父元素继承边框样式