HTMLCSS知识分类总结

HTML5 是什么

HTML5 是HTML最新的修订版本，是下一代 HTML 标准，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5 的设计目的是为了在移动设备上支持多媒体，简单易学。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML / HTML5 、CSS / CSS3 学习网站：

https://www.w3school.com.cn/html5/index.asp

https://www.runoob.com/html/html5-intro.html

https://www.html5tricks.com/category/html5-tutorials

HTML 发展历史（wikipedia）

①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

②HTML 2.0：1995年11月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。

③HTML 3.2：1997年1月14日，W3C推荐标准。

④HTML 4.0：1997年12月18日，W3C推荐标准。

⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。

⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

版本	日期
HTML	1991
HTML 1.0	1993.06
HTML 2.0	1995.11.24
HTML 3.2	1997.01.14
HTML 4.0	1997.12.18
HTML 4.01	1999.12.24
XHTML 1.0	2000.01.26
XHTML 1.1	2001.05.31
XHTML 2.0	2009
XHTML 5	2012
HTML 5 (candidate)	2012.07
HTML 5 (released)	2014.10.28
HTML 5.1	2016.11.01
HTML 5.2	2017.12.14

HTML5 新特性：

1、语法简化了
2、HTML5支持了视频和音频（不需要安装任何的插件）
3、HTML5增加了很多的语义化标签: 
<header></header>、<nav></nav>、<footer></footer>、<main></main>等等
4、支持画布（结合js）
5、支持本地存储（结合js）
6、完美支持了CSS3
4、HTML 的基本结构
（1）html文件的创建  创建扩展名为 .html或者.htm
（2）html内容
html是由大量的标签组成
标签的分类：
单标签:<标签名 />  在单标签中，/可以省略不写 <link/>  <img/> 
双标签：<标签名></标签名> 例如：<html></html>、<style></style>
注意：单标签不会嵌套其它的内容，双标签中会嵌套其它的内容

html 完整结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>米扑博客(blog.mimvp.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

5、HTML的开发工具

Dreamweaver、高级记事本（NodePad++、SublimeText、vscode、Atom）、webstorm、Hbuilder（国产）等等

详见米扑博客：Sublime、Atom、VS Code、Notepad++

6、HTML标签

1）<!DOCTYPE> 标签

用于文档版本的声明
HTML4的声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN”  "http://www.w3.org/TR/html4/loose.dtd">
XHTML的声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 XHTML是更严谨的HTML，出现在HTML4后HTML5之前
XHTML和HTML4的区别：
1、xhtml必须的标签必须被正确嵌套
2、xhtml中的标签必须被关闭
3、xhtml中必须全是小写字母
4、xhtml中必须包括根元素 <html>
html5的声明：
<!DOCTYPE html>
注意：声明必须写在根元素前

2）html标签

html标签是所有标签的根元素，所有的标签都写在html内部，除了版本声明标签
<html></html>

3）head标签

语法结构：<head></head>
主要是用于设置网页的头部内容

4）body标签

语法结构：<body></body>
网页主体内容都写在body标签中

5）title标签

语法结构：<title></title>
用于给网页设置标题信息
eg:
<title>第一个HTML页面</title>

6）meta标签

语法结构：<meta />
该标签可用设置页面的编码格式和设置页面的相关元信息（描述、关键字等等）
 a、设置页面的编码信息
 语法结构:<meta charset=”编码”/>
常用的编码格式：
  UTF-8:国际编码格式，支持所有的国际语言（推荐）
  GB2312：大陆编码 ，识别中文简体
BIG5:台湾编码，识别中文繁体
GBK:中文编码 主要识别所有的汉字

b、用于设置页面的关键搜索
语法结构：
<meta name=”keyword” content=”关键字1,关键字2,……”/>
c、用于设置页面的描述信息
语法结构：
<meta name=”description” content=”对网页的整体描述” >

7）注释标签

<!--  xxx --> 该标签用于页面内容的注释，
注释的目的：
第一、某一段不需要的代码，可以注释掉，在页面显示的时候该代码不会被执行
第二、对于某一些代码可以增加一些解释说明，方便下次或者别人阅读代码
语法结构：<!--需要注释的内容-->
在webStrom中注释的快捷键是  Ctrl+/

8）h标签

语法结构：<hn></hn>  n的取值 1-6
该标签表示页面内容的不同级别的标题
eg:
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

9）p标签

语法结构：<p></p>
用于设置页面的内容分段
属性：用于设置标签的样式
语法：<标签名 属性1=”值” 属性2=”值” ……></标签名>
注意：不管是p还是h标签，内容都是左对齐，都可以通过
align属性改变内容水平方向的对齐方式
align取值 ：left(左对齐，默认取值)、center(居中)、right(右对齐)

10）br标签

该标签是强制换行标签，因为浏览器在解析代码时代码中换行无效,所以需要使用<br/>进行换行操作

11）hr标签

<hr>  该标签是横线标签
可以通过属性对hr的样式进行设置
hr的属性：
1)	width：用于设置横线的宽度
2)	align:设置横线的水平位置 left、center(默认)、right
3)	color:设置横线的颜色
4)	size：设置横线的高度

12）strong标签

<strong>  该标签主要用于对文本的强调，如果写在strong中文本会加粗显示
语法结构：<strong>强调文本</strong>

13）em 标签

<em>  该标签也是对文本起强调作用，只是强调语气没有<strong>标签的强  主要显示效果是文本倾斜
语法结构：<em>强调文本</em>

注意：<b>和<strong>、<i>和<em>的区别：表现效果都是一样，只是<strong>标签和<em>起到强调作用

14）特殊符号

空格的表示方式：
&nbsp; 键盘上空格的宽度 ，不会受字体大小、加粗、字型等的影响
&emsp;  全角空格，一个中文字符的宽度，宽度会受字体大小、加粗、字型等的影响
&ensp; 半角空格，半个中文字符的宽度，同上
&gt; 表示大于符号  &lt;表示小于符号
&copy;  表示版权符

15）img 标签

