日常总结(6.18)

1.盒子模型（Box Model）

所谓盒子模型：

就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括： 外边距（ margin ）、边框 （ border ）、内边距（ padding ）、实际内容（ content ）四个属性。

2.盒子边框（border）

border : border-width || border-style || border-color

属性                                             作用                        

border-width                     定义边框粗细，单位是px       

border-style                     边框的样式

border-color                     边框颜色

边框属性 — 设置边框样式（ border-style ）

边框样式用于定义页面中边框的风格，常用属性值如下：

none ：没有边框即忽略所有边框的宽度（默认值）

solid ：边框为单实线 ( 最为常用的 )

dashed ：边框为虚线

dotted ：边框为点线

double ：边框为双实线

2.1边框综合设置

border : border-width || border-style || border-color

3.内边距（padding）

padding 属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top: 上内边距

padding-right: 右内边距

padding-bottom: 下内边距

padding-left: 左内边距

3.1属性值设置

温馨提示： 后面跟几个数值表示的意思是不一样的。

值的 个数	表达意思
1 个值	padding ：上下左右边距 比如 padding: 3px; 表示上下左右都是 3 像素
2 个值	padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下 3 像素 左右 5 像素
3 个值	padding ：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是 3 像素 左右 是 5 像素 下是 10 像素
4 个值	padding: 上内边距 右内边距 下内边距 左内边距 比如 : padding: 3px 5px 10px 15px; 表 示 上 3px 右是 5px 下 10px 左 15px 顺时针

4.外盒子和内盒尺寸计算（元素实际大小）

使用宽度属性 width 和高度属性 height 可以对盒子的大小进行控制。

width 和 height 的属性值可以为不同单位的数值或相对于父元素的百分比 % ，实际工作中最常用的是像素 值。

大多数浏览器，如 Firefox 、 IE6 及以上版本都采用了 W3C 规范，符合 CSS 规范的盒子模型的总宽度和总高 度的计算原则是：

/* 外盒尺寸计算（元素空间尺寸） */

Element 空间高度 = content height + padding + border + margin

Element 空间宽度 = content width + padding + border + margin

/* 内盒尺寸计算（元素实际大小） */

Element Height = content height + padding + border

Element Width = content width + padding + border

5. 外边距（margin）

margin 属性用于设置外边距。 设置外边距会在元素之间创建 “ 空白 ” ， 这段空白通常不能放置其他内容。

margin-top: 上外边距

margin-right: 右外边距

margin-bottom: 下外边距

margin-left: 上外边距

margin: 上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

5.1 外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。

2. 盒子必须指定了宽度（ width ）

然后就给 左右的外边距都设置为 auto ，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

5.2 文字(行内元素)居中

1. 文字水平居中是 text-align: center

2. 盒子水平居中 : 左右 margin 改为 auto

text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */