W3C标准化学习梳理

一，行内元素与块级元素的三个区别

1.行内元素与块级元素直观上的区别

    行内元素会在一条直线上排列，都是同一行的，水平方向排列

    块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

在标准文档流里面，块级元素具有以下特点：
①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
   行内元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

块级元素和行内元素可相互包含。

行内元素与块级元素以及之间的转换

http://www.jianshu.com/p/274614a078f3

display:inline 对应不显示为 display:none

display:block 对应不显示为 hidden

说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。

二。行内元素转换为块级元素

        display:block (字面意思表现形式设为块级)

三。行内元素与块级元素

块级元素列表

<address>	定义地址
<caption>	定义表格标题
<dd>	定义列表中定义条目
<div>	定义文档中的分区或节
<dl>	定义列表
<dt>	定义列表中的项目
<fieldset>	定义一个框架集
<form>	创建 HTML 表单
<h1>	定义最大的标题
<h2>	定义副标题
<h3>	定义标题
<h4>	定义标题
<h5>	定义标题
<h6>	定义最小的标题
<hr>	创建一条水平线
<legend>	元素为 fieldset 元素定义标题
<li>	标签定义列表项目
<noframes>	为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>	定义在脚本未被执行时的替代内容
<ol>	定义有序列表
<ul>	定义无序列表
<p>	标签定义段落
<pre>	定义预格式化的文本
<table>	标签定义 HTML 表格
<tbody>	标签表格主体（正文）
<td>	表格中的标准单元格
<tfoot>	定义表格的页脚（脚注或表注）
<th>	定义表头单元格
<thead>	标签定义表格的表头
<tr>	定义表格中的行

行内元素列表

<a>	标签可定义锚
<abbr>	表示一个缩写形式
<acronym>	定义只取首字母缩写
<b>	字体加粗
<bdo>	可覆盖默认的文本方向
<big>	大号字体加粗
<br>	换行
<cite>	引用进行定义
<code>	定义计算机代码文本
<dfn>	定义一个定义项目
<em>	定义为强调的内容
<i>	斜体文本效果
<img>	向网页中嵌入一幅图像
<input>	输入框
<kbd>	定义键盘文本
<label>	标签为 input 元素定义标注（标记）
<q>	定义短的引用
<samp>	定义样本文本
<select>	创建单选或多选菜单
<small>	呈现小号字体效果
<span>	组合文档中的行内元素
<strong>	语气更强的强调的内容
<sub>	定义下标文本
<sup>	定义上标文本
<textarea>	多行的文本输入控件
<tt>	打字机或者等宽的文本效果
<var>	定义变量

可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素

<button>	按钮
<del>	定义文档中已被删除的文本
<iframe>	创建包含另外一个文档的内联框架（即行内框架）
<ins>	标签定义已经被插入文档中的文本
<map>	客户端图像映射（即热区）
<object>	object对象
<script>	客户端脚本

四。