<img>  该标签主要用于引入图片
语法结构：<img src=”引入的路径”/>
  属性：
 src:用于设置图片的路径
  绝对路径：一般是完整路径（带盘符的路径或者是网址）

  相对路径：相对当前文件所在路径进行文件的查找（网页中常用）
注意：绝对路径中带盘符路径在网页布局中不推荐使用，因为绝对路径是不变的，不好实现网页的迁移
./ 表示当前路径  可以省略不写
../ 表示回到上一级目录（父目录）
如果访问的文件与当前文件在同一目录下，直接可以通过文件名进行访问
<img src=”1.jpg”>
如果访问的文件与当前文件不在同一目录下
（1）与父目录在同一目录下  可以先回到父级目录，然后通过文件名进行访问
<img src=”../images/1.jpg”>
（2）在当前文件所在目录的下一级目录先访问下一级目录，再查找对应的文件
<img src=”imgs/1.jpg”>

站点图解：

img 属性参数：

alt:当图片未被正常加载时的提示信息
title：用于设置图片的标题信息
width:用于设置图片的宽度，如果不设置高度，高度会随宽度等比例变化
height:用于设置图片的高度 同理，如果不设置宽度，宽度也会随高度等比例变化（所以宽高设置一个值就可以）
align：设置图片与左右文本的对齐方式
  取值：  bottom（底部对齐，默认取值）
 				middle（垂直居中对齐）
top（顶部对齐）
hspace:用于设置图片与左右内容的距离
vspace:用于设置图片与上下内容之间的距离

网页布局中常用的图片的格式：JPEG(.jpg .jpeg)、PNG(.png)、GIF（.gif）

16）a 超链接标签

<a>  该标签主要用于给内容添加超链接
语法结构:<a href=”超链接路径”>内容</a>
属性：
href:用于设置超链接的目标路径  必须属性 #表示空链接
target：_self  默认取值 在本窗口打开链接页面
 		  _new  在新的窗口打开链接页面
      _blank   也是在新的窗口打开链接页面
锚链接：
通过超链接跳转页面中指定的位置
 
如上，在同一个页面中，通过超链接href的值对应上标签的id值，可以跳转到标签所在位置
在不同页面中跳转到指定位置：
 

邮箱链接：
<a href=”mailto:邮箱地址”></a>
例子：
<a href=”mailto:yuxuemeiyi@163.com”>点击发送邮件</a>

17）ol 有序标签

<ol> 标签是有序列表标签，使用该标签会默认在列表前添加有序的标记
语法结构：
<ol>
<li>内容</li>
<li>内容</li>
……
</ol>
ol的属性：
type:用于设置有序列表前的标记样式 取值 1(默认)/a/A/i/I
start:设置有序列表的开始位置 取值只能数字

18）ul 标签

<ul>  该标签是无序列表标签，默认会在列表项前添加标记
语法结构：
<ul>
<li></li>
<li></li>
……
</ul>
type:
  disc:实心圆  默认取值
circle:空心圆
square:实心方块
none：去掉标记 在IE浏览器中不会被识别

19）dl 标签

<dl>  该标签是自定义列表标签
语法结构：
<dl>
<dt></dt>  <!--自定义列表的标题-->
<dd></dd> <!--对标题的描述-->
</dl>
eg:
<dl>
    <dt><img src="../images/b_04.png" alt=""></dt>
    <dd>对标题内容的描述信息</dd>
</dl>

20）table 表格标签

<table>  该标签是表格标签
语法结构：
<table>
<tr><td></td><td></td>……</tr>
<tr><td></td><td></td>……</tr>
……
</table>
table标签的常用属性：
 border:设置表格的边框  如果值为0，表示没有边框，也是默认取值
width：设置表格的宽度
height：设置表格的高度
cellspacing:用于设置表格单元格与单元格的距离
cellpadding:用于设置单元格边框与内容之间的距离
align：用于设置表格的水平位置 left、center、right
bgcolor:用于设置表格的背景颜色
background:将图片设置为表格的背景 background=”图片路径”
bordercolor:用于设置表格边框的颜色

tr标签的属性：
bgcolor:设置某一行的背景颜色
background：将图片设置为某一行的背景
align：设置该行文本的水平位置 left/center/right
th标签：用于设置表格内容的表头，一般替换表格的第一行内容或者第一列td标签，th自动居中且有加粗效果
th的属性：
align：设置该单元格内容的水平位置（默认居中）

td标签的属性：
1)	bgcolor:设置具体单元格的背景颜色
2)	background：将图片设置为具体单元格的背景
3)	align：设置具体单元格内容的水平位置
4)	colspan:单元格的列合并 colspan=”n” n表示合并的列数
eg:colspan=”2” 说明该单元格占两列的位置
5)	rowspan:单元格的行合并  rowspan=”n” n表示合并的行数
eg:rowspan=”2” 说明该单元格占两行的位置

21）input 输入勾选标签

<input>  标签可以称为是输入标签，一般input标签的内容可以被提交
属性：
type:设置input标签的样式
 取值：
1)	text:单行文本输入框（如果没有type属性，默认也是以文本框显示）
2)	password：密码输入框
3)	radio:单选按钮框 在使用单选类型时，必须给input标签设置name属性，而且name属性值一致才表示是一组单选框
eg:
 <input type="radio" name="check">选项A
<input type="radio" name="check">选项B
4)	checkbox:复选框 必须给input标签设置name属性，而且name属性值一致才表示是一组数据（复选框）
eg:
<input type="checkbox" name=”km”>HTML
<input type="checkbox" name=”km”>css
<input type="checkbox" name=”km”>js
5)	file:文件上传
6)	submit:提交按钮 主要可用于数据的提交
7)	reset:重置按钮  可以让填写的数据恢复默认设置
8)	button：自定义按钮 结合js使用
9)	image:将图片定义成提交按钮  必须联合input标签的src属性使用
eg:
<input type="image" src="../images/1.jpg">
 html5新增类型：
   email：设置该文本框中需要输入的内容是邮箱格式 @
   url:设置文本框中输入的内容是网址 http://  https://
   number：设置文本框输入内容只能是数字
   date:设置日期输入框
注意：如果input标签的可进行提交或者是验证，必须结合<form>标签使用，一般需要提交的内容都是写在form标签中
 <form>主要用于数据提交
