一天搞定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 * ...
随机推荐
- Linux轻松使用vim
VIM命令---Vi IMproved, a programmers text editor文本编辑 1>gedit 图形文本编辑工具 2>vim 字符界面的编辑工具 写脚本 ...
- java中json和字符串互转及日期转换 练习
一:以下是用到的jar名称: commons-beanutils-1.6.jar commons-collections-3.2.1.jar commons-lang-2.6.jar commons- ...
- 【转载】GPIO模拟i2c通信
I2C总线的通信过程(见图4-8)主要包含三个主要阶段:起始阶段.数据传输阶段和终止阶段. 1. 起始阶段 在I2C总线不工作的情况下,SDA(数据线)和SCL(时钟线)上的信号均为高电平.如果此时主 ...
- List<String> 和 ArrayList<String>的区别
最近对这两个问题比较懵逼,关于List和ArrayList.List<String> list = new ArrayList<String>(); 好了,先搞明白List 和 ...
- [Oracle]LogMiner工具小结
(一)LogMiner工具的作用Logminer工具主要用来分析redo log和archive log文件.通过该工具,可以轻松获得Oracle redo log和archive log文件的具体内 ...
- Google Firebase Unity接入的坑
就说跑demo碰到的坑吧 https://firebase.google.com/docs/unity/setup 这是Firebase Unity的setup指南 大概写写步骤: 1. Fireba ...
- codeforces 591B Rebranding (模拟)
Rebranding Problem Description The name of one small but proud corporation consists of n lowercase E ...
- PHP获得上(两)周时间
就不手写了
- 非学习型单层感知机的java实现（日志三）
要求如下: 所以当神经元输出函数选择在硬极函数的时候,如果想分成上面的四个类型,则必须要2个神经元,其实至于所有的分类问题,n个神经元则可以分成2的n次方类型. 又前一节所证明出来的关系有: 从而算出 ...
- 工具类总结---（四）---Sharedpreferences保存
用于保存具有对应关系的键值对 import android.content.Context; import android.content.SharedPreferences; import java ...