CSS reset

最新推荐文章于 2024-09-10 16:05:13 发布

honeyws

最新推荐文章于 2024-09-10 16:05:13 发布

阅读量283

点赞数

分类专栏： Web前端基础文章标签： CSS reset

本文链接：https://blog.csdn.net/weixin_44802155/article/details/102980739

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

就是重置默认样式表的技术，把默认样式全部还原回初始值，
CSS resetCSS reset的方案也会有些区别。并且根据项目的不同，
国相据前面小节中的总结，来实现一个简单的 CSS reset方案。

<style>
body,p,ul.o1,h1,h2,h3,h4,h5,h6{ margin : 0; padding :0; )li{ list-style : none;}
a{ text-decoration : none; }
</style>

有时为了演示代码，可以设置个通配选择符，但是在正式的项目中尽量不要用通配选择符

<style>
	*{ margin : 0; padding :0; }
	li{ list-style : none;}
	a{ text-decoration : none; }
</style>

接下来通过一个案例来演示图片有空隙展示效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<tit1e>默认样式</title><style>
<style>
	*{ margin:0; padding:0;}
	li{ list-style:none;}
	a{ text-decoration:none;}
	div{ border:1px #000 solid;}
</style>
</head>
<body>
<div>
	<img src="123.jpg">
</div>
</body>
</html>

界面的右边也会有空隙产生，是因为在垂直方向上也存在着对齐方式，图片默认是对齐文字的基线，再把文字添加进去，最后把文字的字体放大。接下来通计一个案例来演示图片默认与文字基线对齐.

图片默认与文字基线对齐。

<!doctype  html>
<html>
<head>
<meta  charset="utf-8">
<title>默认样式</title>
<style>
	*{ margin:0; padding:0;}
	li{ list-style:none; }
	a{text-decoration:none; }
	div{ border:1px #000 solid; font-size:50px; }
</style>
</head>
<body>
<div>
<img src="123.jpg">xyz
</div>
</body>
</html>

布局会受到影响，因此可以根据vertical-align属性来调节对齐方式。接下夹通过案例来演示vrica-align属性的展示效果，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>默认样式</title>
<style>
	*{ margin:0; padding:0;}
	li{ list-style:none; }
 	a{text-decoration:none;}
	div{border: 1px #000 solid;  font-size:50px; }
	img{ vertical-align:bottom;}
</style>
</head>
<body>
<div>
	<img src="123.jpg">xyz
</div> 
</body> 
</html>

显示框类型
CSS样式中通过display 属性来设置显示框类型，的显示方式，属性常用的设置值有none、block、 intine讲解这四种取值的使用。
显示框类型指的是对HTML标签和nine-block四种。
当对个元索进行不显示操作时，就可以设置none这个值。

<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>其他常用样式</title>
<style>
	#box1{ width:200px; height:50px;background:red;}
	#box2{width:200px; height:50px;background:red;
	display:none; }
	#box3{ width:200px; height:50px; background;blue}
</style>
</head>
<body>
<div id= "box1"></dlv>
<div id-="box2"></div>
<div id= "box3"></div>
</body>
</htm1>

设置non值后，元素会隐藏起来且不占用页面的空间，在CSS 祥式中还有对隐藏操作的样式，即vsiblity属性.核下来通过家例来网不vibiry属性.

<!doctype htm1>
<html>
<head>
<meta charset="utf-8">
<title>其他常用样式</title>
<style>
	#box1{ width:200px; height:50px; background:red; }
	#box2{ width:200px; height:50px; background:green;
	visibility:hidden; }
	#box3{ width:200px; height:50px; background:blue;
</style>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
	<div id= "box3"></div>
</body>
</htm1>

可以看出，visibility与hidden值时，只是针对元素进行了隐藏，但还会占据空间位置。
block
block值可以把元素显示成块标签类型，把block值作用到span标签上，span标签就具备了快标签的特点。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>其他常用样式</title>
<style>
	span{(width:100px; height:50px; backaround:red; 				display:block;}
</style>
</head>
<body>
<span>百度一下</span>
<span>你就知道</span>
</body>
</html >