form重要属性：
action：用于设置数据提交的地址路径

 value：用于给input标签设置默认值
 placeholder: 设置文本框的提示信息
 checked：这是单选或复选的默认选中

22）select标签

<select>  该标签是下拉列表标签
语法结构：
<select>
<option>内容</option>
<option>内容</option>
……
</select>

23）textarea标签

<textarea>  该标签是文本域标签
语法结构：<textarea>默认值</textarea>
属性：
cols：设置每行能输入的字符数（改变宽度）
rows:设置可见的行数（改变高度）

24）video 视频标签

<video>  该标签是HTML5新增的用于视频引入的标签，该标签引入的视频资源浏览器在解析的时候不需要额外的下载播放插件
语法结构：
<video></video>
属性：
src:引入视频的路径
1)	controls:设置显示控制条 默认不显示
2)	autoplay：设置视频加载时自动播放
3)	muted：设置视频加载时静音播放
4)	loop:设置视频循环播放
5)	poster：设置视频的展示页面
video支持的视频的格式:MP4(所有的浏览器)、webm、ogv

25）audio 音频标签

<audio>  该标签是音频标签，可用页面中引入音频内容
<audio></audio>
属性：属性和video基本一致，除了没有poster属性

26）div 标签

<div>  标签可以将页面进行分节或者分块，在div中可以嵌套其它的任意标签

27）span 标签

<span>  用于页面中在同一行但是样式不一样的操作，用来组合文档中的行内元素

CSS

1、CSS的概念

CSS:层叠样式表（Cascading Style Sheets），用于定义如何显示HTML元素，比如HTML元素的大小、颜色、位置等等，基本所有的浏览器都支持css

2、CSS的作用

（1）美化HTML元素的外观
（2）对HTML元素进行布局（位置的变化）
（3）对HTML元素进行响应式布局，主要针对移动使用较多
（4）可以实现动画效果，而且实现2d或者3d转换

3、CSS的引入

（1）行内式
在标签的style属性中去设置css的样式
语法结构：<标签 style=”css的代码”></标签>
eg:
<span style="color: green;">css的样式引入</span>

（2）嵌入式
在网页嵌入css代码，嵌入式是将css代码集中写在<head></head>中的<style>css代码</style>中
<head>
<style>
CSS代码
</style>
</head>
eg:
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      p{ color: red;}
    </style>
</head>
<body>
<span style="color: green;">css的样式引入</span>
<p>css的第二种引入方式</p>
</body>
（3）外部引入式
将一个独立的CSS文件引入到HTML文件中 CSS文件的扩展名是 .css，注意CSS文件不能单独执行，必须在HTML文件中进行执行
a、链接式引入（推荐）
通过<link>标签引入外部CSS文件
语法结构：<link href=”css文件的路径” rel=”stylesheet”>

eg:
<link  href="../css/demo15.css" rel="stylesheet">

b、导入式
是在<head></head>标签中嵌入<style></style>,然后在<style></style>中填写 @import “CSS的文件路径”
语法结构：
<head>
<style>
@import”CSS的文件路径”
</style>
</head>
导入的路径编写方式：
@import “css的路径”
@import url(css的路径)  webstorm有效
（类似背景图片引入url）
@import url(“css的路径”)
eg:
<!-- 导入式引入-->
<style>
    @import url(../css/demo15.css);
</style>
导入式：是将整个页面加载完成之后在去加载css页面，当页面过大的时候会导致页面闪一下的情况

一个标签可以通过以上的几种引入方式设置样式：
a、设置的样式不冲突
所有引入方式设置的样式都会作用于标签上
b、设置的样式发生冲突 ，那么优先显示优先级高的引入样式
行内引入式优先级别最高，其它的三种引入方式是根据就近原则，谁隔标签近优先显示谁的样式

4、CSS的常用选择器

（1）全局选择器
该选择器是找到页面中所有的标签
语法结构：*{CSS代码}
eg:
*{ color: red;}
（2）标签选择器
该选择器是通过标签的名字找到对应的标签进行样式设置
语法结构：标签名{CSS的代码}
eg:
h1{ color: blue}

（3）类选择器
该选择器是通过标签的class的值找到对应的标签设置样式
语法结构：.class的值{CSS的样式}
HTML:
<p class="demo">段落标签</p>
<h1 class="demo">一级标题1</h1>
<h2 class="demo">二级标题1</h2>
CSS:
.demo{ color: red;}

同上，只要class值是demo的，字体颜色都是红色
（4）id选择器
通过标签的id的值找到具体的标签设置样式，注意：在同一个页面中，id值是唯一的
语法结构：#id的值{CSS的代码}
eg：
HTML:
<h1 class="demo" id="h">一级标题1</h1>
CSS:
#h{ color: yellow}
（5）后代选择器（派生选择器）
是通过有嵌套关系的标签去选择相关的后代标签
语法结构：  E F{CSS的代码}
E：代表的是父标签的选择器
F：代表子标签的选择器
注意：E和F之间用空格分开，空格不能省略
eg:
HTML:
<div id="div1"> <p>div1中的段落标签</p></div>
<div id="div2"> <p>div2中的段落标签</p></div>
CSS:
#div1 p{ color: red;}
（6）伪类选择器
伪类选择器其实是a标签的四种状态的选择器（链接前、鼠标移入、鼠标点击、访问过后的）
访问前：a:link{CSS的代码}
鼠标移入：a:hover{CSS的代码}
鼠标点击：a:active{CSS的代码}
访问过后： a:visited{CSS的代码}
eg:
HTML:
<a href="demo03--选择器.html" id="a1">超链接</a>
CSS:
 /*链接被访问前的样式设置*/
#a1:link{ color: aqua;}
 /*鼠标移入时的样式*/
 #a1:hover{ color: red;}
 /*鼠标点击时的样式*/
 #a1:active{ color: yellow;}
 /*链接被访问过后的样式*/
 #a1:visited{color: gray;}

