css盒子模型

CSS盒子模型：规定了元素框处理元素内容（ content ）、内边距（ padding ）、边框（ border ） 和 外边距（ margin ） 的方式

外边距：margin

外边距（margin）：就是围绕在元素边框的空白区域，设置外边距会在元素外创建额外的“空白” 设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值

属性

• margin-top : 设置上方外边距
• margin-left : 设置左方外边距
• margin-right : 设置右方外边距
• margin-bottom : 设置下方外边距

margin 外边距简写：

• {a} ： 只有一个值的时候，为 上下左右外边距都为a值
• {a b} : 只有两个值的时候 为上下外边距为a值 左右外边距为b值
• {a b c} : 只有三个值的时候 为上外边距为a值 左右外边距为b值 下外边距为c值
• {a b c d} ：只有四个值时候 为上外边距为a值 右外边距为b值 下外边距为c值 左外边距为d值 （口诀：顺时针，上右下左）

实例

div{
    margin-top: 2px;
    margin-left: 5px;
    margin-right: 10px;
    margin-bottom: 4px;
}
/* 等同于 */
div {margin: 2px 5px 10px 4px;}

内边距 padding

内边距（padding）：就是在边框和内容区之间设置内边距的最简单的方法就是使用 padding 属性，这个属性接受任何长度单位、百分数值

属性

• padding-top : 设置上方内边距
• padding-left : 设置左方内边距
• padding-right : 设置右方内边距
• padding-bottom : 设置下方内边距

padding 内边距简写:

• {a} ： 只有一个值的时候，为 上下左右内边距都为a值。
• {a b} : 只有两个值的时候 为上下内边距为a值 左右内边距为b值
• {a b c} : 只有三个值的时候 为上内边距为a值 左右内边距为b值 下内边距为c值
• {a b c d} ：只有四个值时候 为上内边距为a值 右内边距为b值 下内边距为c值 左内边距为d值 （口诀：顺时针，上右下左）

实例

div{
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 10px;
    padding-bottom: 4px;
}
/* 等同于 */
div {padding: 2px 5px 10px 4px;}

边框 border

边框（border）：就是围绕元素内容和内边距的一条或多条线，设置边框的最简单的方法就是使用border 属性，允许规定元素边框的样式、宽度和颜色

属性

• border-width : 设置边框的宽度
• border-style : 设置边框的样式
  • none: 默认值，无边框
  • solid： 定义实线边框
  • ouble 定义双实线边框
  • dotted`: 定义点状线边框
  • dashed：定义虚线边框
• border-color : 设置边框的颜色

border 边框的简写：

• {width style color} ： 定义宽度为width，样式为style，颜色为color的边框

实例

div{
    border-width: 2px; 
    border-style: solid;/* 实线 */
    border-color: red;
}
/* 等同于 */
div{border:2px solid red}

盒子的真实尺寸

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

盒子的宽度：=width数值+padding左右的数值+border左右的数值

盒子的高度：=height数值+padding上下的数值+border上下的数值

display 属性

isplay属性:设置元素如何显示

属性值

• inline ：默认值。此元素会被显示为内联元素，元素前后没有换行符，内联元素所占具的空间就是他的标签所定义的大小（不能设置width和height）
• inline-block ：设置元素为行内块状元素，所有的块级元素开始于新的一行，延展到其容器的宽度（能设置width和height）
• none : 设置元素不显示不占空间，元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了（常用于元素掩藏）
• block : 设置元素为块状元素（能设置width和height）

实例

.hide { display: none; } /*掩藏*/
.show { display: block; }

兼容性

dispaly:inline-block 照顾的是IE8+的浏览器，这是正常的设置

在低版本的IE下设置行内块有2个条件，一个是行内，一个是设置宽高，触发layout即可设置宽高，而div设置了宽高后还是会换行，layout不是为水平而设置的，所以为块级元素转行内块加上了display：inline 属性，但是display：inline 不会触发layout，于是加上zoom：1 重新触发layout，于是就形成了一个可以“设置宽高的行内元素"。

所以若要兼容IE7和IE6浏览器，那么需要设置display:inline; 和zoom:1; 属性