HTML5和CSS3核心笔记-白红宇的个人博客

HTML5和CSS3核心笔记

发布日期：2021-05-10 17:18:23 浏览次数：19 分类：原创文章

本文共 26224 字，大约阅读时间需要 87 分钟。

第一章：HTML基础
第二章：CSS基础
第三章、CSS核心元素
第四章、盒模型和文本溢出
第五章、元素类型
第六章、定位锚点
第七章、图片整合
第八章、宽髙自适应
第九章、浏览器兼容
第十章、表格表单高级
第十一章、HTML5新增标签
第十二章、CSS3选择器和新增属性
第十三章、2D和3D效果
第十四章、弹性盒和媒体查询
第十五章、移动端布局

第一章：HTML基础

一、HTML常用标签	1、语法：<i></i> | <em></em>		 说明：倾斜标记	   语法：<b></b> | <strong></strong>		 说明：加粗标记	   语法：<u></u>		 说明：倾斜标记		 	2、语法：<br/>		 说明：空标记，用来设置字体换行	   语法：<hr/>		 说明：空标记，用做水平线	   语法：<p></p>		 说明：段落标记，标识一个段落（段落与段落之间有段间距）		3、常用：		&nbsp; 不换行空格		&gt; 右尖括号		&lt; 左尖括号		&copy; 备案中图标 ©	   常用元素：		  语法：<div></div>		  说明：<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联		  语法：<span></span>		  说明：<span></span>文本结点可以是某一小段文本，或是某一个字。	4、列表：		HTML中有三种列表，分别是：		>无序列表（ul）		>有序列表（ol）		>自定义列表（dl）				1）、无序列表		<ul>			<li>列表项内容</li>			<li>列表项内容</li>			<li>列表项内容</li>			.............		</ul>		2）、有序列表		<ol>			<li>列表项内容</li>			<li>列表项内容</li>			<li>列表项内容</li>			.............		</ol>		3）、自定义列表		<dl>			<dt>名词</dt>			<dd>解释</dd>		</dl>	5、超链接和图像		超链接		语法：	<a href="目标文件路径及全称/连接地址" alt="替换文本" title="提示文本">链接文本/图片</a>			空链接		语法：	<a href="#"></a>		插入图像		语法：	<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题"/>				二、表格元素	1、表格的语法		语法：	<table>		<tr>			<th></th>			<td></td>			<td></td>		</tr>	</table>	说明：一对tr表示一行；一对td表示一列（一个单元格）;一对th表示表头	2、表格的相关属性				width="表格的宽度";		height="表格的高度";		border="表格的边框";		bordercolor="边框色";				cellspacing="单元格与单元格之间的间距"				cellpadding="单元格与内容之间的空隙"				align="表格对齐方式" 取值：left/right/center				valign="垂直对齐" 取值：top/bottom/middle				colspan="所要合并的单元格的列数"		rowspan="所要合并的单元格的行数"		三、表单元素	1、表单域		语法：		<form name="表单名称" method="post/get" action=""></form>	说明：		Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。出于安全性考虑，建议最好使用Post提交数据		2、表单控件			文本框：<input type="text" value="默认值"/>		密码框：<input type="password"/>		提交按钮：<input type="submit" value="按钮内容"/>		重置按钮：<input type="reset" value="按钮内容"/>				单选框：<input type="radio" name=""/>				复选框：<input type="checkbox" name=""/>				disabled="disabled":禁用		checked="checked":默认选中				按钮：<input type="button" value="按钮内容"/>			3、下拉菜单		语法：	<select>		<option>下拉选项1</option>		<option>下拉选项2</option>	</select>		4、多行文本框		语法：<textarea cols="" rows=""></textarea>		说明：rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符

第二章：CSS基础

