css reset 小记

reset css 作为一个菜鸟 我第一次发现浏览器会默认的对p这样的元素设置margin 感觉心情就想发现了新大陆 我才理解下面的这段代码的必要性

*{
            margin:0;
            padding: 0;
  }

其实这样设置并不是一种好的方式 当然你也见过这样的设置

h1,h2,h3,p,div {
            margin: 0;
            padding: 0;
        }
        

你在浏览器中审查元素发现div默认的margin padding 就是0  这样的设置也不合理

况且你在上面的设置后 在下面在对h1添加样式的时候 有涉及到重新渲染的问题  也加大了CSS的体积  所以你不如在用的时候在进行设置 减少渲染

比如你要使用一个div下的p

div p {
            margin: 0;
            padding: 0;

       font-size:14px;

        }

这样减少了渲染 同时也缩小了css的体积

在学习这个问题的过程中 ,我仍然参考了一个大牛的blog  http://www.zhangxinxu.com/wordpress/?p=758  他的其他文章中写CSS是有感情的,慢慢的会在你写的过程中加上你个人的感受大致是这个意思 我突然觉得CSS的世界真的很美妙 新奇

时间: 2024-11-01 16:57:23

css reset 小记的相关文章

关于css reset

什么叫做css reset呢?即重置css,也就是重置默认样式.一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset). 以前使用最多*{margin:0;padding:0},但其格式化太严重,慢慢被废弃. 个人认为:应根据需求,量体裁衣. /* reset */html{color:#000;background:#fff;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h

css reset的重置作用(可取还是不可取,取决于你)

一.重置的理由 当今流行的浏览器中,有些都是以自己的方式去理解css规范,这就会到只有的浏览器对css的解释与设计师的css定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示.,但是有些浏览器却没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题 所以,通过重置button标签的css属性,然后再将它统一定义,就可以产生相同的显示效果 css reset的作用就是让各个浏览器的css样式有一个统一的基准,而这个基准更多的就是"清零"! 以下是一整段的css

CSS Reset(CSS重置)

CSS Reset是指重设浏览器的样式.在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小. 但并不是所有的浏览器都使用一样的数值,所以有了CSS Reset,以让网页的样式在各浏览器中表现一致. 下面介绍几个主流的CSS Reset代码: 1.Eric Meyer html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ab

移动端页面 css reset

这个是通用的  css reset.这个版本适用于 移动端页面 如果需要在 PC端使用,可以 修改 html{font-size: 10px;}为html{font-size: 12px;} 其他地方不需要修改 ========================================= @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, block

css reset重置样式有那么重要吗?

在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp

前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 多列布局 全屏布局 第3章--响应式 浏览网页使用的设备屏幕大小迥异,如何保证页面在不同设备上都正常显示呢? --  解决方法:响应式 优点:无需为不同设备编写对应的页面 --> 降低开发成本.维护成本 缺点:页面中某些部分在某些设备上会被隐藏(资源加载了,但是只是用CSS隐藏了) 为什么在手机端的页面会很小呢? 所有的移动端的页面都引入了viewport视窗 刚开始所有的元素都是加载到一个比较大的viewport视

CSS RESET —— 浏览器样式重置

CSS Reset 1. CSS Reset为什么存在? 只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的"理解"效果有偏差,今天提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一"起跑线". --引用自关于CSS Reset 2. CSS Reset该怎么写? CS

重置浏览器的默认样式(css reset)

(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理使每个浏览器下展示一致,故需要css reset (3)内容:第一个:*{padding:0;margin:0;border:0;}第二个:你所用到的元素{padding:0;margin:0;border:0;},然而第一个虽然写起来简单,但是它却会将所有的标签重置,而我们可能没有必要将那么多的元

ife任务刷题总结(一)-css reset与清除浮动

本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初学者也可以按照他们的任务列表,进行刷题.虽然ife名义上是针对初学者,但是我看了一下任务列表,那些任务还并不是那么简单.所以很适合初学者把任务刷一遍,我觉的,把这些任务都刷完,那么前端算是入门了. 对于代码学习来讲,除了实际的去敲,还有其他更好的学习方法吗?因此我计划按照ife的任务都刷一遍,代码提