<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”，定义标题)和<dd>标记(“definition description”，定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。
也就是说<dt>用来创建列表中的上层项目，<dd>用来创建列表中最下层项目，<dt>和<dd>都必须放在<dl>< /dl>标志对之间。
<dl>
<dt>我们在做列表标题</dt>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
</dl>
五。
<abbr>及<acronym>标记表示网页中呈现的文字缩写与简称，都通过title属性来给出缩写的完整名称。二者的区别在于<acronym>标记用来表示首字母缩略词，并且往往缩写形式是一个可发音的单词。
<abbr title="United Nations">U.N.</abbr><br>
六。table布局的网页有什么特点
代码量大，结构混乱；
标签语义不明确，对搜索引擎不友好；
后期代码维护困难，不易功能扩展

七。
HTML 元素 <b> 和 <strong> 有什么区别（无障碍人群）
HTML 标签 <b> 的意思是「bold」（粗体），它是一个单纯的样式标签，指定文本要用粗体。
<strong> 是一个带有着重意味的标签，浏览器通常也把它显示为粗体。
<b>这个标签对应 bold，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式／风格需求；
<strong>这个标签意思是加强，表示该文本比较重要，提醒读者／终端注意。为了达到这个目的，浏览器等终端将其加粗显示；
总结：<b>为了加粗而加粗，<strong>为了标明重点而加粗
盲人朋友使用阅读设备阅读网络时：<strong>会重读，<B>不会
- 自然样式标签b, i, u, s, pre
语义样式标签strong, em, ins, del, code
八。选择器
1 类别选择器
 
 

  
  类选择器根据类名来选择
 
 
 
 

  
  前面以”.”来标志，如：
 
 
 
 

  
  .demoDiv{
 
 
 
 

  
  color:#FF0000;
 
 
 
 

  
  }
 
 
2 标签选择器
 
 

  
  一个完整的HTML页面是有很多不同的标签组成，而
  
  标签选择器，则是决定哪些标签
 
 
 
 

  
  采用相应的CSS样式
 
 
 
 

  
  p{
 
 
 
 

  
  font-size:12px;
 
 
 
 

  
  background:#900;
 
 
 
 

  
  color:090;
 
 
 
 

  
  }
 
 
3 ID选择器
 
 

  
  ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次
 
 
 
 

  
  前面以”#”号来标志，在样式里面可以这样定义：
 
 
 
 

  
  #demoDiv{
 
 
 
 

  
  color:#FF0000;
 
 
 
 

  
  }
 
 
4 后代选择器
 
 

  
  后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。
 
 
 
 

  
  如：
 
 
 
 

  
  <style>
 
 
 
 

  
  .father.child{
 
 
 
 

  
  color:#0000CC;
 
 
 
 

  
  }
 
 
 
 

  
  </style>
 
 
5.子选择器
 
 

  
  请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择
 
 
#links > a {color:blue;}
6 伪类选择器
 
 

  
  有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。
 
 
 
 

  
  a:link{
 
 
 
 

  
  color:#999999;
 
 
 
 

  
  }
 
 
 
 

  
  a:visited{
 
 
 
 

  
  color:#FFFF00;
 
 
 
 

  
  }
 
 
 
 

  
  a:hover{
 
 
 
 

  
  color:#006600;
 
 
 
 

  
  }
 
 
 
 

  
  /* IE不支持，用Firefox浏览可以看到效果 */
 
 
 
 

  
  input:focus{
 
 
 
 

  
  background:# E0F1F5;
 
 
 
 

  
  }
 
 
 
 

  
  Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。
 
 
7 通用选择器
 
 

  
  通用选择器用*来表示。例如：
 
 
 
 

  
  *{
 
 
 
 

  
  font-size: 12px;
 
 
 
 

  
  }
 
 
 
 

  
  表示所有的元素的字体大小都是12px；同时通用选择器还可以和后代选择器组合。
 
 
 
 

  
  例如：
 
 
 
 

  
  p *{
 
 
 
 

  
  ……
 
 
 
 

  
  }
 
 
 
 

  
  表示所有p元素后代的所有元素都应用这个样式。
 
 
8 群组选择器
 
 

  
  当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
 
 
 
 

  
  p, td, li {
 
 
 
 

  
  line-height:20px;
 
 
 
 

  
  color:#c00;
 
 
 
 

  
  }
 
 
9 相邻同胞选择器
 
 

  
  我们除了上面的子选择器与后代选择器，我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器。看下面的代码：
 
 
 
 

  
  Example Source Code CSS
 
 
 
 

  
  h1 + p {color:blue}
 
 
 
 

  
  HTML
 
 
 
 

  
  <h1>一个非常专业的CSS站点</h1>
 
 
 
 

  
  <p>Div+CSS教程中，介绍了很多关于CSS网页布局的知识。</p>
 
 
 
 

  
  <p>CSS布局实例中，有很多与CSS布局有关的案例。</p>
 
 
 
 

  
  我们将会看到第一个段落“Div+CSS教程中，介绍了很多关于CSS网页布局的知识。”文字颜色将会是蓝色。而第二段则不受此CSS样式的影响。
 
 
 
 

  
  +和~的区别：类似上面一个，两者都表示兄弟关系，但是+必须是“大哥+二哥”，~还能是“大哥~三弟”、“二哥~四妹”
 
 