注意：为了安全性,习惯性的将链接被访问前和被访问过后的样式设置一致
除了超链接之外，其它的标签可以设置鼠标移入和鼠标点击的样式
eg:
HTML:
<span>其它的标签</span>
CSS:
/*可以给span标签设置鼠标移入和鼠标点击样式*/
span:hover{ color: red;}
span:active{ color: aqua;}

5、CSS 常用属性

在设置CSS样式时，一个标签可以设置多个CSS样式,CSS代码的设置语法如下：
选择器{属性1:值;属性2:值;……}
在CSS中，属性与值之间用冒号，属性与属性之间用分号，都不能省略

基础属性：
width:该属性用于设置标签的宽度 常用的单位是像素 px
height：该属性用于设置标签的高度 单位和宽度一致
在CSS中，只要是长度或者是大小常用单位都是 px,而且px是不能够省略的
（1）常用文本属性
color：用于设置文本的颜色 
关于color取值：颜色的英文 red
颜色的16进制取值  #ff0000  red 
使用rgb(0-255,0-255,0-255)  案例 红色 rgb(255,0,0)
/*color: green;*/
color: #278fc4;
color:rgb(255,0,0);/*红色*/
font-size:设置字体的大小，一般是表示字体的高度
font-size: 40px;

font-weight:设置字体加粗
取值 100-900（不常用）、bold(加粗：常用)、normal(正常：默认)
font-weight: bold;
font-style:设置字体倾斜
normal（正常：默认）、italic 倾斜
font-family:设置字体的字型
font-family: "宋体,仿宋";/*一般第二个字体及以后的是备用字体*/

text-decoration：设置文本的装饰线效果
 取值：
none 没有装饰 一般标签都没有装饰除了a标签
 text-decoration: none;
underline 给文本设置下划线
text-decoration: underline;
overline:设置上划线
text-decoration: overline;
line-through：设置删除线
text-decoration: line-through;

text-align:设置文本水平位置
left:靠左（默认）、center:居中、 right：靠右
    
line-height:用于设置文本的行高，默认行高是字体大小的1.2倍  
关于行高的取值： 直接取值为长度 以px为单位  
取值为百分数：取的百分数是父元素行高的百分比
body{line-height: 30px;}
p{line-height: 50%;/*行高是15px*/}

letter-spacing:设置字母与字母之间的间距
word-spacing:设置单词与单词之间的间距（作用于左右）
text-indent：设置文本首行缩进 常用单位是 em 1em=16px（默认），也就是等于一个中文字符的大小
（2）常用背景属性
background-color:用于给标签设置背景颜色
颜色取值和color属性的一致
background-image:将图片设置为标签的背景图片
语法：  background-image:url(图片的路径)
background-repeat：主要是在有北背景图片的情况下，设置图片的平铺效果
 取值： 
no-repeat：背景图片不平铺
repeat：背景图片平铺满整个容器（默认取值）
repeat-x:沿水平方向平铺
repeat-y:沿垂直方向平铺
background-position：设置背景图片的位置
a、大容器小背景图
  关键字进行位置变化  left、right、center、top、bottom
left top、left center、left bottom、right top、right center、right bottom、top center 、center center、bottom center
默认情况下是 取值 left top（左上角）
 像素取值：
 background-position：参数1
参数1:作用于水平方向，垂直方向自动居中
background-position: 10px;
background-position：参数1 参数2
参数1：作用于水平方向
参数2：作用于垂直方向
background-position: 10px 100px;
在大容器中位置的变化，不能取负值
b、小容器大背景图
所有的取值为负值，就是将背景的某一个部分移动到小容器中进行显示
左负右正 上负下正

6、盒子模型

（1）margin 设置元素的外边距
margin-left:用于设置元素与左边元素之间的距离
margin-right：用于设置元素与右侧元素之间的距离
margin-top:用于设置元素与上方元素之间的距离
margin-bottom:用于设置元素与下方元素之间的距离
margin的复合写法：
a、margin:参数
参数：作用于四周
margin:100px;/*设置该元素于四周元素之间距离为100px*/
b、margin:参数1  参数2
参数1：作用于上下
参数2：作用于左右
margin:100px 20px;
如上，上下为100px,左右为20px
c、margin:参数1 参数2  参数3
参数1：作用于上
参数2：作用于左右
参数3：作用于下
margin:100px 20px 400px;
如上，上为100px 左右20px  下400px
d、margin:参数1 参数2 参数3 参数4
参数1：作用于上
参数2：作用于右
参数3：作用于下
参数4：作用于左
其实就是顺时针赋值
margin:100px 20px 400px 500px;
如上，上为100px 右为20px 下为400px  左为500px

（2）border 用于给元素设置边框
关于边框的属性：
width：设置边框的宽度
color:设置边框的颜色
style:设置边框的线型 常用 solid 实线  dashed 虚线

设置左边框：
border-left-color:设置左边框的颜色
border-left-style:设置左边框的线型
border-left-width:设置左边框的宽度
border-left-width:10px;
border-left-color: red;
border-left-style: solid;
左边框的复合写法：
border-left:参数1 参数2 参数3;
参数1：宽度
参数2：颜色
参数3：线型

设置右边框：
border-right-color:设置右边框的颜色
border-right-style:设置右边框的线型
border-right-width:设置右边框的宽度
border-right-width:10px;
border-right-color: red;
border-right-style: solid;
右边框的复合写法：
border-right:参数1 参数2 参数3;
参数1：宽度
参数2：颜色
参数3：线型
上下边框的设置和左右边框设置方法一致、
上边框将方向属性改为top
border-top:10px salmon solid;
下边框将方向属性改为bottom
border-bottom:10px salmon solid;

如果四周边框的样式都是一致的,复合写成一下方式
border:参数1 参数2 参数3
参数1：宽度
参数2：颜色
参数3：线型
3个参数的位置可以调换
注意：颜色参数和宽度参数可以缺省，都有默认值，但是线型参数是必须，没有设置默认值
border:1px solid red;
（3）padding设置元素边框与内容之间的填充距离
取值方式和margin的取值方式一致，只是margin作用于边框外，padding作用于边框内
注意，盒子模型的属性设置会改变元素的实际的宽高
实际宽度=左边的margin、border、padding+右边的margin、border、padding+设置的元素宽度
实际高度=上边的margin、border、padding+下边的margin、border、padding+设置的元素高度

