css之盒子模型

什么是盒子模型？

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

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

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

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

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

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

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

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

盒子模型的五个必要属性

width和height

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

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）

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-方向-颜色；）

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

margin

margin值的设置方式与padding相似。
在使用margin时需要注意margin塌陷现象：
- margin塌陷存在于块级元素之间
- 如果元素变成了块内元素或者行内元素则不会塌陷
- 如果元素脱离了标准文档流也不会塌陷

通过margin可以使盒子居中：

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

小贴士：

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

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

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

秒客网

css之盒子模型

css之盒子模型

什么是盒子模型？

盒子模型的五个必要属性

相关文章