一天搞定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 * ...
随机推荐
- Vue.js动画在项目使用的两个示例
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...
- wpf之StackPanel、WrapPanel、WrapPanel之间的关系
一.StackPanel StackPanel是以堆叠的方式显示其中的控件 1.可以使用Orientation属性更改堆叠的顺序分为水平方向(Orientation="Horizontal& ...
- 使用CSharp编写Google Protobuf插件
什么是 Google Protocol Buffer? Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 ...
- C语言学习第五章
今天要进行一个重要元素数组的学习了.这一章要掌握什么是数组,数组怎么样命名,数组怎么样使用,以及一些常见的错误和需要注意的事项. 一. 数组的基本概念 数组是可以在内存中连续存储多个元素的结 ...
- 最大流算法之ISAP
序: 在之前的博文中,我解释了关于最大流的EK与Dinic算法,以及它们的STL/非STL的实现(其实没什么区别).本次讲解的是ISAP算法.'I',指 inproved,也就是说ISAP其实是SAP ...
- iOS 详解NSObject协议
协议就是一组接口的集合,遵守一个协议之后就拥有的该协议中所有方法的声明.NSObject这个类遵守了NSObject协议,并且实现了NSObject协议里的所有方法,所以NSObject类及其子类 ...
- TP5学习基础二：目录结构、URL路由、数据操作
一.安装1.使用git或者composer(composer update)进行实时更新,区别在于git不会清空核心框架目录而composer会清空.2.使用官网打包好的TP压缩包(解压即可用)-&g ...
- iOS之RunLoop
RunLoop是iOS线程相关的比较重要的一个概念,无论是主线程还是子线程,都对应一个RunLoop,如果没有RunLoop,线程会马上被系统回收. 本文主要CFRunLoop的源码解析,并简单阐述一 ...
- LNMP源码编译安装
思路:根据Linux系统以及公司网站系统的信息,选择合适的安装包进行安装 一.查看系统信息 # uname -a # 查看内核/操作系统/CPU信息 # ...
- 安卓模拟器tools修改
defaults write com.apple.finder AppleShowAllFiles -bool true 这步是显示隐藏文件夹, 然后打开finder,在应用程序上右键,选择在上层文件 ...