引言： 我所教授的前端知识适用于纯小白，零基础。未来发展方向是前端领域，需要系统学习的人，从零到1的人 转载需备注地址---- 我是（我想静静）一个要把代码写出艺术感的人！ 写代码的男人很帅气！
跟着我学习，我保证会是很系统的学习，前10几天课程是html 与 css 后面我会逐步降到js 和 ajax 与 jquery 与 es6 vue 小程序 等 nodejs 与 PHP 课程。滴水穿石，学习没有一下子就成功的都在经历苦难与实战中度过。我之前一个人经历过如何学习的痛苦，所以今天把我学习的经历与路线整理出来给到大家。
本来应该早就更新的，最近年底公司加班特别的忙，所有才更新，今天是2018年的31号最后一天祝大家元旦快乐，我尽量今天一天三更新，今天比较重要希望大家认真听 。
## 盒子模型 CSS 重点
其实：css 就三大模块：盒子模型、浮动、定位、其余的都是细节，要求这三部分，无论如何也要学的非常精通
盒子模型 ： Box Model
图片为例手机就是内容，手机与填充直接的距离就是padding 内边距，内边距与边框的很薄的那个就border 手机盒子与其他手机盒子的距离就是margin ，要是还不理解的小伙伴可以拿出自己的手机盒子仔细想一下，一共四部分组成 ：内容- 内边距 - 边框 - 外边距
## 边框border 讲解
边框就是那层皮，橘子皮，柚子皮，等等......
语法：
border：border-width|| border-style|| border-color
<!DOCTYPE html>
```
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: #ccc;
/*边框颜色*/
border-top-color: red;
/*边框粗细*/
border-top-width: 10px;
/*线型*/
border-top-style: solid;
/*连写的写法*/ 重点推荐连写的写法
border-right: 10px red dotted;
}
</head>
<body>
<div></div>
<!-- 一个盒子四条边 -->
</body>
</html>
### /*连写的写法*/ 重点推荐：单边框的连写的写法 border-right: 10px red dotted;
## 四条边相同的连写
```
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
border:5px #ccc solid;
}
</style>
</head>
<body>
<div></div>
<!-- 一个盒子四条边 -->
</body>
</html>
```
### 边框连写需要注意的 边框的位置区分：上 右 下 左
顺时针排序的
样式综合设置： border- style：上 右 下左
border-style: solid dashed dotted double; none； none是去掉边框
实线 虚线 点线 双线
宽度综合设置：border-width: 上 右 下左
border-width: 5px 10px 15px 20px;
颜色综合设置：border-color: 上 右 下左
border-color: red blue pink orange;
## 表格的细线边框 border-collapse:collapse; 重要
```
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
width: 400px;
height: 400px;
border:1px solid red;
/*表格边框合并*/
border-collapse: collapse;
}
td{
border:1px solid red;
}
</style>
</head>
<body>
<!-- 当这里给了cellspacing 的时候你会发现 表格的边线变粗了这时候使用 border-collapse:collapse -->
<table cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
```
## 内边距 padding
padding 属性用于设置内边距，是指边框与内容区域之间的距离
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:200px;
height: 200px;
background-color: #ccc;
padding-top:50px;
padding-right: 50px;
<!--上面是单个的写法 下面使用连写-->
/*一个值的时候表示的上下左右 也是按照 顺时针排序*/
padding: 50px;
/*二个值的时候表示 上 右 也是按照 顺时针排序*/
padding:50px 150px;
/*三个值的时候表示 上 右 下 也是按照 顺时针排序*/
padding: 50px 150px 50px;
/*四个值的时候 表示 上 右 下 左 也是按照 顺时针排序 跟border 是一样的*/
padding:50px 150px 50px 20px;
}
</style>
</head>
<body>
<div>
嘿哈
</div>
</body>
</html>
padding-top, padding-right,padding-bottom, padding-left;
```
## 内边距撑大盒子
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:100px;
height: 100px;
background-color: #ccc;
padding-left:50px;
}
</style>
</head>
<body>
<!-- 内边距撑大盒子 -->
<div></div>
</body>
</html>
```
### 盒子的实际的大小 = 内容的宽度和高度 + 内边距+ 边框 上面的Demo 里面没有加 边框
## 让我们来个小练习 新浪导航的案例
1、.nva>a[htef="#"]*4 快速的写出四个 4链接 标签
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*书写循序 外层 */
.nav{
height: 40px;
background-color: #ccc;
border-top: 3px solid orange;
border-bottom: 1px solid #555;
}
.nav a{
/*a 是行内元素 需要转行内块 */
display: inline-block;
height: 40px;
line-height: 40px;
/*去掉下划线*/
text-decoration: none;
font-size: 14px;
color: #666;
padding:0 15px;
}
.nav a:hover{
background-color: pink;
}
</style>
</head>
<body>
<div>
<a href="" htef="#">登录</a>
<a href="" htef="#">三个字</a>
<a href="" htef="#">设置为首页</a>
<a href="" htef="#">手机新浪网</a>
</div>
</body>
</html>
```
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*书写循序 外层 */
.nav{
height: 40px;
background-color: #ccc;
border-top: 3px solid orange;
border-bottom: 1px solid #555;
}
.nav a{
/*a 是行内元素 需要转行内块 */
display: inline-block;
height: 40px;
line-height: 40px;
/*去掉下划线*/
text-decoration: none;
font-size: 14px;
color: #666;
padding代表的上下为0 左右 15
padding:0 15px;
}
.nav a:hover{
background-color: pink;
}
</style>
</head>
<body>
<div>
<a href="" htef="#">登录</a>
<a href="" htef="#">三个字</a>
<a href="" htef="#">设置为首页</a>
<a href="" htef="#">手机新浪网</a>
</div>
</body>
</html>
```
## 第二个练习
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 300px;
height: 300px;
background: pink;
padding:100px 100px;
}
.son{
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
外边大盒子尺寸 500 * 500 小盒子尺寸
300*300用内边距做出小盒子在大盒子里居中，并且盒子的最终尺寸不能更改
<div>
<div></div>
</div>
</body>
</html>
```
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 300px;
height: 300px;
background: pink;
<!--就是需要此处的一行代码-->
padding:100px 100px;
}
.son{
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
外边大盒子尺寸 500 * 500 小盒子尺寸
300*300用内边距做出小盒子在大盒子里居中，并且盒子的最终尺寸不能更改
<div>
<div></div>
</div>
</body>
</html>
```
## 内边距不撑大盒子
但是如果padding-left 你要给1000的话 当我没说这话！！！，这里讲的 是内边距不会撑大盒子
嵌套的块元素，子元素没有设置宽度，给子元素设置左右的内边距不会撑宽盒子
```
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 600px;
height: 600px;
background-color: pink;
}
.son{
height: 100px;
background-color: orange;
<!--内边距不撑大盒子-->
padding-left: 200px;
}
</style>
</head>
<body>
<!-- 这时候你会惊喜的发现 600 没有变 而是 son 往右移动了了这就是 内边距不撑大盒子 -->
<div>
<div>内边距不撑大盒子</div>
</div>
</body>
</html>
```
## 外边距 margin
margin-top, margin-right,margin-bottom,margin-left 取值与 内边距相同
如果想要，他们四边相同 给一个margin：50px； 即可
margin 也是上右 下左 与 border 和padding 相同 顺时针
```
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.top{
background-color: pink;
<!--这里就会有对下面盒子 10px 的距离-->
margin-bootm:10px;
}
.bot{
background-color: yellow;
<!--这里就会有对上面盒子 10px 的距离 -->
<!--他们现在一共的距离是20px-->
margin-top：10px；
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
```
## 外边距实现块元素居中 重点 **
可以让一个块元素实现水平居中，需要满足以下两个条件
1、必须是块元素
2、盒子必须给了指定的高度
3、然后就给左右的外边距都设置为auto 就可以使块级元素水平居中
实际中常用的方式： .header{width:960px; margin:0 auto;}
```
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 1000px;
height: 500px;
background-color: #ccc;
/*是对块元素有效*/
margin: 0 auto;
}
/*.father 宽度跟body 一样,注意一定要给高度，不然没有办法撑起来,使用 margin：0 auto */
.son{
height: 200px;
width: 200px;
background-color: pink;
margin:0 auto;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
```
## 文字盒子居中图片和背景区别 重点**
### 1、文字水平居中text-align:center;
### 2、盒子水平居中左右margin 改为 auto；
文字居中
text-align：center
用法：
1、可以将块元素里边的文字，行内元素，行内块元素水平居中
2、可以将行内块里面的文字，行内元素，行内块元素水平居中
3、对行内元素无效
4、margin：0 auto； 只对块元素有效
## 相邻元素垂直外边距的合并塌陷
```
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 150px;
height: 150px;
}
.top{
background-color: #ccc;
margin-bottom: 100px;
<!--生效的是100px -->
}
.bot{
background-color: red;
margin-top: 50px;
/*这时候 margin-top的50不会生效，取值是两者之间的较大值*/
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
```
## 嵌套块元素垂直外边距的合并 重点**
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并合并后的外边距为两者的较大者，即使父元素的上外边距为0 也会发生合并
解决方案：
1、可以为父元素定义1 像素的上边框或者上内边距 ，但是这种解决方案并不理想
2、可以为父元素添加overflow:hidden 最完美的解决方案
```
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 800px;
height: 500px;
background-color: #ccc;
margin-top: 20px;
/*border-top: 1px solid pink;*/
/*padding-top:1px ;*/
overflow: hidden; /*强烈推荐的方案 实际开发中*/
会触发bfc 块级格式化 上下文
}
.son{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
```
## 盒子模型布局稳定性
学习了这么多，肯定迷茫布局究竟使用什么好呢？给大家推荐
按照 优先使用 宽度 width 其次使用内边距 padding 再次外边距 margin
width > padding > margin
原因：
1、 margin 会有外边距合并，还有ie6 下面 margin 加倍的bug 所有最后使用
2、padding 会影响盒子大小，需要进行加减技术
3、width 没有问题，经常使用宽度高度剩余法
## 内边距使用技巧 练习
```
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.fathe{
width: 300px;
height: 300px;
background-color: #ccc;
padding:100px;
}
.son{
height: 150px;
background-color: red;
}
ul{
padding:0;
margin:0;
}
li{
height: 150px;
background-color: pink;
/*清除列表符号*/
list-style: none;
}
/*默认父元素的fathe 的宽度内容区域的宽度*/
</style>
</head>
<body>
<div>
<div></div>
<ul>
<li></li>
</ul>
</div>
</body>
</html>
```
热门跟贴