这几天一直在跟着培训课程，跟着往前跑！一直没有时间写博文，好不容易的一个周日休息，也因为我用于学习 html+css给霸占了，今天终于能有机会发博文了。也是找个机会嘚瑟一下子了，hiahia~ 两天终于将css+html 基础课程看完了！做了一些笔记！分享一下！
1.html 里面的段落的设置 < p>< /p>默认的段前段后总是有空白行的，不喜欢的话可以使用css删除！
2.对内容的字体进行强调，可以使用 em 文字内容 /em 或者 strong 文字内容 /strong ，但是两者之间有差别：使用 em /em 标签的时候，文字内容，显示的是 斜体，使用 strong /strong 显示的是粗体文字。程序员较多使用的是 strong /strong 标签！
3.em /em strong /strong span /span 标签中间添加文字内容，其中前两者是为了强调一段话中的关键字使用，他们的语义是强调。后者是没有语义的，他的作用就是为了设置单独的样式用的！
4.通过 q 文字内容 /q 来引用简短文本文字内容！注意要引用的内容不用加双引号，浏览器会对引用的内容自动添加双引号！而blockquote是对长文本的引用，而且使用的时候，同样不需要添加引号，他的默认样式不是自动添加 双引号，而是默认引用文字前后缩进！
5.换行符：
XHTML1.0写法：
< br / >
html4.01写法：
< br >
现在一般使用XHTML1.0的版本的写法（其它标签也是），这种版本比较规范！因为html里面是忽略空格和换行符的，所以之境界在段落里面书写的时候，添加空格和换行是没有意义的！添加空格的代码：’  ;‘中间不能添加空格，为了在文本中显示我添加了空格，其实这是不对的！后面的分号不要忘记！
6.添加水平横线标签：< hr />
< hr >
xhtml1.0写法：
< hr />
hr标签与br标签一样都是空标签，只有一个开始标签，没有结束标签！
hr里面默认样式线条都比较粗，颜色为灰色！不喜欢的话，可以使用css进行修改！
7.为网页添加地址信息：< address >< / address >标签
写法：< address>地址内容< /address>， 在浏览器中的显示是斜体，如果不喜欢，可以通过css进行修改！
8.为网页添加一行代码：< code>代码语言< /code>
写法：< code>代码语言< /code> 。
如果是多行代码的话，可以使用< pre>多行代码< /pre>！
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>code标签介绍</title>
</head>
<body>
<p>我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
</body>
</html>
通过这样添加一行代码的时候有大括号的，需要将< code>< /code>添加到大括号的外面！
9.pre标签的主要作用：预格式化的文本。被包含在pre标签里面的空格还有空行都会保存，不用像之前的那样，添加< br /> ,  ;标签。
pre标签不只是为了显示计算机的源代码使用的，当你需要在网页中预显示格式时，都可以使用它，只是pre标签的一个常见的用途是用于显示计算机中的源代码。
10.添加信息列表：ul标签
ul–li是没有 前后顺序的信息列表。
语法：
< ul>
< li>水果< /li>
< li>蔬菜
< li>零食< /li>
< /ul>
ul – li 在网页中的默认样式：每项的li前面都自带一个 小圆点。
11.添加有序列表：ol – li
语法：
< ol>
< li>信息< /li>
< li>信息< /li>
…
< /ol>
在网页中的默认显示，在每一项 li 前面都再带一个 序号，序号默认从一开始！
12.排版标签：< div>< /div>
在网页制作的过程中，可以将一些独立的逻辑部分划分出来，放在一个div/标签中，div标签就相当于一个容器。
语法：,
< div>…< /div>
1）首先确定逻辑部分。逻辑部分：页面上相互关联的一组元素，如网站中的独立的逻辑板块，这是一个典型的逻辑部分。
2）通过给div命名，能够使逻辑更加清晰。为div添加id属性，进行唯一标识div。
语法：
< div id = “版块名称”>…< /div>
13.添加表格：table标签
创建表格的四个元素：tbody,tr,th,td;
1)< tbody>…< /tbody>
当表格内容非常多的时候，表格会下载一点，便显示一点，当使用tbody标签的时候，会下载完毕，再显示。
2）< tr>…< /tr>
表格的行数。
3）< td>…< /td>
表格的单元格，一行中有几个单元格，就有几列！
4)< th>…< /th>
表格的头部的一个单元格，即表格表头。
table 表格 在没有添加css样式的时候，是没有表格线的。
表头也就是th标签中的文本默认为粗体，并居中显示。
14.为表格添加标题和摘要：caption标签,summary属性
< table summary = “摘要内容”>
< caption>表格标题< /caption>
< /table>
添加的摘要是不会在内容页面显示的，起主要的目的是使搜索引擎更容易知道网页的内容！
15.为网页添加链接，是网页能够链接到另一个界面：< a > < /a>标签
语法：
< a href = “目标网址” title = “鼠标滑过显示的文本”>链接显示的文本< /a >
title这个属性在实际网页开发的时候，作用很大。主要方便搜索引擎了解这个链接的内容，语义化更友好！
< a >< /a>标签中设置的内容文字，默认样式是未点击之前是蓝色，点击之后是紫色，通过css定义属性 a{color:#000;}可以对其进行修改！
16.新建浏览器窗口打开链接，需要添加一个属性：target属性
语法：
< a href = “目标地址” target = “_blank”>click here< /a>
17.为网页添加邮箱地址：mailto让使用者便捷的向管理员发送邮件。
语法：
< a href=”mailto:yy@qq.com?lufei@qq.com&subject= 主题&body= 邮件内容”>发送
跳转出的页面中主题，收件人都已经填好！
mailto后面有多个参数的时候，第一个参数必须以？开头，后面的参数每一个以& 分隔。mailto后面紧跟的那个是发送人邮箱地址，即从问号开始的才是第一个参数
18.插入图片：img标签
语法：
< img src=”图片的地址” alt=”下载失败时的替换文本” title=”提示文本”>
src：标识图像的位置；
alt:指定图像的描述性文本，当图片不可见时，或者图片下载失败时，便能显示该属性指定的文本。
title：在图像可见时，提供对图像的描述（鼠标划过图片时显示的文本）。
图片可以是JPG，png，JPEG格式的图像文件。
19.使用表单标签，与用户进行交互：form表单标签
表单可以吧浏览者输入的数据，传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
< form method=”传送方式” action= “服务器文件”>
1）form标签是成对存在的，以< form>标签开始，< /form>标签结束
2）action 浏览者输入的数据被传送到的地方，比如一个php页面
3）method 数据传送的方式 （get/post）
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>1）所有表单控件（文本框，文本域，按钮，单选框，复选框等）都必须放在< form>< /form>标签之间，否则用户使用的信息传送不到服务器端
20.为网页添加文本输入框，密码输入框：用户输入数据时候需要用到文本框，文本框也能在一定条件下转化为密码框。
语法：
< form>
< input type=”text/password” name=”名称” value=”文本” />
< /form>
1)type:当type=”text”时，输入框为文本输入框。
当type=”password”时，输入框为密码输入框。
2）name:为文本框命名，以备后台程序asp，php使用。
3）value：为文本输入框设置默认值。一般起到提示的作用！
21.支持多行文本输入的文本域：
当用户需要在表单中输入大段文字的时候，需要用到文本输入域。
语法：
< textarea cols=”列数” rows=”行数”>文本< /textarea>
在< textarea>< /textarea>标签之间可以输入默认值。
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
此处的rows cols属性，可以通过css中的height,width来替代。
22.添加单选框，复选框：
语法：
< input type="radio/checkbox" value="值" name = "名称" checked="checked"/>
1)当type为radio时，控件为单选框。
当type为checkbox时，控件为复选框。
2）value提交数据到后台服务器的值
3）name为控件命名，以备后台php，ASP使用。
4）checked:当设置checked=checked时，该选项被默认选中。
同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才能起到单选的目的。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>单选框、复选框</title>
</head>
<body>
<form action="save.php" method="post" >
<label>性别:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
</body>
</html>
后面的两个单选框代码里面的 name属性 有误，同一个单选框的name值应该一样，同一组的单选按钮，才能起到单选的目的！
23.添加下拉列表框：
节省空间，可单选，也可多选！
<form name="form">
<select>
<option value="读书">读书</option>
<option value="运动">运动</option>
<option value="音乐">音乐</option>
<option value="旅游">旅游</option>
<option value="购物" selected="selected">购物</option>
</select>
</form>< option value=”提交值” >选项< /option>
1)value: 提交值是想服务器提交的值，选项是显示的值。
2）selected=”selected”时：，该选项就被默认选中。
为网页添加多选下拉列表框：
<form>
<label>爱好：</label>
<select multiple="multiple">
<option value="读书">读书</option>
<option value="运动">运动</option>
<option value="音乐">音乐</option>
<option value="旅游">旅游</option>
<option value="购物">购物</option>
</select>
</form>通过ＣＴＲＬ+单击，可以选择多个选项！
24..使用提交按钮，提交数据：
表单中有两种按钮可以使用，提交按钮，重置。当用户需要提交数据到服务器时，需要用到提交按钮。
语法：
< input type=”submit” value=”提交” >
type :type只有值设置为submit时，按钮才有提交作用！
value:按钮上显示的文字。
<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" name="myName" value=" " />
<input type="submit" value="提交" name="submitBtn" />
</form>25.为网页添加重置按钮，重置表单信息：
语法：
< input type=”reset” value=”重置”>
与submit 标签一样。
26.label标签：
不会向用户呈现任何特殊效果，它的作用是为鼠标用户提供了可用性！ 如果点击label标签内的文字的话，就会触发该控件，进行选择！即当用于单击label标签的时候，浏览器就会自动将焦点转到和标签对应的表单控件上！就自动选择了和该表单对应的控件上面！
语法：
< label for=”控件id名称”>
控件id的名称一定要跟相应控件id属性的值相同
初识CSS
1.css全称：层叠样式表（Cascading Style Sheets） 它主要用于定义html内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等。
2.使用css的一个好处是，能够使不同网页位置的文字有着统一的字体，字号，或者颜色等！
3)css样式由选择符和声明组成，而声明又由属性和值组成。
p{color:blue}
p为选择符，color为属性，blue为值，大括号里面为声明！当有多条声明的时候中间可以用英文分号”;”分隔。
p{font-size:12px;color:red;}
<1>最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
为了样式更容易阅读，可以将每条代码写在一个新行内。
p{
font-size:12px;
color:red;
}
4)在css中的注释代码：是采用/* 注释内容 */ 来注释的。
5）css样式代码插入的方式：内联式，嵌入式和外部式三种。
<1>内联式
css样式表就是把css样式直接写进html标签里面。
< p style=”color :red ; font-size:12px” >这里文字是红色！< /p>
多条声明的时候，中间用（英文半角）分号隔开，最后一个不用加分号。
<2>嵌入式
对整个文本的不连续的几个文字内容修改样式，可以选择嵌入式。
<style type="text/css">
span{
font-size:12px;
color:red;
}
</style>一般来说：嵌入式css样式必须写在< style>< /style>之间，并且一般情况下嵌入式css样式写在< head>< /head>之间。
<3>外部式
外部式的css文件可以单独的写在一个文件中。外部式css样式，也成外联式，就是把css代码写在一个单独的外部文件中，这个css样式文件以” .css”为扩展名，在< head>内（不是在< style>标签内）使用link标签将css样式文件链接到html文件内。
< link href=”base.css” rel=”stylesheet” type=”text/css” />
1.css样式文件名称以有意义的文件英文字母命名。如main.css。
2.rel=”stylesheet” type=”text/css”是固定写法，不可修改。
3.link标签一般写在< head>标签之内。
6)三种样式的比较：三种样式是有优先级的，他们的优先级为：内联式>嵌入式>外部式，但是嵌入式优先级大于外部式是前提的，就是距离想要改变的目标文字，越近其优先级越高。即 就近原则.
但是这个优先级的法则总结也是有前提的，就是内联式，嵌入式，外联式css样式是在相同的权值下进行的比较！
每一条css样式声明（定义）有两部分组成。
样式如下：
选择器{
样式;
}
大括号之前的内容就是选择器，他指明了大括号里面呢的样式的作用对象。也就是样式作用于网页中的哪些元素。
body{
font-size:12px;
color:red;
}
就是对body进行的样式声明（定义）。
标签选择器：其实就是html里面的标签。
p{font-size:12px;line-height:1.6em;}
上面css样式代码的作用：为p标签设置12px字号，行间距设置为1.6em的样式。
h1{
font-weight:normal;
color:red;
}
为h1标签之间的内容 修改样式：去掉h1默认的粗体样式，并将字体颜色设置为红色。
类选择器：类选择器在css样式编码中是最长用到的。
语法：
.类选器名称{css样式代码；}
1.英文原点开头
2.类选器名称可以任意起名，但是不要起中文
使用方法：
1>使用合适的标签把要修饰的内容标记起来。
< span>胆小如鼠< /span>
2>使用class=”类选择器名称”为标签设置一个类
< span class=”stress”>胆小如鼠< /span>
3>设置类选择器css样式
.stress{color:red;}/类之前要加一个英文半角圆点/
ID选择器：很多方面，ID选择器都类似于类选择符，但也有一些重要区别：
1）为标签设置id=”ID名称”，而不是class=”类名称”。
2）id选择符的前面是#，而不是英文圆点” . “,
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
#stress{
color:red;
}
#setGreen{
color:green;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节<span id="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>类和ID选择器的区别：
相同点：都可以应用于任何元素
不同点：1>ID选择器只能在文档中使用一次。与类选择器不同，在一个html文档中，id选择器只能使用一次，而类选择器可以使用多次。
2>可以通过类选择器词列表方法为一个元素同时设置多个样式。可以为一个元素设置多个样式，但是只能用类选择器实现，ＩＤ选择器实现不了。
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>子选择器：
子选择器是一类比较有用的选择器，即大于符号（>），用于选择指定标签元素的第一代子元素。
.food>li{border:1px solid red;}
这行代码会使class下的子元素li(水果蔬菜，即下面的第一个分类包含的元素)加入红色实线边框！
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;}
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
伪类选择符
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。
关于伪选择符：
关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
h1,span{color:red;}
.first,#second span{color:green;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>继承：
css的某些样式是具有继承性的！继承是一种规则， 它允许html 样式不仅应用于某个特定的html标签元素，还应用于其后代！
p{color:red;}
<p>我是一个<span>handsome</span>man!</p>可以看到网页中的< p>< /p>标签之间的内容包括span里面的内容全部变红！
但有一些css样式是不具有继承性的！如：border：1px solid red;
该样式只是为p标签设置边框为1像素红色实心边框线！对于其子元素span是没有起作用的！
特殊性：
为一个html标签设置多个css样式，该标签使用哪种样式，取决于css样式的权值，权值高的样式，决定了该标签的样式！
p{color:red;}
.first{color:green;}
<p class="first">I‘m a handsome man!</p>标签的权值为1，类选择符的权值为10，ID选择器的权值最高为100。
p{color:red;}//权值为1
p span{color:green;}//权值为2
.first{color:white;}//权值为10
p span.first{color:black;}//权值为12
#footer .note p{color:pink;}//权值为111继承也有权值但是比较低，有的文献指出他只有0.1，所以可以理解为继承的权值最低。
层叠：
当html文件里面有多个css样式的时候，并且具有相同的权值。会根据就近原则 进行选择。可以理解为后面的样式会覆盖前面的样式。
重要性：
在某些 情况下，需要为某些css样式，设置为最高权值！可以使用！important来解决！
p{color:green!important;}
p{color:red;}
p{color:pink;}
<p>I‘m a handsome man!</p>最后显示的是green！ !important 必须写在分号前面！
这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
文字排版–字体
现在网页一般设置喜欢设置：”雅体微黑”
body{font-family:”Microsoft Yahei”;}
或者
body{font-family:”微软雅黑”;}
后者的兼容性比前者的差！
不要设置不常用的 字体，因为用户能够你设置的字体样式取决于用户本地电脑上是否安装了你设置的字体！
文字排版–字号，颜色
body{font-size:12px;color:green;}
通过上述代码将网页中的文字的字号设置为12像素，并把字体颜色设置为绿色；
文字排版–粗体
p span{font-size:20px;color:red;font-weight:bold;}
文字排版–斜体
p a{font-style:italic;}
文字排版–下划线
span {font-decoration:underline;}
文字排版–删除线
.oldPrice{text-decoration:line-through;}//当然oldPrice是类名
段落排版–缩进
< p text-indent:2em>我是一个好人，然而总是因为是个好人，被各种情况下，各种类型的人发好人卡，我也真是醉了，实际上我只是想周围的人都过得好好的！< /p>
2em的意思是文字的2倍大小！
段落排版–行间距
p{line-height:1.5em;}
< p text-indent:2em>我是一个好人，然而总是因为是个好人，被各种情况下，各种类型的人发好人卡，我也真是醉了，实际上我只是想周围的人都过得好好的！< /p>
段落排版–中文字间距，字母间距
网页中对文字间距，字母间距进行设置，就需要letter-spacing
h1 {
letter-spacing:50px;
}
< h1>了不起的盖茨比< /h1>
这个样式使用在英文单词的时候，是设置字母与字母之间的间距！
单词间距设置：设置英文单词之间的间距，可以使用word-spacing来实现。
h1 {
word-spacing:50px;
}
< h1>了不起的盖茨比< /h1>
段落排版–对齐
为块状元素中的文本，图片设置居中样式，可使用text-align样式代码。
h1 {
text-align:center/left/right;
}
< h1>了不起的盖茨比< /h1>
元素分类： 在html里面的标签元素大致分为三种不同的类型：块状元素，内联元素（行内元素）和内联块状元素。
常见的块状元素有：< div>,< p>,< h1>..< h6>,< ol>,< ul >,< dl>,< table>,< address>,< blockquote>,< form>
常见的内联元素有：
< a >,< span >,< br>,< i>,< em>,< strong>,< label>,< q>,< var>,< cite>,< code>
常见的内联块状元素是：
< img>,< input>
元素分类–块级元素
在html 里面的< div>,< p>,< form>,< h1>,< ul>,< ol>就是块级元素！设置：display:block 就是将元素显示为块级元素。
a{display:block;}
上面的代码就是将内联元素a 转化为块状元素，从而使a元素具有块状元素特点。
块级元素特点：
1)每个块级元素的都从新的一行开始，并且其后的元素也另起一行！
2)元素的高度，宽度，行高以及顶和底边距都可设置！
3)元素在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致)，除非设定一个宽度！
元素分类：内联元素
在html里面< a>,< span>,< label>,< strong>,< em>就是典型的内联元素（行内元素）。可以通过display：inline;将 块状元素设置为内联元素。
div{
display:inline;
}
< div>我要变成内联元素！< /div>
内联元素特点：
1）和其他元素都在一行上；
2）元素的高度宽度，以及顶和底边距不可设置；
3）元素的宽度就是他包含的文字图片的宽度，不可改变。
元素分类–内联块状元素
内联块状元素就是同是具有内联元素和块状元素的特点。
通过代码display:inline-block;就是将元素设置为内联块状元素！< img>,< input>标签就是这种内联块状标签！
inline-block元素特点：
1）和其他元素都在一行上；
2）元素的宽度，高度和顶部和底部边距都可以设置！
盒子模型：块级标签都具备盒子模型的特点；
盒模型–边框（一）
盒子模型的边框就是围绕着内容及补白的线！
他有粗细，颜色，样式三种属性！
div{border:2px solid red;}
这是缩写形式，当然也可以分开写；
div{
border-width:2px;
border-color:red;
border-style:solid;
}
1.border-style（边框样式）常见样式有：
dashed(虚线)( 线段 比较稀疏 ) dotted(点线) solid(实线)
2.border-color（边框颜色）中的颜色可以设置为16进制颜色。
border-color:#888;
3.border-width（边框宽度）中的宽度也可以设置为
thin medium thick 但是不常用，最常还是用像素px；
盒模型–边框（二）
p{
border-top/bottom/left/right:1px dashed red;
}
盒模型–宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
其中padding为内边距，margin 为外边距。
盒模型–填充
元素内容和边框之间是可以设置距离的，称之为“填充”！
填充也可以分为上，右，下，左。
中间以空格分开，不是分号！！！！！
div{padding:20px 10px 15px 30px;}
顺序一定不要搞混！顺时针
当然也可以分开写！但是如果上下左右都是10px，那么可以这么写！
div{padding:10px;}
如果上下是10px,左右是20px;那么也可以这么写！
div{padding:10px 20px;}
如果是左右的一样也可以这样写！
div{padding:10px 20px 30px}
padding， border，margin的写法都是一样的！
盒模型–边界
元素与其他元素之间的距离可以用 边界设置！
基本与padding，也是顺时针，上，右，下，左。
padding 在边框内，margin 在边框外
css布局模型：
css布局模型与盒模型一样 ，都是css最基本的，最核心的概念！但布局模型是建立在盒模型之上，又不同于我们通常说的Css布局样式或Css布局模板。如果说布局模型是本，那css布局模板就是末了，是外在的表现形式！css包含三种基本的布局类型，Flow ,Layer,Float.在网页中，元素有三种布局模型：
1）流动模型（Flow）
2）浮动模型（Float）
3）层模型（Layer）
流动模型：
流动（Flow）是默认的网页布局模式，也就是说网页在默认状态下的html网页元素都是根据流动模型来分布网页内容的！
流动布局模型的两个经典特征！
1）块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因在默认状态下，块状元素的宽度都是100%，实际上块状元素都会以行的形式占据位置！
2）在流动模型下，内联元素都会在所处的包含元素内，从左到右水平分布显示！
浮动模型：
设置两个块状元素并排显示，可以通过设置元素浮动来实现！任何元素在默认状态下是不能浮动的，但可以通过css定义为浮动！
层布局模型：
层布局功能就像是图像软件Photoshop软件里面的非常流行的图层编辑功能一样，每个图层能够准确定位操作！但在网页设计领域，由于网页设计的活动性，导致并没有那么热门！
层模型有三种形式：
1>绝对定位
2>相对定位
3>固定定位
1.绝对定位：通过position：absolute；来设置绝对定位。这条语句的作用将元素从文档流中拖出来，然后使用left，right，top，bottom，属性，相对于其最接近的一个具有定位属性的父包含块进行绝对定位！如果不存在这样的包含块，则相对于body元素，即浏览器窗口！
2.相对定位：如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
3.固定定位：fixed表示固定定位，与absolute 类型相似！但他的相对移动的坐标是视图（屏幕内的网页窗口）本身！由于视图本身是固定的，他不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小！因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会随文档流动。这与background-attachment:fixed;属性功能相同！
4.relative 与 absolute 的组合使用
使用的时候遵从的规范：
1）参照定位必须是相对定位元素的前辈元素！
< div id=”box1”>
< div id=”box2”>相对参照元素进行定位< /div>
< /div>
2）参照定位的元素，必须加上position：relative；
# box1{
width:200px;
height:200px;
position:relative;
}
3）定位元素加上 position：absolute；便可使用top,bottom,left,right进行偏移定位了！
# box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
颜色值缩写：如果设置颜色是16进制的色彩值时，如果每两位的色彩值相同，可以缩写 一半！
字体缩写：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:”宋体”,sans-serif;
}
缩写为：
body{
font:italic small-caps bold 12px/1.5em “宋体”,sans-serif;
}
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em “宋体” ,sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
颜色设置：
1，英文命令颜色，2，RGB颜色，3，十六进制颜色
网页中的RGB颜色与Photoshop里面的RGB颜色是一样的，由三种颜色的比例来配色！
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
每一项的值可以是0~255之间的整数，也可以是0%到100%的百分数！
16进制颜色是目前比较普遍使用的方法。其原理其实也是RGB设置。但是其每一项的值由0~255变成十六进制00~ff
p{color:#00ffff;
}
长度值：目前较长使用到的 em， px , %都是相对单位！
css规范中假设 90px==1英寸
本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px
但当font-size给定的值是em时，此时计算的标准以其父元素的font-size为基础！
p{font-size:12px;line-height:130%}设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：
加入 table 标签
设置 display;inline 方法
设置 position:relative 和 left:50%;
这一小节我们来讲一下第一种方法：
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
举例如下：
html代码：
< div>
< table>
< tbody>
< tr>< td>
< ul>
< li>< a href=”#”>1< /a>< /li>
< li>< a href=”#”>2< /a>< /li>
< li>< a href=”#”>3< /a>< /li>
< /ul>
< /td>< /tr>
< /tbody>
< /table>
< /div>
css代码：
< style>
table{
margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
< /style>
将想要水平居中的内容用表格包围起来！
第二种方法：改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果。如下例子：
html代码：
< body>
< div class=”container”>
< ul>
< li>< a href=”#”>1< /a>< /li>
< li>< a href=”#”>2< /a>< /li>
< li>< a href=”#”>3< /a>< /li>
< /ul>
< /div>
< /body>
css代码：
< style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
< /style>
这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
代码如下：
< body>
< div class=”container”>
< ul>
< li>< a href=”#”>1< /a>< /li>
< li>< a href=”#”>2< /a>< /li>
< li> < a href=”#”>3< /a>< /li>
< /ul>
< /div>
< /body>
css代码：
< style>
.container{
float:left;
position:relative;
left:50%
}//父类设置为float：left;position:relative;left设置为50%;
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;//子类中的设置，position：relative;letf:-50%;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
< /style>
这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。
这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。
垂直居中：父元素高度确定的单行文本的垂直居中的方法，是通过设置父元素的height和line-height高度一致来决定的！
< style>
.container{
height:100px;
line-height:100px;
back-ground:#999;
}
< /style>
垂直居中-父元素高度确定的多行文本（方法一）
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>table td{height:500px;background:#ccc}因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div><style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div><style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>以上是在慕网课做的笔记，有需要的可以自己去慕课网寻找相应资源！
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/ice_alone/article/details/47008133