box-sizing:设置盒子的实际宽高是否受border和padding的影响
取值：
content-box:默认取值，实际宽度或者高度会受border和padding的影响
eg
div{
    width: 200px;
    height: 200px;
   background-color: red;
    border: 10px solid yellow;
    padding: 50px;
    margin: 100px;
    box-sizing: content-box;
}
如上，实际设置的宽度是200px,水平方向border的是20px
padding的是100px ,实际的宽度=200+20+100=320px
实际高度=200px+20px+100px=320px
border-box:该取值使元素的宽度不会受到padding和border值的影响

7、border-radius

该属性是css3的新属性，主要用于给元素设置圆角
border-top-left-radius: 10px;/*设置左上角*/
border-top-right-radius: 50px;/*设置右上角*/
border-bottom-left-radius: 20px;/*设置左下角*/
border-bottom-right-radius: 100px;/*设置右下角*/
复合写法：
border-radius:参数1
参数1：作用于四周
border-radius: 10px;
border-radius:参数1  参数2
参数1：作用于左上角和右下角
参数2：作用于右上角和左下角
border-radius: 10px 50px;
border-radius:参数1 参数2 参数3
参数1：左上角
参数2：右上角和左下角
参数3：右下角
border-radius: 10px 30px 100px;
border-radius:参数1 参数2 参数3 参数4
参数1：左上角
参数2：右上角
参数3：右下角
参数4：左下角
关于border-radius的最大取值：
width>height
border-radius的最大取值是height/2
width<height
border-radius的最大取值是width/2
width=height
border-radius的最大取值是height/2=width/2

8、float

float属性用于设置元素浮动，常用设置元素的布局，一般都是基于父元素进行浮动，浮动元素会脱离文档流
float的取值：
 float: left  将元素进行左浮动
 float: right  将元素进行右浮动

clear:用于清除浮动元素对该元素的影响

 取值：
left：清除左浮动元素对该元素的影响
right：清除右浮动元素对该元素的影响
both：清除左右浮动元素对该元素的影响（常用）
任意标签都可以设置浮动属性，浮动元素都可以设置宽高

9、标签分类

块级元素：能设置宽高，而且必须独自占一行
行内元素：不能设置宽高，但是不会独自占一行
块级元素有：h类元素、p、列表类（ul、ol、dl、li、dt、dd）、table、hr、form、div等等
行内元素：a标签、span、input类、em、strong、select、textarea等等
img既是行内标签也是块级（不独自占一行但是也能设置宽高）
如果需要给行内元素设置宽高：
（1）将行内元素进行浮动（脱离文档流）
（2）将行内元素转换为块级元素

行内元素和块级的相互转换：
display属性可以实现两者之间的转换
（1）将行内转换为块级
display：block
（2）将块级转换为行内
display: inline
（3）将元素转换为既是块级又是行内，就是既在同一行又能设置宽高
display：inline-block
（4）使元素隐藏,隐藏的元素不会占用位置
 display：none

元素浮动时的注意事项，当元素浮动的时候，下一个元素的位置会被浮动元素遮盖，但是元素中文本内容会被浮动元素挤出来，这种情况一般可用图文混排

详见米扑博客：HTML CSS 块级标签的用法总结

10、列表的CSS属性

list-style-type:设置列表前的标记样式
list-style-type:lower-roman;
list-style-image:将图片自定义成列表前的标记
list-style-image: url("imgs/demo_03.png");
如果不需要列表前的标记
list-style-type: none
list-style-position: 用于设置列表前的标记的位置
取值：
 outside:标记在li的边框以外（默认取值）
 inside:标记在li的边框以内
list-style-position: inside;

复合写法：
 list-styl e:参数1 参数2 参数3
以上三个参数分别是列表的三个属性的值，
三个参数可以缺省

11、关于margin的垂直方向重叠问题

一般margin重叠问题长出现在有嵌套关系的标签中
问题的描述：
一般在有嵌套关系的盒子中，容易出现margin的重叠问题，一般是垂直方向
1) 如果只有子盒子设置了垂直方向的margin，该值会作用于父元素上，
2) 如果只有父元素设置margin，那么该margin就作用本身
3) 如果两个都设置了margin值。
如果都是正值，那么谁的值大，就将该值作用于父元素
4) 如果两个都设置了margin值。
如果都是负值（反方向），谁的绝对值大，作用于父元素上（反方向移动）
5) 如果一个为正，一个为负，父元素移动的距离是这两个数的和

关于解决办法：
1、父元素浮动
2、给父元素添加上边框（全部边框也行）
3、在子盒子前添加一个行内元素
4、给父元素设置padding-top值
5、子元素浮动
6、给父元素设置：overflow: hidden（非visible取值，只能是对父设置）

12、overflow

overflow
overflow主要用于设置超出盒子部分的内容的显示效果
取值：
  visible:超出部分内容可见 默认取值
  hidden：超出部分内容剪切掉
  auto:会根据内容进行判断，如果内容未超出，不显示滚动条，如果内容超出，就显示滚动条
scroll:不管内容是否超出，都显示滚动条
注意：overflow还可以解决margin重叠和高度塌陷等问题，前提是，overflow的取值不能是visible

13、高度塌陷问题

问题描述：当盒子中的内容脱离文档流（浮动、定位）的时候，如果该盒子没有固定高度，那么会出现高度塌陷问题
关于高度塌陷问题的解决方式：
1、直接固定父元素的高度
2、给父元素设置overflow取值不是visible

3、在所有的子元素后添加一个空的div,给该div设置clear属性
4、设置zoom属性，zoom直接用于设置元素的大小,取值一般是数值（成倍的放大或者是缩小元素），该属性也可以解决高度塌陷
5、使用伪对象选择符 
选择器:after{clear:both}（常用）
.father:after{
    content: '';
    display: block;
    clear: both;
}

14、伪对象选择符

