CSS拓展

页面元素	名称
主导航	mainnav
页脚	foot
头部	header
商标	label
顶部导航	topnav
左侧栏	leftsidebar
标志	logo
子菜单	submenu
容器	container
登录	login
子导航	subnav
内容	content
底部	footer
标题	title
侧栏	sidebar
右侧栏	rightsidebar
标语	banner
注释	note
搜索	search
管理	admin

去除input自带边框线outline：none;
字体的省略

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

定位中的居中

left:0;
right:0;
margin:auto;

线性渐变

background:linear-gradient(180deg,#fff,#eee,#eee,#fff);

HTML中P标签内不可以放div元素
当一个p标签还没结束时 遇到下一个块元素就会把自己结束掉

<p>测试文字</p>//遇到块元素结束自己

<ul>

<li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>

</ul>

测试文字<p></p>
*************************************************************
<p>遇到<div>块元素结束自己</div></p>

<p>遇到</p>
<div>块元素结束自己</div>
<p></p>

只能放内联元素的元素(不可自由嵌套)

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>,<p>

可自由嵌套的元素

<ul>，<ol>,<dl>,<table>
<ul>,<ol>的第一级必须是<li>
<dl>的第一级必须是<dt>/<dd>
<table>的第一级必须是<caption>、<thead>、<tfoot>、<tbody>

虽然在IE 浏览器里，所有的元素都可以定义宽高，但这是IE自己的标准，并非所有浏览器都支持，W3C称它们为替换元素，它们在属于inline的情况下同样具有block的一些特性，在"display:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素，使之既可以以内联元素显示，又可以设置块级元素的属性。

---

DTD（Document Type Definition）说明以何种文档定义来编写页面
pre:保持标签里的空格

浏览器的兼容性问题

• 渐进增强(先考虑兼容)
  优先考虑低版本，由低版本向高版本递进。
  一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能以达到更好的体验。

.transition{
	-webkit-transition:all 0.2s;//谷歌
	-moz-transition:all 0.2s;//火狐
	-ms-transition:all 0.2s;//IE
	-0-transition:all 0.2s;//欧鹏
	transition:all 0.2s;
}

• 优雅降级（先关注最高级的，在考虑兼容）
  针对最高级浏览器来设置后在考虑低版本浏览器的兼容问题

.transition{	
	transition:all 0.2s;
	-0-transition:all 0.2s;//欧鹏
	-ms-transition:all 0.2s;//IE
	-moz-transition:all 0.2s;//火狐
	-webkit-transition:all 0.2s;//谷歌
}

由于一些低级的浏览器不支持CSS3，所以在高级浏览器中使用CSS3,而在低级浏览器中只保证最基本的功能，所以在工作流程上也产生了差别，因此有了渐进增强和优雅降级的概念。

---

背景位置的设置

向右移动取负值
向左移动取正值
向下移动取正值
向上移动取复制

---

空白三角的制作

.span::before{
	position:absolute;
	content:"";
	width:0;
	height:0;
	top:0;
	left:48px;
	border-top:solid 22px transparent;
	border-right:solid 8px white;
	border-bottom:solid 0 transparent;
	border-left:solid 0 transparent;
}

---

图片透明度设置
opacity//代表透明度水准。默认范围时0—100，0代表完全透明，100代表完全不透明。

word-break:break all;

过渡属性

transition:设置过渡效果CSS属性名称 规定完成过渡所需时间（s） 规定速度效果曲线 定义过渡如何开始

超链接属性target

• _parent：在上一级窗口中打开，这使得页面载入父窗口
• _blank：浏览器在一个新的窗口中打开页面
• _self：在同一个窗口中打开，这项一般是默认的
• _top：在浏览器的整个窗口中打开，忽略任何框架结构

---

电子邮件常见属性

<a href="mailto:电子邮件地址？subject=电子邮件主题">文字链接</a>
<a href="mailto:电子邮件地址？body=电子邮件主题">文字链接</a>
<a href="mailto:电子邮件地址？cc=电子邮件地址">文字链接</a>
<a href="mailto:电子邮件地址？bcc=电子邮件主题">文字链接</a>
当电子邮件需要同时设定多个属性时需要用&连接

• ftp链接
  ftp：文件传输协议，协议是计算机与计算机之间能够相互通讯的语言。ftp使文件和文件夹能在internet上公开传输。通常网上会有匿名的公开ftp服务器，通过文件传输协议用户可以足不出户的获得各种免费软件和需要的文件

<a href="ftp://地址">文字链接</a>

• telnet链接
  telnet是指一台计算机远程连接到另一台计算机上，并在远程计算机上运行自己的程序，从而共享计算机资源

<a href="telnet://地址">文字链接</a>