2个小时上手html+css-002盒子模型和选择器
我已经说过了，我要尝试看看自己能够用多少个小时把一个小白菜鸟变成月薪10000+的前端工程师。这篇文章就是我的尝试系列计划之一。《2个小时上手html+css》的第二篇。
这个教程是一系列，这是第二篇，学习本系列教程你需要：
1.你会基础的电脑操作（会打字，新建文件夹、新建文件、保存文件，知道什么是浏览器，28个英文字母都得熟悉，不能多数了俩）会安装基本的编辑器。
2.每个文件都要一个个的敲，一个不落的调试。
3.不要想太多，不要知道太多，按照步骤做就好了。
这个课程学习需要三个小时，包含练习时间，你将学会：
1.选择器
2.盒子模型
3.定位和浮动
4.表单和表格
第一部分选择器
说到选择器，我想说的是程序只不过是人类做事情的方法和过程的模拟，一般我们要做事儿无非是，让什么人做什么事儿，或者说把什么东西变成什么样。
计算机里面也一样，比如今天情人节，把一群妹子变成我女朋友，怎么变呢。用css表达就是
一群妹子{
Leo的女朋友：她们;
}
类比回代码
h1{
color:red;
}
那么问题来了所有妹子里面万一又不乐意的咋弄，这时候我说了，谁愿意举手。那么我就让举手的当我女朋友对吧。用选择器怎么表示呢
.举手的妹子{
Leo的女朋友：她们;
}
注意前面加个点儿。好，我们回到代码，我想让所有包含.red这个一类p都变红，就需要用类选择器，表示一类。一类当然可以有多个
<html>
<head>
<title>我是网页的标题</title>
<style>
.red {
color:red;
}
</style>
</head>
<body>
<p class = "red">我要红红红</p>
<p class = "red">我要上春晚</p>
<p class = "red">我要火</p>
<p>我就不想红</p>
</body>
</html>
注意：
1.class是关键字 ，里面放类名。
2. .red 是样式的定义部分，上例子的意思是 让所有包含red的元素字颜色变红。
那么问题来了，如果有个人要搞特殊，比如某个p说了，哥就是不想红咋弄，而且你必须字儿给我放大点儿。
你可能会说
<html>
<head>
<title>我是网页的标题</title>
<style>
p {
color:red;
}
</style>
</head>
<body>
<p class = "red">我要红红红</p>
<p class = "red">我要上春晚</p>
<p class = "red">我要火</p>
<p>我就不想红</p>
</body>
</html>
这样不就行了？请自行尝试不靠谱，怎么办我们需要id选择器，id选择器是唯一的，一个页面里面只能有一个id,就像全宇宙只能有一个尼古拉斯·屌·Leo一个样，注意id用 #号（横竖都是二的意思，哈哈）
<html>
<head>
<title>我是网页的标题</title>
<style>
p {
color:red;
}
#nogRed{
color:green;
}
</style>
</head>
<body>
<p class = "red">我要红红红</p>
<p class = "red">我要上春晚</p>
<p class = "red">我要火</p>
<p id = "notRed">我就不想红</p>
</body>
</html>
下面说另外一个问题，大家想一下
<html>
<head>
<title>我是网页的标题</title>
<style>
p {
color:red;
}
p {
color:green;
}
</style>
</head>
<body>
<p>我要红红红</p>
<p>我要上春晚</p>
<p>我要火</p>
<p>我就不想红</p>
</body>
</html>
最后文字是红色还是绿色？注意结论是 后面的覆盖前面的，当然是绿色，说完了这些细节的css样式，我们说一个非常重要的概念，盒子模型，说盒子模型的时候我们得先说一个标签div，干啥使得，装东西的。加入一个开发商想盖房子得咋弄，先圈一块儿地，然后呢是不是在去规划 小区里面的一排一排的房子啊。
所以，网页就相当于一块儿地，而div就是用来把网页化成一块一块，布局用的。
盒子模型的意思就是一个，一个房子的组成，不废话，直接整。看图。
盒子模型.jpg
咋玩呢？
直接整例子
<html>
<head>
<title>我是网页的标题</title>
<style>
div{width:200px;height:200px;background:red;border:1px solid;padding:20px;margin：20px;}
</style>
</head>
<body>
<div>我是帅气的盒子</div>
</body>
</html>
注意，css的特点就是你记住了就会，记不住就不会，真心没啥难的，有同学会说老师你都给我讲讲，技术学技术更多的是练习练习再练习，你谈女朋友的时候也不是把什么都搞明白了才去谈的吧，所以你要学会和技术谈恋爱，具体问题实际项目里面我们会再讲，实际做技术就像过日子，见招拆招，边做边学，没听说过一个孩子把所有都学会了才去上学的。
估计这块儿比较难，大家先自己敲敲回头我再详细说下。未完待续。