（1）选择器:after{ CSS代码}  在该选择器对应的元素的最后添加内容，必须和content属性联用，默认添加的元素是行内元素
.box:after{
    content: "追加的最后的内容";
    color: yellow;
}
（2）选择器:before{CSS代码}  在选择器对应的元素的最前面添加内容，也是必须和content属性联用
.box:before{
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background: blue;
}
（3）选择器：first-child{CSS代码}   选择器对应的元素的第一个元素，选择器对应的元素必须拥有同一个父元素
HTML:
<ul>
    <li>lorem.</li>
    <li>lorem.</li>
    <li>lorem.</li>
    <li>lorem.</li>
</ul>
css:
li:first-child{
    color: red;
}
注意事项：该选择器对应的标签必须是父元素的第一个，才会有效果

 
 
（4）选择器:last-child{CSS代码}  找到选择器对应的元素的最后一个元素，效果是作用于拥有同一个父元素的该元素的最后一个元素，该选择器对应的标签必须是该元素最后的标签
HTML:
<div class="box">
    <h1>标题</h1>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
</div>
CSS:
.box p:last-child{
    color: green;
}

（5）选择器:nth-child(n){CSS的代码} 选择该选择器对应的元素的所需要的对应的元素
  n可以是具体的数值，找到元素就是n对应的元素
.box p:nth-child(2){
    color: blue;
}
如上找到的就是第二个p元素

可以直接将n作为参数，那么n的取值从1-标签的最大取值个数（将该父元素中所有直接选择器对应的标签都设置相同的样式）
.box p:nth-child(n){
    color: red;
}

取值可以是2n ，表示的是找到拥有相同父元素的该元素的偶数项
.box p:nth-child(2n){
    color: red;
}

取值可以是xn，x是一个变量，一般找到的元素是x倍数对应的元素
取值可以是2n+1,表示找到的选择器对应元素的奇数项
.box p:nth-child(2n+1){
    color: red;
}

15、table的CSS属性

表格的添加边框的属性也是使用border属性
table,td{
    border: 10px solid yellow;
}
15.1 border-spacing
是table的CSS属性，用于设置单元格与单元格之间的间距，取值是像素px
有点像cell-spacing
15.2 border-collapse
设置表格的边框是否作为单一边框
 取值：
separate：不合并单元格的边框 默认取值 可以设置              border-spacing属性
collapse：将单元格的边框进行合并成单一边框，不能设置border-spacing 属性
text-align:设置table中内容水平位置

16、CSS的两大特性

CSS的两大特性是层叠性和继承性
（1）层叠性
层叠性指的是多个选择器作用于同一个元素上，多个选择器的作用发生了重叠
 a、当多个选择器的作用没有冲突时，那么该作用都会应用到同一元素
 b、当设置的样式发生冲突时,会根据选择器的优先级别去执行优先级别高的选择器的样式
关于常用选择器的优先级别：
行内样式>ID选择器>类选择器>标签选择器
!important 该属性可用用强制性改变选择器样式的优先级别
!important属性>行内样式>ID选择器>类选择器>标签选择器
color: red!important;

（2）继承性
继承性指的是如果父元素定义的样式和子元素定义的样式没有发生冲突，那么子元素会继承父元素的样式，如果发生冲突，优先执行子元素的样式，而且不会对父元素有影响。
 		不是所有CSS属性都具有继承，一般是文本属性具有继承性，而其他的是没有继承性
能够被继承的属性有：
  		color、font类、text-indent（缩进）、text-align(文本水平位置)、line-height（行高）、letter-spacing(字间距)、text-decoration（装饰线）等等
注意：a标签不会继承父元素的text-decoration和color
不能被继承的属性：
背景属性、布局属性（浮动、定位）、display、盒子模型属性
继承性的好处：减少代码的编写量、提高了代码的可读性

17、CSS的复合选择器

复合选择器是由多个基本选择器通过不同的方式组成的选择器
（1）交集选择器

交集选择器是由两个选择器直接构成的选择器，第一个选择器必须是标签选择器，第二个选择器可以是id或者是类选择器，取到的部分就这两个选择器的交集部分
语法结构：   标签选择器#id值{CSS代码}  
标签选择器.class值{CSS代码}
注意：两个选择器不能有空格
p.demo{
    color: red;
}
p#p1{
    color: blue;
}
（2）并集选择器
并集选择器是对多个选择器进行集体声明，多个选择器之间用“,”分割开，一般多个选择器的所有样式或者是部分样式相同，相同部分可以使用并集选择器进行设置
.demo,h1,a{
    font-size: 20px;
    color: red;
}
（3）后代选择器
在有包含关系的选择器中，通过 E F 
E:是父元素选择器
F:子元素选择器  
E 和F之间用空格分开
选中所有的后代
（4）复合选择器之间的优先级别
复合选择器的优先级别比组成它的基本选择器的优先级别高
一般假设： 
标签选择器的权重为1
class选择器的权重为10
id选择器的权重为100
组合选择器的权重值就组成它的选择器的权重值之和，权重值越大，优先级别越高
 em{ color: red!important;}/*权重1*/
 /*权重10*/
 .demo{ color: #7f7f7f}
 /*权重11*/
 p .demo{ color: #a8f9ff}
 /*权重100*/
#em1{
    color: orange;
}
/*1+1+10+1+100=113*/
body p.p1 em#em1{
     color: black;
 }

18、background-size 设置背景图片的大小

background-size  该属性是css3的新属性，主要用于设置背景图片的大小
关于background-size的取值：
contain：如果是进行背景图片的放大，那么只要有一个边放大和盒子的一样的长度之后，就停止放大，如果是缩小图片，一直缩小，直到最大的边缩小和盒子长度一致的时候停止，当盒子和图片的大小比例不一致时，会导致图片无法将盒子填充满
cover：会将图片等比例放大或者缩小，直到图片将整个容器填充满
取值也可以是数值
background-size:参数
参数作用于背景图片的宽度，高度会随宽度等比例变化
background-size: 200px;
background-size:参数1 参数2
参数1：宽度
参数2：高度
background-size: 300px 200px;
还可以进行百分数取值，是以容器的宽高为基准
取值方式和数值的取值方式一致
background-size: 100%;
background-size: 100% 100%;

19、CSS3的新增选择器

