一天搞定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 * ...
随机推荐
- HTML解析器BeautifulSoup
BeautifulSoup是Python的一个库,可解析用urllib2抓取下来的HTML 1.Beautiful Soup 安装 可以利用 pip 来安装,在Python程序中导入 pip inst ...
- JS中substring与substr的区别
Substring: 该方法可以有一个参数也可以有两个参数. (1) 一个参数: 示例: var str=“Olive”: str.substring(3); 结果:“ve” 说明:当substri ...
- 感觉不止被Q了一下，还不知道被谁套了一个虚弱
最近身体出现了一些问题,导致博客无法正常更新,只能是看身体状态更新了,相信用不了半个月就会满血复活的,请谅解 Joker在这里提醒大家 身体是革命的本钱,不要透支,不要过度消耗
- 记录一个NPE问题
昨天在做公司项目时,我在一处地方加了一个逻辑校验,之后测了下发现在方法调用深处有一处NPE,来源于另一个同事的代码. 其实NPE本应该是个Java编程中老掉牙的问题,但我觉得这一处错误还是比较典型的, ...
- JS中字符串与数组的一些常用方法
真是恨透了这些类似于substring substr slice 要么长得像,要么就功能相近的方法... 1⃣️string 1.substring(start开始位置的索引,end结束位置索引) 截 ...
- js小数处理
js中的小数处理 先说说Math的几个方法: 1.Math.floor(x) 返回不大于当前数的最大整数. 我的记法:floor 直译 地板 也就是不大于的的意思 (x-0.5 四舍五入取整 ...
- 使用 Laravel 实现微型博客系统
参考链接:An Introduction to Laravel Authorization Gates 这个微型博客系统包含两个用户角色(作者 和 编辑),它们的权限如下: 作者能创建博客 作者能更新 ...
- 使用canvas进行图片裁剪简单功能
1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...
- JavaScript异步编程
前言 如果你有志于成为一个优秀的前端工程师,或是想要深入学习JavaScript,异步编程是必不可少的一个知识点,这也是区分初级,中级或高级前端的依据之一.如果你对异步编程没有太清晰的概念,那么我建议 ...
- YAHOO 34 条前端优化建议
雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通 ...