一、CSS样式表的建立和优先级	1、CSS样式表的建立	 &方法一：内部样式表（嵌套到页面中）	 	 语法：	 <style type="text/css">	 /*css语句*/	 </style>	 说明：	 使用style标记创建样式时，最好将该标记写在<head></head>之间	 	 	 &方法二：内联样式（行间样式，行内样式，嵌入式样式）	 	 语法：	 <标签 style="属性：属性值;属性：属性值;"></标签>	 例如：	 <div style="width:100px;height:100px;border:1px solid #eee;background:#fff"></div>	 &方法三：引用外部样式表文件	 	 步骤1：外部样式表的创建	 步骤2：外部样式表的导入	 <link rel="stylesheet" type="text/css" href="目标文件路径及全称"/>	 	 说明：	 使用link元素导入外部样式表是,需将该元素写在文档头部，即<head></head>之间.	 	 rel:用于定义文档关联，表示关联样式表	 type:定义文档类型	 	2、CSS样式表的优先级		内联样式表的优先级别最高		内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别髙。二、CSS常用选择符和权重		1、CSS语法		CSS语法由两部分组成:选择符、声明		语法：选择符{属性：属性值;属性：属性值;}		例如： h1{color：red;font-size：14px;}	        ↑              ↑		  选择符          声明		  	说明：		1）、每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值;			2）、属性必须放在花括号中，属性和属性值用冒号连接。				3）、每条声明用分号结束。				4）、当一个属性有多个属性值的时候，属性与属性值不分先后顺序				5）、在书写样式过程中，空格、换行等操作不影响属性显示。	2、CSS常用选择符		选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。		常用的选择符有：	类型选择符（标记选择器）、类选择符（class选择符）、ID选择符（id选择器）、伪类选择器、	群组选择符（集合选择器）、通配符（*）、伪对象选择符、包含选择符（后代选择器）			1）、元素选择符/类型选择符（element选择器）		语法：元素名称{属性：属性值}				说明：		元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、		div、p、img、em、strong、span......等。		所有的页面元素都可以作为选择符。				用法：		如果想改变某个元素的默认样式，可以使用类型选择符。		当统一文档某个元素的显示效果时，可以使用类型选择符。				2）、ID选择符				语法：#id名{属性：属性值;}				说明：		当我们使用id选择符时，应该为每个元素定义一个id名 起名时要取英文名，不能用关键字：（所有的		标记和属性都是关键字）一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一		个唯一的元素对象。		最大的用处：创建网页的外围结构				3）、类选择符（class选择符）				语法：.class名{属性：属性;}				说明：		当我们使用类选择符时，应先为每个元素定义一个类名称，class选择符更适合定义一类样式			4）、通配选择符				语法：*{属性：属性值;}				说明：		通配选择符的含义就是所有元素，常用来重置样式				5）、群组选择符			语法：选择符1，选择符2，选择符3{属性：属性值;}						说明：			当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组					6）、包含选择符				语法：选择符1 选择符2{属性：属性值;}				说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2				7）、伪类选择符				语法：		a:link{属性：属性值;} 超链接的初始状态		a:visited{属性：属性值;} 超链接被访问后的状态		a:hover{属性：属性值;} 鼠标划过超链接时的状态		a:active{属性：属性值;} 鼠标按下时超链接的状态				说明：		当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为: a:link，a:visited，		a:hover,a:active,错误的顺序有时会使超链接的样式失效				为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中		例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变		颜色。			3、选择符的权重		css中用四位数字表示权重，权重的表达方式如：0,0,0,0		类型选择符的权重:0001	class选择符的权重:0010	id选择符的权重:0100		属性选择符的权重:0010	伪类选择符的权重:0010	伪元素选择符的权重:0010		包含选择符的权重:包含的选择符权重值之和		内联样式的权重:1000	继承样式的权重:0000		当不同选择符的样式设置有冲突的时候，髙权重选择符的样式会覆盖低权重选择符的样式。		相同权重的选择符，样式遵循就近原则:哪个选择符最后定义，就采用哪个选择符样式。

第三章、CSS核心元素

一、文本类属性	1、font-family:字体类型		语法：{font-family:字体1,字体2,字体3;}		说明：	当字体是中文字体时,需加双引号;	当英文字体中有空格时,需加双引号如“Times New Roman”;	当英文字体只有一个单词组成是不加双引号;如：Arial。		2、font-size：文本大小		语法：{font-size：数值;}		说明：	属性值为数值时，必须给属性值加单位，属性值为0时除外。	为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同	确定16px/ppi为标准字体大小默认值，即1em。默认情况下，1em=16px，0.75em=12px		3、color:文本颜色		语法：{color:颜色值;}		说明：	十六进制颜色模式: 0 1 2 3 4 5 6 7 8 9 A B C D E F 	例如: color：#FF0000	rgb颜色模式: color:rgb(0,204,204)	rgba颜色模式: color:rgba(0,204,204,0.6)rgb三原色，a表示透明度		4、font-weight:字体加粗		语法:{font-weight:bolder/bold/normal/100-900;}		说明：	bolder（更粗的）/bold（加粗）/normal（常规）	在css规范中，把字体的粗细分为9个等级，分别为100-900，其中100对应最轻的字体变形，而900对应	最重的字体变形，一般500为常规字体，600-900为加粗字体		5、font-style:字体倾斜		语法:{font-style:italic/oblique/normal;}		说明：	italic和oblique都表示倾斜，不过oblique的幅度要大一些。但一般浏览器对它们的区分不是很明显。		6、text-align:水平对齐		语法:{text-align:left/right/center/justify;}		说明：	justify对内容以两端边界线对齐显示		7、line-height:行髙		语法:{line-height:normal/数值;}		8、text-decoration:文本修饰		语法:{text-decoration:none/underline/overline/line-through;}		说明：	none:没有修饰	underline:添加下划线	overline:添加上划线	line-through:添加删除线		9、text-indent:首行缩进		语法:{text-indent:数值;}		说明：	text-indent可以取负值，可实现隐藏文本，悬挂缩进。	text-indent属性只对第一行起作用，若第一行不是文本则没变化。二、列表属性	1、语法：{list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)}	   说明：定义列表符号样式	   	2、语法：{list-style-image:url(所使用照片的路径及全称);}	   说明：使用图片作为列表符号	   	3、语法：{list-style-position:outside/inside;}	   说明：定义列表符号的位置	   	4、语法：{list-style:none;}	   说明：去掉列表样式三、背景属性	1、background-color:背景颜色		语法：{background-color:颜色值;}	     	2、background-iamge:背景图片的设置		语法：{background-iamge:url（背景图片的路径及全称）;}		说明：	网页上有两种图片形式:插入图片、背景图;	插入图片:属于网页内容,也就是结构。	背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。		3、background-repeat:背景图片的平铺属性		语法：{background-repeat:no-repeat/repeat/repeat-x/repeat-y;}	说明:	no-repeat:不平铺	repeat:平铺	repeat-x:横向平铺	repeat-y:纵向平铺		4、background-position:背景图片的位置属性		语法：{background-position:值1 值2;}	说明：	值1:水平方向上的对齐方式（left/center/right）或值	值2:垂直方向上的对齐方式（top/center/bottom）或值		5、背景属性的缩写		语法:{background:属性值1 属性值2 属性值3}	例:	background:#背景色 url（背景图片的路径及全称）no-repeat center top	四、浮动属性	1、float:定义网页中其它文本如何环绕该元素		语法:{float:left/right/none;}		说明:	left:元素活动浮动在文本左面	right:元素浮动在右面	none:默认值,不浮动		2、Clear:规定元素的哪一侧不允许其他浮动元素		属性值	none:默认值。允许浮动元素出现在两侧。	both:在左右两侧均不允许浮动元素。	left:在左侧不允许浮动元素。	right:在右侧不允许浮动元素。		3、解决高度塌陷		方法一:给父元素添加声明overflow:hidden		方法二:在浮动元素下方添加空div，并给该元素添加声明:clear:both;height:0;overflow:hidden	(或font-size:0;)