（1）子选择器
子选择器是查找到元素的直接子元素
语法结构： E>F{CSS样式}
E:是父元素选择器
F:直接子元素选择器
.box>p{
  color: red;
}
（2）相邻选择器
选择紧贴该元素的下一个元素
语法结构：E+F{CSS的代码}
如上，找到E元素的相邻元素F设置CSS样式
.demo+h1{
    color: red;
}
（3）兄弟选择器
选择该元素后的所有的另一个兄弟元素
语法结构：E~F{CSS的代码}
如上，找到E选择器后的  所有元素F
.demo~h1{
    color: red;
}

20、position 定位

定位是可以对元素进行位置的定位，一般是结合方向属性来进行使用（left/right/top/bottom）,以上方向属性必须结合定位进行使用,定位的关键字 position
position的取值：
  （1）static 默认取值 没有定位
（2）fixed 固定定位，将元素固定在窗口的某一个位置，固定之后元素不会随滚动条的滚动而滚动，使用固定定位的元素脱离了文档流，固定定位的位置的变化的参照物是窗口
（3）relative 相对定位，相对定位是相对于元素原来的位置进行位置的移动，使用相对定位的元素原来的位置不会被其它元素占用
（4）absolute 绝对定位，使用绝对定位的元素会脱离文档流，所以使用绝对定位的元素的位置会被其它元素占用，绝对定位元素的位置移动是相对使用了取值不是static的定位的父级元素进行位置的变化，如果所有的父级元素都使用定位效果，那么该元素就基于隔它最近的父元素进行位置的移动

关于定位元素重叠，顺序的显示设置
通过z-index进行显示顺序的设置
一般假设所有没有设置z-index属性的定位元素的z-index默认值都是0，那么如果要显示在最上面，只需要z-index大于0即可，z-index的值可以无限大，值越大，优先级越高

21、box-shadow 阴影

box-shadow，阴影 该属性是CSS3的新属性，用于给标签添加阴影效果
关于该属性的参数：
参数1：是水平方向的阴影，取值为正值是添加右阴影，取负值是阴影往左  必须参数
参数2：是垂直方向的阴影，取值为正值是添加下阴影，取值为负时添加上阴影  必须参数
box-shadow: -5px 10px;
参数3：用于设置阴影的模糊距离  可选参数
参数4：用于设置阴影的尺寸  可选参数，默认阴影的尺寸和元素的大小一致
参数5：用于设置阴影的颜色 可选参数
参数6：用于设置阴影的位置（内、外）、默认添加的都是外阴影
      outset  外阴影 默认取值
 	  inset  内阴影   阴影方向的取值是刚好作用相反
	  box-shadow: 10px 0 0 0 red inset;

22、自定义web字体

将某个需要的字体进行下载，放入到项目中对该字体进行引用
关于常用web字体的格式：
  safari（3.2+）：.ttf .otf
opera(10+) : .ttf .otf .svg
IE:从IE4支持的是.eot  IE9以上支持的是.woff
Firefox(3.5+):.ttf .otf .woff
Google Chrome：.ttf .otf .woff
支持所有的浏览器：.ttf/.otf +.eot+.woff
@font-face {
    font-family: 'myFont';/*设置自定字体的名称*/
    src:url("fonts/AlexBrush-Regular.ttf");/*字体文件路径*/
}
p{
    font-family: myFont;/*对字体进行调用*/
    font-size: 50px;
}
注用意：如果引入的字体文件有多个格式，那么多个格式文件的引入的路径隔开：
src:url("fonts/AlexBrush-Regular.ttf"),url("fonts/AlexBrush-Regular.eot"),url("fonts/AlexBrush-Regular.woff");
步骤：
1、下载字体
2、字体格式转换（兼容各大浏览器）
3、字体文件导入项目（放入fonts文件夹中）
4、字体定义
@font-face{
font-family:”自定义字体的名称”;
src:url(字体文件路径1),url(字体文件路径2),……;
}
选择器{
font-family:”通过名称调用”;
}

23、自定义小图标

（1） 
a、通过fontawesome的官网下载相关的css文件
b、将下载的相关css文件和字体文件导入到项目中
c、将css文件导入到页面（link）
d、通过标签的class属性调用css文件中的小图标
例子:<i class=”fa  小图标对应的class名 ”></i>
<i class="fa fa-address-book"></i>
<i class="fa fa-bath"></i>

（2）阿里巴巴图标库的引用
a、访问阿里巴巴图标库的官网（登录）
b、搜索需要的图标，并加入
c、进入购物车，将内容添加至项目，自动跳转到项目页
d、将项目进行下载
e、解压，将内容复制到项目中（iconfont.css以及相关字体文件）
f、将css文件引入到页面中，通过i标签进行调用
<i class=”iconfont 具体图标的类名”></i>
<i class="iconfont icon-htmal5icon14"></i>

24、vertical-align 垂直对齐

vertical-align  属性主要用于设置inline-block元素和其它元素的垂直对齐方式（即图片），和行高有很大的关系，一般inline-block元素和行内元素对齐的是默认是基于baseline(x字母的低端) img就是特殊的inline-block
关于vertical-align取值：
baseline: 基线对齐  默认取值  
bottom:inline-block元素和文本是基于文本的行高的底部对齐
text-bottom： inline-block元素和文本的底部对齐
top:inline-block元素和文本是基于文本的行高的顶部对齐
text-top: inline-block 元素和文本顶部对齐 
middle:是inline-block元素和其它元素垂直居中对齐
它的取值还可以是数值取值
vertical-align: -10px;
一般vertical-align用于水平方向内容对齐有偏差，可以用数值进行调节

25、transition 过渡动画

过渡是CSS3的新属性，使元素在一种样式转换为另一样式的过程中添加过渡。通过transition属性可以设置过渡效果
关于transition的参数取值：
参数1：是发生变化的属性名 必须
参数2：是过渡的时间周期 以s或者ms  1000ms=1s 必须
transition:background 10s,width 5s;
如上，如果多个属性发生变化，而且每个属性的过渡周期不一致，可以入设置，多个属性参数之间用逗号分隔
如果希望变化的所有属性添加上同一个过渡周期，有以下两种表示方式：
transition:10s;
transition:all 10s;
参数3：用于设置过渡效果的运动曲线
ease:默认取值 效果先慢再快后慢
linear：过渡效果是匀速（常用）
ease-in:以慢速开始 一直匀速直到结束
ease-out:以匀速开始，直到最后以慢速结束
ease-in-out:以慢速开始，中间匀速，再以慢速结束
 参数4：用于设置过渡效果何时开始 单位 s或者ms

