前端开发课程
- CSS元素属性及盒子模型

```
              [
```

                    课程介绍
                ](_index_)

```
              [
```

                    html和css入门
                ](001day_index)
        - 
                [
                    html概述及基本结构
                ](001day_section02)

```
              [
```

                    html标签入门
                ](001day_section03)

```
              [
```

                    html布局入门
                ](001day_section04)

```
              [
```

                    css介绍
                ](001day_section05)

```
              [
```

                    css载入方式
                ](001day_section06)

```
              [
```

                    css选择器一
                ](001day_section07)

```
              [
```

                    css元素属性及盒子模型
                ](001day_section08)

```
              [
```

                    css文本属性
                ](001day_section09)

```
              [
```

                    css基本布局演示
                ](001day_section10)

```
              [
```

                    html和css进阶
                ](002day_index)
        - 
                [
                    相对地址与绝对地址
                ](002day_section01)

```
              [
```

                    列表
                ](002day_section02)

```
              [
```

                    表单
                ](002day_section03)

```
              [
```

                    表格
                ](002day_section04)

```
              [
```

                    css选择器二
                ](002day_section05)

```
              [
```

                    css显示特性
                ](002day_section06)

```
              [
```

                    css元素溢出
                ](002day_section07)

```
              [
```

                    html和css高级
                ](003day_index)
        - 
                [
                    定位
                ](003day_section01)

```
              [
```

                    css权重
                ](003day_section02)

```
              [
```

                    photoshop辅助测量与取色
                ](003day_section03)

```
              [
```

                    前端页面开发流程
                ](003day_section04)

```
              [
```

                    javascript入门及进阶
                ](004day_index)
        - 
                [
                    JavaScript介绍
                ](004day_section01)

```
              [
```

                    JavaScript嵌入页面的方式
                ](004day_section02)

```
              [
```

                    变量、数据类型及基本语法规范
                ](004day_section03)

```
              [
```

                    函数
                ](004day_section04)

```
              [
```

                    获取元素方法
                ](004day_section05)

```
              [
```

                    操作元素
                ](004day_section06)

```
              [
```

                    事件属性及匿名函数
                ](004day_section07)

```
              [
```

                    条件语句
                ](004day_section08)

```
              [
```

                    javascript高级
                ](005day_index)
        - 
                [
                    数组及操作方法
                ](005day_section01)

```
              [
```

                    循环语句
                ](005day_section02)

```
              [
```

                    字符串及操作方法
                ](005day_section03)

```
              [
```

                    定时器
                ](005day_section04)

```
              [
```

                    调试程序的方法
                ](005day_section05)

```
              [
```

                    变量作用域
                ](005day_section06)

```
              [
```

                    封闭函数
                ](005day_section07)

```
              [
```

                    JQuery入门
                ](006day_index)
        - 
                [
                    jquery介绍
                ](006day_section01)

```
              [
```

                    jquery文档加载完再执行
                ](006day_section02)

```
              [
```

                    jquery选择器
                ](006day_section03)

```
              [
```

                    jquery样式操作
                ](006day_section04)

```
              [
```

                    绑定click事件
                ](006day_section05)

```
              [
```

                    jquery动画
                ](006day_section06)

```
              [
```

                    JQuery进阶
                ](007day_index)
        - 
                [
                    jquery特殊效果
                ](007day_section01)

```
              [
```

                    jquery链式调用
                ](007day_section02)

```
              [
```

                    jquery属性操作
                ](007day_section03)

```
              [
```

                    jquery事件
                ](007day_section04)

```
              [
```

                    表单验证
                ](007day_section05)

```
              [
```

                    JQuery高级
                ](008day_index)
        - 
                [
                    事件冒泡
                ](008day_section01)

```
              [
```

                    事件委托
                ](008day_section02)

```
              [
```

                    Dom操作
                ](008day_section03)

```
              [
```

                    javascript对象
                ](008day_section04)

```
              [
```

                    json
                ](008day_section05)

```
              [
```

                    ajax
                ](008day_section06)

```
              [
```

                    ES6语法
                ](009day_index)
        - 
                [
                    变量声明和赋值
                ](009day_section01)

```
              [
```

                    函数相关
                ](009day_section02)

```
              [
```

                    模块及面向对象
                ](009day_section03)

```
              [
```

                    异步请求数据
                ](009day_section04)

```
              [
```

                    新增数组操作方法
                ](009day_section05)

```
              [
```

                    react入门和进阶
                ](010day_index)
        - 
                [
                    react介绍
                ](010day_section01)

```
              [
```

                    快速开始
                ](010day_section02)

```
              [
```

                    JSX语法
                ](010day_section03)

```
              [
```

                    组件和属性(props)
                ](010day_section04)

```
              [
```

                    绑定事件
                ](010day_section05)

```
              [
```

                    状态(state)
                ](010day_section06)

```
              [
```

                    列表渲染
                ](010day_section07)

```
              [
```

                    表单数据绑定
                ](010day_section08)

```
              [
```

                    react高级
                ](011day_index)
        - 
                [
                    生命周期方法
                ](011day_section01)

```
              [
```

                    数据交互
                ](011day_section02)

```
              [
```

                    脚手架开发
                ](011day_section03)

          [
              本書使用 GitBook 釋出
          ](https://www.gitbook.com)

前端开发课程

CSS元素属性及盒子模型

盒子模型

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

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

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

border-top:10px solid red;

其中10px表示线框的粗细；solid表示线性。
设置其它三个边的方法和上面一样，把上面的’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上下

块元素居中技巧 块元素如果想设置相对页面水平居中，可以使用margin值中的auto关键字，“auto”只能用于左右的margin设置，不能用于上下的：

.box{
      width:300px;
      height:300px;
      background:gold;
      margin-left:0px;
      margin-top:0px;
      margin-left:auto;
      margin-right:auto;    
}

简写如下：

.box{
     width:300px;
     height:300px;
     background:gold;
     margin:0px auto;   
 }

设置元素浮动属性float

浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

设置元素背景属性background

设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色