一天搞定CSS： 标签样式初始化（CSS reset）及淘宝样式初始化代码--09
样式初始化：是指对HTML中某些标签的默认样式进行清除
样式初始化目的：
不同浏览器的默认样式不一样，若不清理，会导致相同的代码在浏览器中解析结果不一样，为了避免这种情况，所以需要进行样式初始化。
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*一、不适用通配符初始化*/
body,h1,h2,h3,h4,h5,h6,p,dl,dd{
margin: 0;
}
ul,ol{
margin: 0;
padding: 0;
list-style: none;
}
img{
border: none;
vertical-align: top;
}
a{
text-decoration: none;
}
/*二、通配符初始化*/
*{
margin: 0;
padding: 0;
}
/*
* 通配符的使用争议：
*
* 一般都都不建议用通配符
* 1、性能问题
* 2、浪费问题
*
* 若非要用通配符的话：建议
* 1、如果网站非常大，内容非常多，就不建议用通配符
* 2、如果小网站，内容不多，（比如：单页面）可以用通配符
*/
</style>
</head>
<body>
<!--
标签样式初始化（css reset）
原则：但凡页面中要用到的标签，有默认样式，会影响到其它的代码，这个时候就要把清掉。用不到的标签就不用清除
哪些样式需要重置
与盒模型相关的样式
margin
padding
border
标签特有的样式
ul li
ol li
-->
<a href="">123</a>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<p>这里可以放一段话</p>
<strong>强调</strong>
<em>强调</em>
<ul>
<li>ul是无序列表</li>
<li>li是列表项</li>
<li>ul的子元素只能是li</li>
<!--<div>这是一个div</div>-->
</ul>
<ol>
<li>ol是一个有序列表</li>
<li>li是列表项</li>
<li>ol的子元素只能是li</li>
<!--<div>这是一个div</div>-->
</ol>
<dl>
<dt>dl是自定义列表，dt表示列表的标题</dt>
<dd>dd是列表项</dd>
<dd>dt只能出现一次，dd可以出现多次</dd>
<!--<div>这是一个div</div>-->
</dl>
<mark>标记</mark>
</body>
</html>
淘宝样式初始化代码：
/*清除样式*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,a,p,textarea{
margin: 0;
padding: 0;
}
ul,ol,li{
list-style: none;
}
a{
text-decoration: none;
display: block;
}
img{
border: none;
display: block;
}
/*清除浮动*/
.clearfloat:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clearfloat{
zoom: 1;
}一天搞定CSS： 标签样式初始化（CSS reset）及淘宝样式初始化代码--09的更多相关文章
- 一天搞定CSS---终篇CSS总结
虽然说是一天搞定CSS,实际上也没有那么简单.只能说让你快速了解常见的CSS知识,解决基本的页面样式布局和设置. 每个独立的CSS知识点都比较简单,但是它们的应用非常灵活,特别是在综合应用中. 粗略说 ...
- 3D 穿梭效果？使用 CSS 轻松搞定
背景 周末在家习惯性登陆 Apex,准备玩几盘.在登陆加速器的过程中,发现加速器到期了. 我一直用的腾讯网游加速器,然而点击充值按钮,提示最近客户端升级改造,暂不支持充值(这个操作把我震惊了~).只能 ...
- 【摸鱼神器】一次搞定 vue3的 路由 + 菜单 + tabs
做一个管理后台,首先要设置路由,然后配置菜单(有时候还需要导航),再来一个动态tabs,最后加上权限判断. 这个是不是有点繁琐?尤其是路由的设置和菜单的配置,是不是很雷同?那么能不能简单一点呢?如果可 ...
- sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
- DIV CSS 网页兼容全搞定 （IE6 IE7 IE8 IE9 火狐 谷歌）
CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...
- 一行css代码搞定响应式布局
在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HT ...
- 一天搞定CSS（扩展）：CSS Hack
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- 一天搞定CSS：初识css--01
1)CSS:层叠样式表(英文全称:Cascading Style Sheets) 是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. C ...
- 全面系统讲解CSS工作应用+面试一步搞定
[TOC] 一.课程介绍 二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...
随机推荐
- lua table表
lua table表 语法结构 创建一个 table 直接使用 "{}" 即可 table1 = {} -- 赋值 table1["name"] = " ...
- a标签去掉默认样式并自定义样式
a { text-decoration: none;//去掉下划线 color: inherit; -webkit-user-select: none; -moz-user-select: none; ...
- wpf之StackPanel、WrapPanel、WrapPanel之间的关系
一.StackPanel StackPanel是以堆叠的方式显示其中的控件 1.可以使用Orientation属性更改堆叠的顺序分为水平方向(Orientation="Horizontal& ...
- 关于String类和String[]数组的获取长度方法细节
一.在Java中,以下代码段有错误的是第( )行 public static void main(String[] args) { String name = "小新"; ...
- Java匿名内部类使用与示例
首先说为什么有匿名类 两个原因(产生的使命) 1.简化代码编写 某种情况下,类只需要扩展一个方法,没必要为了一个方法单独去写一个子类,然后然后调用子类,此时需要匿名类 2.在不同的包内的类内调用类的p ...
- Spring事务隔离级别与传播机制详解，spring+mybatis+atomikos实现分布式事务管理
原创说明:本文为本人原创作品,绝非他处转载,转账请注明出处 1.事务的定义:事务是指多个操作单元组成的合集,多个单元操作是整体不可分割的,要么都操作不成功,要么都成功.其必须遵循四个原则(ACID). ...
- python基本数据类型——int
一.int的范围 python2: 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1: 在64位系统上,整数的位数为64位,取值范围为-2**63-2**63-1: pyth ...
- 03(3) 基于GMM-HMM的SR基础
1.GMM-HMM的训练 1)训练GSM-HMM (1)确定HMM拓扑结构 (2)初始化HMM模型参数 (3)在所有的utterances中计算所需的统计量 (4)使用公式更新模型参数 (5)不收敛, ...
- 微信小程序后台音乐播放注意事项
wx.seekBackgroundAudio(OBJECT) 作用:控制音乐播放进度. 注意: 该事件 会触发 wx.onBackgroundAudioPlay(CALLBACK) 事件 ,也就是相当 ...
- [KISSY5系列]KISSY5安装使用(一)
本文将从零开始安装KISSY环境 一.安装nodejs 从nodejs网站下载nodejs安装 地址: https://nodejs.org/en/download/ 二.下载KISSY 下载地址: ...