26、display 显示/隐藏

（1）display：none 元素隐藏
    如果元素是行内 display：inline  显示
 如果是块级 display：block 显示
因为display让元素隐藏是使元素彻底在文档流中消失，所以使用display进行元素的显示和隐藏无法添加过渡效果

（2）visibility元素设置元素的显示/隐藏
取值：
visible:默认取值 元素显示
hidden：元素隐藏
在使用visibility时，添加其它属性的过渡效果有效，但是visibility本身值的变化无过渡效果
（3）opacity 设置元素的透明度
取值范围 0-1
0表示 完全透明
1表示完全不透明 默认取值
(0-1)之间表示不同程度的透明
可以设置过渡效果

因为设置opacity的透明度会被所有的子内容继承，而且不可重新设置
所以一般情况，opacity只是用于设置元素的显示/隐藏
如果要是只是背景透明，但是内容不会透明的效果，需要使用 
rgba（red（0-255）,green（0-255）,blue(0-255),alpha(0-1)）

RGBA
RGBA的意思是（Red-Green-Blue-Alpha）它是在RGB上扩展包括了“alpha”通道，运行对颜色值设置透明度。
div {
background:rgba(255,0,0,0.5);
}
在RGBA中，四个数字以逗号分隔开，前面三个数字标识这个颜色的RGB值，这个设置和RGB并没有任何区别，RGBA也可以设置为百分比，后面的数字代表透明度，范围在0-1之间。1表示不透明，在这里就相当于rgb(255,0,0),0表示全透明。

background: rgba(255,0,0,.2);
（4）通过绝对定位设置元素的显示和隐藏
设置定位元素的left值足够小，实现元素的隐藏
设置定位元素的left值为正值，实现元素的显示

27、transform 转换

对元素进行移动、缩放、旋转、拉伸的效果。
属性值：

1. translate：移动
语法：translate（参数1[,参数2]）
两个参数：参数1表示水平方向的偏移量，参数2表示竖直方向的偏移量
一个参数：表示水平方向的偏移量
注：会占原来的位置，偏移后的位置不占
2. scale：缩放
语法：transform: scale（参数1[,参数2]）
一个参数：参数大于1表示放大
参数小于1表示缩小
两个参数：第一个表示水平方向，第二个表示竖直方向
注：会占原来的位置，缩放后的位置不占

3. rotate：旋转
语法：transform：rotate（参数）
参数为正值表示顺时针旋转
参数为负值表示逆时针旋转
单位：deg（必须设置）
RotateX(180deg)：表示沿x轴旋转180度
rotateY（180deg）：表示沿y轴旋转180度

4. skew：拉伸
语法：transform:skew(参数1[,参数2])
单数：deg（必须设置）
 
transform的复合写法：
transform:translate() scale() rotate() skew();
transform-origin:right bottom;

28. 动画

创建动画：
1》.@keyframes 动画名称{
from{动画开始时的状态}
to{动画结束时的状态}
}
2》@keyframes 动画名称{
0%{动画开始时的状态}
20%{时间到20%时的动画状态}
100%{动画结束时的状态}
}
调用动画：
animation：动画名称 完成动画的时间 速度 播放次数 是否逆向播放  动画延迟时间
动画名称：必须设置
完成动画的时间：必须要设置
速度：和过渡属性里的速度相同
播放次数：默认播放一次
取值：正整数
infinite（无限循环播放）
是否逆向播放：默认不逆向播放normal
alternate：下一个周期逆向播放

29. 扁平化设计

扁平化设计概念：核心设计是去除厚重、繁琐的效果，主要的目的是突出信息本身，重点强调了抽象、简单、符号化。
主要用应在手机端、pad；
有点：
1.对设备硬件要求不高，节省了加载时间，可以使设备超长待机
2.可以更加简单直接的将信息和事物的工作方式展现出来，减少了认知的障碍
3.适用性更好
缺点：
1.降低了用户体验
2.缺乏直观
3.传达的感情不丰富，甚至是冰凉

30. 语义化

概念：根据文档的结构进行语义化，选择合适的标签，尽量减少div和span标签的使用
优点：
1.在没有css样式的时候，页面也可以呈现出很好的内容结构、代码结构；
2.有利于SEO：和搜索搜索引擎友好，便于搜索引擎进行搜索，有助于爬虫爬取更多的有效信息
3.有利于团队的开发和维护
4.有利于移动设备页面的渲染
常用的语义化标签
1.header：定义文档的头部区域，可以有多个
2.footer：定义文档的底部，一般文档的下面或某一部分内容的下面
3.nav：页面的导航部分
4.article：定义页面的独立内容的区域，标签定义的内容本身是有意义的，但是独立于文档的其他部分
如：博客的文章、新闻、评论
5.aside：包含的内容不是页面的主要内容，具有独立性，一般是对页面的补充
如：页面的侧边栏、广告、友情连接，但是如aside是放在main中英语所在内容密切相关
6.section：内容分组标签
1》定义文章中的节   2》定义文章
7.main：定义页面的主体部分，一个页面只能设置一次
 main一般不包含logo、网站的标题、主题导航
8.figure：规定独立的流内容（图片），默认的margin值40px左右
9.figcaption：给figure设置一个标题，必须是figure内的第一个或最后一个元素
10.time：定义时间或日期
	属性：datatime，属性值不会在页面中显示
设置标题上的图标
<link rel="shortcut icon" href="../imgs/favicon.ico">

本文转自：HTML & CSS 个人整理笔记（CSDN）

参考推荐：

HTML CSS 字体大小 pt、px、em、rem 用法详解

CSS 自适应多屏大小的 @media 用法详解

PC网站自动适配手机网页的方法技巧

PC端网页自适应手机屏幕大小

JS检测移动端自适应屏幕大小