08-CSS盒子模型及使用技巧

CSS盒子模型及使用技巧

盒子模型解释

• 元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。
• 把元素叫做盒子，设置对应的样式分别为：盒子的宽度width、盒子的高度height、盒子的边框border、盒子内的内容和边框之间的间距padding、盒子与盒子之间的间距margin。

设置宽高

width: 200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height: 200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

设置边框

• 设置一边的边框，比如顶部边框，可以按如下设置：

border-top: 10px solid red;

• 其中10px表示线框的粗细；solid表示线性，常用的有：solid(实线) 、dashed(虚线)dotted(点线)；red表示线的颜色是红色。

• 设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。

• 四个边如果设置一样，可以将四个边的设置合并成一句：

border: 10px solid red;

设置内间距padding

• 设置盒子四边的内间距，可设置如下：

padding-top: 20px;     /* 设置顶部内间距20px */ 
padding-left: 30px;     /* 设置左边内间距30px */ 
padding-right: 40px;    /* 设置右边内间距40px */ 
padding-bottom: 50px;   /* 设置底部内间距50px */

• 上面的设置可以简写如下：

padding: 20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */

• padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding: 20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding: 20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding: 20px; /* 设置四边内边距为20px */

设置外间距margin

• 外边距的设置方法和padding的设置方法相同，将上面设置项中的padding换成margin就是外边距设置方法。

• 盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

盒子真实宽度 = width + padding左右 + border左右

盒子真实高度 = height + padding上下 + border上下

chrome开发者工具

• chrome开发者工具可以辅助开发，可以迅速查看元素的结构，样式，以及盒子模型结构和尺寸

盒模型使用技巧及相关问题

margin相关技巧

1. 设置不浮动的元素相对于父级水平居中： margin: x auto;
2. margin负值让元素位移及边框合并

垂直外边距合并

• 垂直外边距合并指的是，当两个不浮动的元素，它们的垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，实际开发中一般只设置margin-top来避开这种合并的问题，或者将元素浮动，也可以避开这种问题。

margin-top 塌陷

• 在两个不浮动的盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

  1. 外部盒子设置一个边框
  2. 外部盒子设置 overflow:hidden
  3. 内部盒子设置 float (不建议使用,容易带来其他问起)
  4. 使用伪类与伪元素 (推荐方法):

.clearfix:before{
    content: '';
    display:table;
}