html css 的一些基础知识笔记（选择器，块级，行内元素）

选择器的优先级依次是: 内联样式（用=不用：） > id选择器 > 类选择器(class) > 标签选择器 > 通配符选择器　　　　id只能出现一次

   符号　　　　　　　　　无　　　　#　　　　.　　　　　　　　原标签　　　　*　　　　　　　　　　　　　　　注意并列选择时逗号隔开

 

（1）“>”是子元素选择器，只能选择作为某元素子元素的元素

 

（2）“ ”是后代选择器用于选取某元素的后代元素

 

（3）“+”是相邻兄弟选择器，可选择紧接在另一元素后的元素，且二者有相同父元素（后续一个元素）

 

（4）“~”是后续兄弟选择器，选取所有指定元素之后的相邻兄弟元素（后续满足条件的所有元素）

 

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

p{color:red;} /*权值为1*/　　　　　　　　　　　　　　　　　　　　　　遵循就近原则
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

常用的块状元素有：（总是在新行上开始；高度，行高以及外边距和内边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度，它可以容纳内联元素和其他块元素）display:block

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：（和其他元素都在一行上；高，行高及外边距和内边距不可改变；宽度就是它的文字或图片的宽度，不可改变内联元素只能容纳文本或者其他内联元素）display:inline

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：（表现为同行显示并可修改宽高内外边距等属性）display:inline-block;

<img>、<input>

html中内联元素和块级元素的区别

块级元素	行内元素
独占一行,默认情况下，其宽度自动填满其父元素宽度	相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
可以设置width，height属性	行内元素设置width，height属性无效
可以设置margin和padding属性	行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。
对应于display:block	对应于display:inline；

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

3.内联元素有

<a>        可定义锚以及超链接
<abbr>        表示一个缩写形式
<acronym>        表示只取title中首字母的缩写形式
<b>        字体加粗
<bdo>        可覆盖默认的文本方向
<big>        大号字体加粗
<br>        换行
<cite>        引用进行定义
<code>        定义计算机代码文本
<dfn>        定义一个定义项目
<em>        定义为强调的内容
<i>        斜体文本效果
<img>        向网页中嵌入一张图像
<input>        输入框
<kbd>        定义键盘文本
<label>        为input进行标记/标注
<q>        定义短的引用

<s>    表示不准确不相关，却不应当给予删除的内容

<samp>        定义样本文本

<select>        定义单选或者多选菜单
<small>        呈现小号字体效果
<span>        组合文档中的行内元素
<strong>        语气更强的强调内容
<sub>        定义下标文本
<sup>        定义上标文本
<textarea>        多行文本输入控件
<tt>        打字机或者等宽的文本效果
<var>        定义变量