10 属性选择器
 
 

  
  您可以用判断html标签的某个属性是否存在的方法来定义css
 
 
 
 

  
  属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；!ie6，0 0 1 0
  
  
　　当然，也可以同时匹配多个属性
  
  

  
  
11 伪元素选择器
  
  

   
   所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器
  
  
如：p:first-letter em {} 这就是不合法的，ie6不支持:first-letter，设置块元素首字母样式，行内元素转换成块元素和行内块元素也支持；
  
  
　　div p:first-letter {font-size: 20px}
  
  
　　//选择div元素里所有的p元素的第一个字母或汉字，如果把块元素转换成行内元素则就不支持了
  
  

  
  
12 结构性伪类选择器
结构性伪类选择器的冒号前边可以跟一个其他选择器做为限定；
  
  
　　带括号的选择器，里面一定要有参数；
  
  
　　匹配子元素，同时也会匹配孙子元素，因为子元素是孙子元素的父元素；
  
  

   
   下面的 !lte8是指IE8一下浏览器不支持，包括IE8也不支持
  
  
:first-of-type，选择相对父元素里同类型子元素中的第一个，!
  
  
13 UI元素状态伪类选择器
  
  

   
   :enabled，指定元素处于可用状态时的样式，一般用于input，select和textarea
   
   
　　:disabled，指定元素处于不可用状态时的样式，一般用于input，select和textarea
  
  
  
  

   
   :read-only，指定元素为只读状态时的样式，FF为-moz-read-only，一般用于input和textarea
   
   
　　:read-write，指定元素为只可写状态时的样式，FF为-moz-read-write，一般用于input和textarea
   
   
　　:checked，指定元素被选中状态时的样式，FF为-moz-checked一般用于checkbox和radio
   
   
　　:default，指定元素默认选中的样式，一般用于checkbox和radio
   
   
　　:indeterminate，指定默认一组单选或复选都没被选中的样式，只要有一个被选中则样式被取消，一般用于checkbox和radio
   
   
　　::selection，指定元素处理选中状态时的样式，可用于所有元素，上面的几个基本上只用于表单元素；!lte8
  
  
  
  
注意事项
  
  

   
   由于对CSS的解释是自上而下的，对于一个元素的相同属性描述，放在下面的会覆盖掉位于上面的属性描述，因此我们在对元素的选择中一定要注意书写顺序，如：
  
  
  
  

   
   a:visited {color: #00FF00; text-decoration: none}
   
   
　　a:hover {color: #FF00FF; text-decoration: underline}
  
  
  
  

   
   采用这样的书写顺序，无论链接有没有被访问过，只要当鼠标移到链接上，链接都会变成蓝色并有下划线。但是，如果采用下面的书写顺序：
  
  
  
  

   
   a:hover {color: #FF00FF; text-decoration: underline}
  
  
  
  

   
   a:visited {color: #00FF00; text-decoration: none}
  
  
  
  

   
   如果链接被访问过，则当你鼠标移到链接上时不会变成蓝色并有下划线，依然保持绿色。
   
   
css important
   
   

    
    
定义及语法
   
   
   
   

    
    !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}
   
   
在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面
  
  
  
  

 
 
 
 

  
  默认情况下,CSS规则按级层覆盖，例如在.CSS文件中的定义可以被html文件中<style type="text/css"></style>里的定义覆盖，反之不行；书写在下面的定义可以覆盖写在上面的定义，反之不行。
 
 
 
 

  
  然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CSS规则。
 
 
 
 

  
  例:
 
 
 
 

  
  p { 
  
  text-indent: 1em ! important }
 
 
 
 

  
  p { font-style: italic ! important }
 
 
 
 

  
  p { 
  
  font-size: 18pt }
 
 
 
 

  
  p { text-indent: 1.5em}
 
 
 
 

  
  p { font: normal 12pt sans-serif}
 
 
 
 

  
  p { font-size: 24pt }
 
 
 
 

  
  在这些规则中 未被覆盖的有：
 
 
 
 

  
  p { text-indent: 1em ! important }
 
 
 
 

  
  p { font-style: italic ! important }
 
 
 
 

  
  p { font-size: 24pt }