您的位置：首页 > Web前端 > CSS

标签类型转换、样式重置笔记

2017-09-04 21:29 162 查看
默认样式重置（css reset）：

第一种方法（推荐这种方式，虽然不方便，但是稳定性和性能很好，提倡！还需要重置字的颜色，字体等）：

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px; /*font-family:XX字体;*/}


ol,ul{ list-style:none;padding:0; margin:0;}


a{ text-decoration:none;}


img{border:none;}


第二种方法（这种方法虽然简便，但是稳定性和性能非常不好，非常不提倡！）：

*{ margin:0;padding:0;}


Why css reset？

因为，市面上流行着各式各样的浏览器，它们每家每户的默认样式都不同，如果不进行重置，会让我们写的代码对各个浏览器出现不兼容的现象。因此，需要对默认样式进行重置。再自己将样式进行描绘。

行内标签，即内联标签或内嵌标签，包含 
<a>
标签、
<b>
标签、
<img>
 标签、
<span>
标签、
<strong>
标签、
<em>
标签、
<br>
标签、
<button>
标签、
<input>
标签、
<select>
标签、
<label>
标签、
<textarea>
标签等标签。他们具有如下属性：

默认同行可以继续跟同类型标签（指的是同为内嵌标签类型）；

内容撑开宽度；

不支持代码定义宽高；

不支持上下的 margin 和上下的 padding ；

代码换行和空格会被解析。

块属性标签，包含 
<p>
标签、
<div>
标签、
<h1>~<h6>
标签、
<ol>-<li>
有序列表、
<ul>-<li>
无序列表、
<dl>-<dt>-<dd>
自带标题列表、
<pre>
标签、
<hr>
标签等标签。他们具有如下属性：

默认独占一行；

没有宽度时，默认撑满一排；

支持所有 css 命令。

块与内嵌的类型转换：
display:block;
——显示为块；
display:inline;
——显示为内嵌。比如如下命令将块元素 div 转换成行内元素：
div{ display:inline;}
。

inline-block 特性：

块在一行内显示；

行内属性标签支持宽高；

没有宽度的时候内容撑开宽度;

<img>
标签是有着类似于 
inline-block
类型（一行内的块）的标签，其本身是行内标签。

html 解析问题：

代码换行或空格会被解析（实际上就是默认样式重置里字体像素大小的一半）；

IE6 和 IE7 不支持块属性标签的 inline-block。

其他标签与属性：

<abbr></abbr>
表示定义缩写；

title=“”
表示元素的额外提示信息（可加在任何一个标签上）；

<cite></cite>
表示作者；

<q></q>
表示引用，具体表现为两个双引号。

前端规范：

所有书写均在英文半角状态下的小写；

id、class 必须以字母开头；

所有标签必须闭合，包括双标签和单标签；

html 标签用 tab 键缩进；

属性值必须用引号，比如 
id=
后面就必须加上两个双引号；

<!-- html注释 -->
在两个 
--
之间必须的有两个空格；

/* css注释 */
同样在两个 
*
之间必须的有两个空格；

<ul>-<li>
，
<ol>-<li>
，
<dl>-<dt>-<dd>
是拥有父子级关系的标签；

<p>
，
<dt>
，
<h1>~<h6>
标签里面不能嵌套块属性标签；

<a>
标签不能嵌套 
<a>
标签；

内联元素不能嵌套块；

想了解更多
<html>
标签（包含不常见的标签），请戳这里。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 标签 样式重置 内联元素 块级元素
相关文章推荐
新的分享
章节导航