第四章、盒模型和文本溢出

一、盒模型	1、盒模型的概念		如果CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box）	，那么我们可以形象地将其看作是一个盒子		CSS围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性（内容、填充、边框、边界）	，可以控制各个盒子乃至整个HTML文档的表现效果和布局结构。		虽然CSS中没有盒子这个单独的属性对象，但它却是CSS中无处不在的一个重要组成部分。		2、盒模型的组成		CSS盒子模式都具备这些属性:	内容（content）、填充（padding）、边框（border）、边界（margin）		边界（margin）		边框（border）			填充（padding）				内容（content）		3、盒模型的相关属性			1）、border的使用方法						border:边框宽度 边框风格 边框颜色;			例如:{border:5px solid #f00;}						边框宽度：border-width:			边框颜色: border-color:			边框样式: border-style:solid（实线）/dashed（虚线）/dotted（点划线）/double（双线）				可单独设置一方向边框，如:			底边框: border-bottom:			左边框: border-left:				2）、padding的使用方法					padding设定页面中一个元素内容（content）到元素的边缘（border）之间的距离。背景色和背景图像会覆盖padding和			content组成的区域						&用法:			用来调整内容在容器中的位置关系						用来调整子元素在父元素中的位置关系。			注:padding属性需要添加在父元素上。						padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或髙上减掉后添加的padding属性						&属性值的4种方式:			四个值:上 右 下 左 			三个值:上 左右 下			二个值:上下 左右			一个值:四个方向						3）、margin的使用方法					外边距（margin）在border之外，margin区域不应用背景;CSS中margin默认值为0				{margin:0 auto;} 在浏览器中横向居中				注意事项:						系统会为某些元素设置默认的margin值或者padding值。这对于我们以后尺寸的计算有影响，所以在以后的开发过程中，			首先清除掉所有元素的margin和padding值。						css首行代码：*{margin:0;padding:0}						相邻兄弟元素在垂直方向上的margin值会出现融合的情况，融合后会取两个元素里较大的值作为融合后的值						当父级子级元素都设置了margin时，子级的margin值会传递到父级。margin传递解决办法:给父级使用overflow:hidden			属性二、文本溢出	1、overflow属性:定义溢出元素内容区的内容会如何处理		语法：{overflow:visible/hidden/scroll/auto/inherit;}		说明：	visible:默认值，内容不会被修剪，会出现在元素框之外;	hidden:内容会被修剪，并且其余内容是不可见的;	scroll:内容会被修剪，但是浏览器会显示滚条，以便查看其余的内容;	auto:如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;				inherit:规定应该从父元素继承overflow属性的值。		2、white-space属性: 设置如何处理元素内的空白		语法:{white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;}		说明：	normal:默认。空白会被浏览器忽略；	pre:空白会被浏览器保留	nowrap:文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止；	pre-wrap:保留空白符序列，但是正常地进行换行；	pre-line:合并空白符序列，但是保留换行符；	inherit:规定应该从父元素继承white-space属性的值。		3、text-overflow属性:规定当文本溢出包含元素时发生的事情		语法:{text-overflow:clip/ellipsis;}		说明:	clip:不显示省略号，而是简单的裁切;	ellipsis:当对象内文本溢出时，显示省略标记;		要实现溢出时产生省略号的效果还需定义:			1）、容器宽度:width:value;(px、%、都可以)		2）、强制文本在一行内显示:white-space：nowrap;		3）、溢出内容为隐藏:overflow:hidden;		4）、溢出文本显示省略号:text-overflow:ellipsis

第五章、元素类型

一、元素类型			1、元素的类型		根据css显示分类，XHTML元素被分为三种类型:				&块状元素（block element）		1）、块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包括		div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,iframe,colgroup,col,table,tr,td等;				2）、默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默		认情况下，块状元素会按顺序自上而下排列。				3）、块状元素都可以定义自己的宽度和高度。				4）、块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其它块状元素。我们可以把这种		容器比喻为一个盒子。					&内联元素（inline element）（行内元素）		1）、常见的内联元素如:a,span,i,em,strong,b等				2）、内联元素的表现形式是始终以行内逐个进行显示；				3）、内联元素没有自己的形状，不能定义它的宽和髙，它显示的宽度、高度只能根据所包含内容的高度和		宽度来确定，它的最小内容单元也会呈现矩形形状				4）、内联元素也会遵循盒模型基本规则，如可以定义padding，border，margin，background等属性，但个		别属性不能正确显示；			&可变元素				需要根据上下文关系确定该元素是块元素或者内联元素。				applet - java applet		button - 按钮		del - 删除文本		iframe - inline frame		ins - 插入的文本		map - 图片区块（map）		object - object对象		script - 客户端脚本			2、元素类型的转换			display属性:用于定义建立布局时元素				属性值:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table		-header-group|table-footer-group|table-row|table-colume-group|table-column|table-cell|table-cap		tion|inherit				大部分块元素display属性值默认为block，其中列表的默认值为list-item。				大部分内联元素的display属性值默认为inline，其中img，input，默认为inline-block				1）、block				说明:		类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。				特征:		当元素设置了float属性后，就相当于给该元素加了display：block;属性				2）、inline 		说明:		在元素后面删除换行符，多个元素可以在一行内并列显示。				特征:		内容撑开宽度		非独占一行		不支持宽髙		代码换行被解析成空格				3）、inline-block (图片/表单控件)		说明:		元素的内容以块状显示,行内的其他元素显示在同一行				特征:		不设置宽度时,内容撑开宽度		非独占一行		支持宽髙		代码换行被解析成空格			4）、none				说明：		此元素不会被显示				特征:		隐藏元素并脱离文档流			5）、list-item				说明:将元素转换成列表。li的默认类型。				特征:		不设置宽度时,宽度撑满一行		独占一行		支持宽髙	----------------------------------------------------------------------------		&块级元素（block element）		div - 最常用块级元素		dl - 和dt-dd搭配使用的块级元素		form - 交互表单		h1-h6 - 大标题		hr - 水平分隔线		ol - 排序表单		p - 段落		ul - 非排序列表		fieldset - 表单字段集		colgroup-col  - 表单列分组元素		table-tr-td 表格及行-单元格			&内联元素（inline element）				a - 锚点		br - 换行 		em - 强调		img - 图片		label - 表格标签		span - 常用内联容器，定义文本内区块		strong - 粗体强调		sub - 下标		sup - 上标		textarea - 多行文本输入框		u - 下划线		b - 粗体（不推荐）		i - 斜体		font - 字体设定（不推荐）		input - 输入框

第六章、定位锚点

一、元素的定位设置	1、position属性:定义建立元素布局所用的定位机制		语法:{position:static/absolute/relative/fixed;}		static:默认值。没有定位，元素出现在正常的流中（忽略top，bottom，left，right或者z-index声明）。	absolute:生成绝对定义的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过“left”	“top”，“right”以及“bottom”属性进行规定。	relative:生成相对定位的元素，相对于其正常位置进行定位。	fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过“left”“top”，“right”以及	“bottom”属性进行规定。					2）、z-indext属性:检索或设置对象的层叠顺序 （需加position）		语法:{z-index:auto/number;}		说明:	auto:默认值。遵从其父对象	number:无单位的整数值。可为负数		较大number值的对象会覆盖在较小number值的对象之上。如两个绝对定位对象的此属性具有同样的number值，那么将	依据它们在HTML文档中声明的顺序层叠。		此属性仅仅作用于position属性值为relative或absolute的对象。		二、锚点链接	锚点链接:是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用	相当普遍。		设置锚点链接的方法:		1、给元素定义命名锚记名	语法:<标记 id=“命名锚记名”></标记>		2、命名锚记链接	语法:<a href=“#命名锚记名称”></a>

第七章、图片整合

一、什么是图片整合技术（css sprites 或者精灵图）通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景二、图片整合的优势:若干小图标拼合成一张图后布局，减少http iis 请求数，对于大战大流量网站来说隐形优势很显然的，从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵，使用DIV+CSS Sprites 这样可以大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因，同时也减少图片文件数目。概括来说就是以下这两点	1）、通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度	2）、通过整合图片来减少图片的体积		三、CSS Sprites的实现方法:滑动门技术	1、什么是滑动门	滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果	2、滑动门特征	通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性。

第八章、宽髙自适应

网页布局中经常要定义元素的宽和髙。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示1、宽度自适应元素宽度设置为100%。（块元素宽度默认为100%）2、元素具备最小高度的自适应min-height属性:最小高度;说明:IE6浏览器不识别该属性，height属性在IE6里就类似min-height作用。hack1:min-height:value;_heitht:value;hack2:min-height:value;height:auto! important; height:value;		min-heightmax-heightmin-widthmax-width		3、高度自适应	1）、元素高度自适应窗口高度	设置方法:html,body{height:100%}	需要自适应的元素:height:100%;	2）、自适应元素高度:	父元素:height:value;	需要自适应父元素高度的子元素: height:100%;		height:auto,是指根据块内内容自动调节高度	height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度

第九章、浏览器兼容

CSS Bug: CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.CSS Hack: CSS中，Hack 是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。Filter: 表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型		一、IE6常见CSS解析Bug及hack	1、图片间隙	A）、div中的图片间隙（该bug出现在IE6及更低版本中）	描述:在div中插入图片时，图片会将div下方撑大三像素。		hack1:将</div>与<img>写在一行上;		hack2:将<img>转为块状元素，给<img>添加声明:display:block;			2、双向浮向（双倍边距）	描述:当IE6及更低版本浏览器在解析浮动元素时，会错误把浮向边界加倍显示。		hack:给浮动元素添加声明: _display：inline			3、默认高度（IE6）				描述:在IE6及以下版本中，部分块元素拥有默认高度（低于18px高度）		hack1:给元素添加声明:font-size:0;		hack2:给元素添加声明:overflow:hidden;			4、表单元素行髙不一致（IE,MOZ,C,O,S）		描述:表单元素行高对齐方式不一致	hack:给表单元素添加声明:float:left;		5、按钮元素默认大小不一		描述:各浏览器中按钮元素大小不一致		hack1:统一大小/（用a标记模拟）。	hack2:在input上写按钮的样式，一定要把input的边框去掉。	hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。			6、百分比bug	描述:在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况		hack:给右面的浮动元素添加声明:clear:right;		7、鼠标指针bug	描述:cursor属性的hand属性值只有IE浏览器识别，其他浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上	版本及其它内核浏览器都识别该声明。	hack:如统一某元素鼠标指针形状为手型，应添加声明: cursor:pointer;		8、透明属性		IE浏览器写法: filter:alpha(opacity=value);取值范围1-100	兼容其他浏览器写法:opacity:value;(value的取值范围0-1,0.1,0.2,0.3-----0.9)		子元素能够继承父元素的透明效果	二、过滤器（filter）		1、下划线属性过滤器	当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6	及更低版本浏览器中会继续解析这个规则。		语法:选择符{_属性:属性值;}		2、！important关键字过滤器	它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容	IE6和其它标准浏览器		语法:选择符{属性：属性值！important}		3、*属性过滤器	当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器忽略该属性的作用。		语法：选择符{*属性：属性值;}

第十章、表格表单高级

一、表单高级属性表单的组成:	表单域：<form name="" method="" action=""></form>	表单控件：<input type="text" value=""/>	提示信息：	1、表单字段集语法: <fieldset></fieldset>说明:相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。field元素可以嵌套，在其内部可以在设置多个fieldset对象。disable定义空间禁制可用。	2、字段级标题语法:<legend></legend>说明:legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fielddet内的第一个元素	3、提示信息标签语法:<label for="绑定控件id名"></label>说明:label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

第十一章、HTML5新增标签

HTML5的特点:语义化标签语义化标签就是尽量使用有相对应的结构的含义的Html的标签1、语法:<header></header>说明:header元素表示页面中一个内容区块或者整个页面的标题。2、语法:<footer></footer>说明:footer元素表示整个页面或者页面中的一个内容区块的脚注。一般来说，它会包含创造者的姓名，创作日期以及创造者联系信息。3、语法:<article></article>说明:article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或者报纸中的一篇文章。	4、语法:<aside></aside>说明:aside元素表示acticle元素的内容之外的，与article元素的内容相关的辅助信息	5、语法:<section></section>说明:section元素表示页面中的一个内容区块,比如章节、页眉、页脚或页面中的其他重要部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。6、语法:<nav></nav>说明:nav元素表示页面中导航链接的部分。	7、语法:<figure></figure>说明:figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题8、语法:<mark></mark>说明：mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

第十二章、CSS3选择器和新增属性

一、CSS3选择器	1、属性选择器		语法:E[att]{sRules}	说明:用于选取带有指定属性的元素		语法:E[att="val"]{sRules}	说明:用于选取带有指定属性和值的元素。		语法:E[att~="val"]{sRules}	说明:用于选取属性值中包含指定词汇的元素。		语法:E[att|="val"]{sRules}	说明:用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。		语法:E[att^="val"]{sRules}	说明:匹配属性值以指定值开头的每个元素。		语法:E[att$="val"]{sRules}	说明:匹配属性值以指定值结尾的每个元素。		语法:E[att*="val"]{sRules}	说明:匹配属性值中包含指定值的每个元素。		2、伪类选择器		结构性伪类选择器			1）、语法：:first-child与 :last-child		说明：单独指定第一个子元素和最后一个子元素的样式。				2）、语法：:nth-child（）与 :nth-last-child（）		说明：对指定序号的子元素使用样式。				对所有第奇数个子元素或第偶数个子元素使用样式					:nth-child(odd){}//所有正数下第奇数个子元素					:nth-child(even){}//所有正数下第偶数个子元素					:nth-last-child(odd){}//所有倒数上第奇数个子元素					:nth-last-child(even){}//所有倒数上第偶数个子元素					3）、语法: :nth-of-type与:nth-last-of-type		说明:使用这两种选择器时，CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候，就只针对同类型		的子元素进行计算了。				4）、语法：:nth-child(an+b)与nth-last-child(an+b)		说明:循环使用样式，an+b形式，a表示每次循环中共包括几种样式，b表示指定的样式在循环中所处的位置。				5）、语法：:only-child		说明：只有一个元素的时候使用			目标伪类选择器			1）、语法：:target		说明：突出显示活动的HTML锚		URL带有后面跟有锚名称#，指向文档内某个具体的元素。这个被链接的元素就是目标元素（target element）。				:target 选择器可用于选取当前活动的目标元素。		使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的		超链接，并且跳转到target元素后起作用。			3、层级选择器		1）、语法：E>F{sRules}	说明：子元素选择器（Child selectors）只能选择作为某元素子元素的元素，选择匹配的F元素，且匹配的F元素为所匹配的E元素的子元素。		2）、语法：E+F{sRules}	说明：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，EF两元素具有一个相同的父元素，而且F元素在E元素	后面，而且相邻。		3）、语法：E~F{sRules}	说明：用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。	二、服务器端字体和iconfont		1、服务器端字体	语法：@font-face	说明：	@font-face{	font-family:WebFont;	src:url("fonts/Fontin_Sans_B_45b.otf")format("opentype");	}	div{font-family:WebFont;}		WebFont用来声明使用服务端的字体	format用来声明字体文件的格式，可以省略文件格式的声明而单独使用src属性值。	字体文件的格式有OpenType与TrueType，前者的属性值为opentype，后者的属性值为turetype；前者的文件扩展名为.otf,后者的为.ttf		2、iconfont	用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。	三、CSS3新增属性	1、背景属性	1）、语法: background-clip:border-box/padding-box/content-box	说明：在CSS3中，可以使用background-clip 来修改背景的显示范围，如果将background-clip的属性值设定为border，则背景范围包括边框，	如果设定为padding，则不包括边框。			border-box：背景被裁剪到边框盒		padding-box：背景被裁剪到内边距框		content-box：背景被裁剪到内容框		2）、语法: background-origin:border-box/padding-box/content-box	说明：在绘制背景图像时，默认是从内部padding区域的左上角开始，但是可以利用background-origin属性来指定绘制时从边框的左上角开始，	或者从内容的左上角开始。		3）、语法：background-size:length/percentage/cover/contain	说明：在CSS3中，可以使用background-size属性来指定背景图像的大小			length：设置背景图像的高度和宽度。		第一个值设置宽度，第二个值设置高度。		如果只设置一个值，则第二个值会被设置为“auto”。		percentage：以父元素的百分比来设置背景图像的宽度和高度。		cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。		contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。		在一个元素中添加多张背景图片		4）、语法：div{background-image:url(flower-red.png),url(flower-green.png),url(sky.jpg);background-repeat:no-repeat,repeat-x,no-repeat;	background-position:3% 98%,center center,right top;width:300px}	说明：第一个定义的背景图片在最上面的，最后定义的是在最下面的。使用background-repeat和background-position可以单独指定背景图像中某个文件的平铺	方式与放置的位置		2、边框属性		1）、语法：border-raidus	说明：圆角边框	border-raidus：左上 右上 右下 左下	border-raidus：左上右下 右上左下	border-top-left-radius：左上角		2）、语法：border-image:url("url")A B C D/border-image-width border-image-repeat	说明：让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制。		第一个参数作为边框使用图像的路径，	A B C D表示当浏览器自动把边框所使用到的图像进行分隔时的上边距，右边距，下边距，左边距，四个边距相同时可以缩写成一个，不需要单位	border-img-width：表示边框的宽度	border-image-repeat：表示图像边框是否应平铺（repeat）、铺满（round）或拉伸（stretch）			3、盒阴影		语法：box-shadow:h-shadow v-shadow blur spread color inset	说明：让盒在显示时产生阴影效果。	h-shadow：必需。水平阴影的位置。允许负值。	v-shadow：必需。垂直阴影的位置。允许负值。	blur：可选。模糊距离。	spread：可选。阴影的尺寸。	color：可选。阴影的颜色。	inset：可选。将外部阴影（outset）改为内部阴影

第十三章、2D和3D效果

一、2D效果	1、CSS3过渡		通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。		IE 10、Firefox、Chrome以及Opera支持transition属性。	Safari 需要前缀-webkit-。		要实现这一点，必须规定两项内容：	规定您希望把效果添加到哪个CSS属性上	规定效果的时长		下面列出了所有的转换属性：	属性                 描述	transition           简写属性，用于在一个属性中设置四个过渡属性。	transition-property  规定应用过渡的CSS属性的名称。	transition-duration  定义过渡效果花费的时间。默认是0。	transition-timing-function  规定过渡效果的时间曲线。默认是“ease”。	transition-delay  规定过渡效果何时开始。默认是0。		1）、语法：transition-timing-function	说明：transition-timing-function属性规定过渡效果的速度曲线		linear：规定以相同速度开始至结束的过渡效果。	ease：规定以慢速开始，然后变快，然后慢速结束的过渡效果。	ease-in：规定以慢速开始的过渡效果。	ease-out：规定以慢速结束的过渡效果。	ease-in-out：规定以慢速开始和结束的过渡效果。	cubic-bezier（n,n,n,n）：在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。		2）、语法：transition-delay:time;	说明：transition-delay属性规定过渡效果何时开始。		Time：规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。			2、2D变形	在CSS3中transform主要包括以下几种：选择rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。		语法：transform：none|rotate|scale|skew|translate|matrix;	说明：	none：表示不进行变换；	可以同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，但transform中使用多个属性时却需要有空格隔开		1）、旋转rotate		rotate（）：通过指定的角度参数对原元素指定一个2D rotation（2D旋转），需先有transform-origin属性的定义。	transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。	如：transform:rotate（30deg）		2）、移动translate		移动translate我们分为三种情况：	translate（x,y）水平方向和垂直方向同时移动（也就是x轴和y轴同时移动）	translateX（x）仅水平方向移动	translateY（y）仅垂直方向移动		如：	transform:translate(100px,20px);		3）、缩放scale	scale（x,y）使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）	scaleX（x） 元素仅水平方向缩放	scaleY（y） 元素仅垂直方向缩放	中心点就是元素的中心位置，缩放基数为1		4）、扭曲skew 	skew（x,y）使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；	skewX（x）仅使元素在水平方向扭曲变形（X轴扭曲变形）	skewY（y）仅使元素在垂直方向扭曲变形（Y轴扭曲变形）		如：	transform:skew(30deg,10deg);		5）、改变元素基点transform-origin		transform-origin主要作用是在进行transform动作之前可以改变元素的基点位置，因为元素默认基点就是其中心位置。		语法：transform-origin:x-axis y-axis;	说明：默认点是元素的中心点。	其中X和Y的值可以是百分值，em，px，其中X也可以是字符参数值left，center，right；Y和X一样除了百分值外还可以设置字符值top，center，bottom，这个看上去有点像background	-position设置一样	二、3D效果	1、3D效果		1）、3D位移		在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。			随着px的增加，直观效果上:		X：从左向右移动		Y：从上向下移动		Z：以方框中心为原点，变大				2）、3D旋转		rotateX()、rotateY()和rotateZ()				随着px的增加，直观效果上:		X：以方框X轴，从下向上旋转		Y：以方框Y轴，从左向右旋转		Z：以方框中心为原点，顺时针旋转				3）、3D缩放		scale3d（x,y,z）				随着放大倍数的增加，直观效果上:		X:以方框Y轴，左右变宽		Y:以方框X轴，上下变高		Z:看不出变化。scaleZ()和scale3d()函数单独使用时没有任何效果				4）、3D Transsform转换属性				属性                       描述		transform              向元素应用2D或3D转换     		transform-origin       允许你改变被转换元素的位置		transform-style        规定被嵌套元素如何在3D空间中显示		perspective            规定3D元素的透视效果		perspective-origin     规定3D元素的底部位置		backface-visibility    定义元素在不面对屏幕时是否可见				语法：transform-origin：x-axis y-axis z-axis;				语法：transform-style:flat|preserve-3d;		说明：规定如何在3D空间中呈现被嵌套的元素。		flat：子元素将不保留其3D位置		preserve-3d：子元素将保留其3D位置		perspective:xpx（透视点）x:1200~2000				语法：perspective-origin:x-axis y-axis;		说明：第一个长度值指定相对于元素的包含框的X轴上的位置。		第一个长度值指定相对于元素的包含框的Y轴上的位置。				语法：backface-visibility:		说明：定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用		visible：为backface-visibility的默认值，表示反面可见		hidden：表示反面不可见			2、CSS3动画		第一种叫过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。css过渡只能定义首和尾两个状态，所有是最简单的一种动画。		第二种叫关键帧（keyframes）动画。不同于第一种的过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧来说的话，过渡动画只能定义	第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。		语法：@keyframes animationname{		keyframes-selector{css-styles;}	}	说明：animationname（声明动画的名称）	keyframes-selector：用来划分动画的时长，可以使用百分比形式，也可以使用“from”和“to”的形式。	“from”和“to”的形式等价于0%和100%。	建议始终使用百分比形式。		@keyframes 规则和所有动画属性	属性                                描述	animation                   所有动画属性的简写属性，除了animation-play-state属性。	animation-name              规定@keyframes动画的名称。	animation-duration          规定动画完成一个周期所花费的秒或毫秒。默认是0。	animation-timing-function   规定动画的速度曲线。	animation-delay             规定动画何时开始。默认是0。	animation-iteration-count   规定动画被播放的次数。默认是1。infinite：无限次播放		语法：animation-direction：normal|alternate;	说明：animation-direction属性定义是否应该轮流反向播放动画。	normal：默认值	alternate：动画应该轮流反向播放		语法：animation-play-state：paused|running;	说明：animation-play-state属性规定动画正在运行还是暂停。	注释：您可以在JavaScript中使用该属性，这样就能在播放过程中暂停动画。	paused：规定动画已暂停。	running：规定动画正在播放。

第十四章、弹性盒和媒体查询

一、弹性盒		弹性盒子是CSS3的一种新的布局模式。	CSS3弹性盒（Flexible Box或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。	引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。	弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。	弹性容器通过设置display属性的值为flex将其定义为弹性容器。	弹性容器内包含了一个或多个弹性子元素。		主轴（main axis）：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。主轴不一定水平；这主要取决与“justify-content”属性（详细见下文）。	主轴起点（main-start）和主轴终点（main-end）：伸缩项目放置在伸缩容器内从主轴起点（main-start）和主轴终点（main-end）方向。	主轴尺寸（main size）：伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度，要么是高度属性，由哪一个对着主轴方向决定。		侧轴（cross axis）：垂直于主轴称为侧轴。	侧轴起点（cross-start）和主轴终点（cross-end）：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。	侧轴尺寸（cross size）：伸缩项目在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是[width]或[height]属性，由哪一个对着侧轴方向决定		以下属性设在容器上：	display	flex-direction	flex-wrap	flex-flow	justify-content	align-items	align-content	以下子属性设在内部元素上：	flex-grow	flex-shrink	flex-basis	flex	order	align-self		1、语法:display:flex|inline-flex;	说明：弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器		flex：将对象作为弹性伸缩盒显示。	inline-flex：将对象作为内联块级弹性伸缩盒显示。		2、语法：flex-direction:row|row-reverse|column|column-reverse;	说明：设置伸缩盒主轴的起点和终点位置，子元素依然按照从主轴起点向终点方向排列		row：默认位置，主轴横向，起点在左侧，终点在右侧。	row-reverse：主轴横向反转，起点在右侧，终点在左侧。	column：主轴纵向，起点在上方，终点在下方。	column-reverse：主轴纵向反转，起点在下方，终点在上方。		3、语法：flex-wrap:nowrap|wrap|wrap-reverse;	说明：设置或检索伸缩盒对象的子元素超出父容器时是否换行。		nowrap：当子元素溢出父容器时不换行。	wrap：当子元素溢出父容器时自动换行。	wrap-reverse：反转wrap排列。		4、语法：justify-content:flex-start|flex-end|center|space-between|space-around;	说明：设置或检索弹性盒子元素在主轴方向上的对齐方式。	当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。		flex-start：弹性盒子元素将向行起始位置对齐。	flex-end：弹性盒子元素将向行结束位置对齐。	center：弹性盒子元素将向行中间位置对齐。	space-between：弹性盒子元素会平均地分布在行里。	space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半		5、语法：align-items:flex-start|flex-end|center|baseline|stretch;	说明：设置或检索弹性盒子元素在侧轴方向上的对齐方式。	 	baseline：将文字对齐；	stretch：如果未设置宽髙，那么将元素默认拉伸为父元素高度。		6、语法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;	说明：用于修改flex-wrap属性的行为。类似与justify-content，但它不是设置弹性子元素的对齐，而是设置各个行的对齐。	stretch：各行将会伸展以占用剩余的空间。		子元素属性 	7、语法：flex-grow：<number>(default 0);	说明：设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。	<number>:用数值来定义扩展比率。不允许负值	flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的		8、语法：flex-shrink:<number>(default 1);	说明：设置或检索弹性盒的收缩比率。	flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。		9、语法：flex-basis:<length>|auto(default auto);	说明：设置或检索弹性盒伸缩基准值		auto：无特定宽度值，取决于其它属性值	<length>：用长度值来定义宽度。不允许负值	<percentage>：用百分比来定义宽度。不允许负值		10、语法：flex:none|[flex-grow]||[flex-shrink]||[flex-basis];	说明：复合属性。设置或检索伸缩盒对象的子元素如何分配空间。	常用：flex:1;		11、语法：order:<integer>;	说明：设置或检索弹性盒模型对象的子元素出现的顺序。	<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。	默认值：0;		12、语法：align-self:auto|flex-start|flex-end|center|baseline|stretch;	说明：用于设置弹性元素自身在侧轴方向上的对齐方式。	二、媒体查询媒体查询可以让我们根据设备显示器的特征（如视口宽度、屏幕比例、设备方向:横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特征有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。语法一：@media mediatype and|not|only(media feature){	CSS-Code;}语法二：针对不同的媒体使用不同stylesheets<link rel="stylesheets" media="mediatype and|not|only(media feature)" href="mystylesheet.css">

第十五章、移动端布局

一、百分比（弹性）布局的原理及应用二、rem（等比缩放）布局的原理及应用		px为单位	em为单位 		能够解决在浏览器中放大或缩放浏览页面时会存在一个问题	rem是什么？	rem（font size of the root element）是指相对与根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of element）是指相对于	父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。		rem能等比例适配所有屏幕	rem是通过根元素进行适配的，

上一篇：MySQL最全笔记

下一篇：spring相关笔记

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！