初始化CSS】的更多相关文章

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-06) 写在所有css代码之前,对网页中所有同类元素的一个样式规则代码或者一些基础性公用元素的样式规则代码. 1.空白:对于某两个组件之间的留白,使用<div class="blank10"></div>,并添加一条.blank10{height: 10px;}. [或者不在初始css代码中添加,直接在需要的地方添加<div style="height:10px&q…
第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复,位置:以及文字相关的padding,无序列图标,行高等*/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd…
为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标…
为什么要初始化 CSS 样式 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异. 当然,初始化样式会对 SEO 有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法是:*{padding:0;margin:0} (不建议)     body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form,…
首先我们需要了解一下为什么需要公共样式(公共样式是为了初始化某些标签的默认值): 1. 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异. 2.初始化CSS样式主要是提高编码质量,如果不初始化整个页面做完很糟糕,重复的CSS样式很多. 一.PC端公共样式 这里参考的是I'm QQ(https://im.qq.com/index.shtml)的公共样式,其实对比一下其他大型网站的公共样式也类似: ;;font-family:Helv…
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异. 初始化CSS样式主要是提高编码质量,如果不初始化整个页面做完很糟糕,重复的CSS样式很多.去掉标签的默认样式如:margin,padding,其他浏览器默认解析字体大小,字体设置.…
为什么不建议使用统配符初始化 css 样式 * { padding:0; margin:0; } 采用这样的写法好处是写起来很简单,但是通配符,需要把所有的标签都遍历一遍,当网站较大时,样式比较多,这样写就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间,因此一般大型的网站都有分层次的一套初始化样式 出于性能的考虑,并不是所有标签都会有padding和margin,因此对常见的具有默认padding和margin的元素初始化即可,并不需使用通配符*来初始化…
/*css reset code */ /**** 文字大小初始化,使1em=10px *****/ body { font-size:62.5%; } /* for IE/Win */ html>body { font-size:15px; } /* for everything else */ /*字体边框等初始化*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockqu…
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异. 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0;…
题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼容的问题,不同浏览器有些标签的默认值是不同的,如果没有CSS初始化往往会出现浏览器之间的页面显示差异. <h1>标题1标签在不同浏览器的盒子模型</h1>   火狐浏览器 谷歌浏览器 IE7浏览器 IE9浏览器 从上面可以看出,同一个标签,不同的浏览器解析的数据是不一样的,这样就会导致…
CSS 初始化样式(Reset CSS 官网提供): /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,…
不同的浏览器对有些标签属性的默认值是不同的,如果没有做初始化处理,往往会出现不同浏览器页面表现的差异…
全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } 2.全局文本大小.颜色设置 body { color:#333; padding:5px 0; font:12px/20px "SimSun","宋体","Arial Narrow…
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0.5,minimum-scale=0.5,maximum-scale=1">(灰色部分可以不写) viewport 视口(可视区窗口) 默认不设置viewport一般可视区宽度在移动端是980 width 可视区的宽度(number||device-width) user-scalable 是…
/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font…
;; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } s…
body { font-size:12px; line-height:1.3; font-family:'微软雅黑', Tahoma,Helvetica,Arial,'宋体', sans-serif;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, textarea, p, blockquote, th, td {;;} table {;} f…
html,body,div,ul,li,ol,a,input,textarea,p,dl,dt,dd{margin:0;padding:0;} ul li{list-style: none;} a{text-decoration: none;cursor: pointer;} html{height: 100%;} body{height: 100%;background: #f5f5f5;position: relative;font-family: '微软雅黑';max-width: 640…
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间. CSS初始化示例代码 /* css reset www.admin10000.com */ body,div,dl,dt,dd,u…
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间. CSS初始化示例代码 /* css reset www.admin10000.com */ body,div,dl,dt,dd,u…
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-24) 为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决.下面列举常用的一些方案: 1.最耗资源的,最简单的 * { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例(综合) body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5…
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.CSS初始化 1.什么是CSS初始化呢? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每…
CSS样式初始化代码 为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化.      最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件…
编写css样式之前需要初始化css样式,总结如下: /* CSS Document */ html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,field…
为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化.最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签…
二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.c.这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型.…
HTML+CSS部分1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他行内元素:其中img是行元素块级元素:总是在新行上开始,高度.行高及外边距和内边距都可控制,可以容纳内敛元素和其他元素:行元素转换为块级元素方式:display:block:2.将多个元素设置为同一行?清除浮动有几种方式?将多个元素设置为同一行:float,inline-block清除浮动的方式:方…
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的,所以并不会阻挡其后的元素 * { margin: 0; padding: 0; } 这是在CSS中最常见的初始化CSS的代码,用于覆盖浏览器的默认样式 浏览器兼容性 大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 w…
要点:对Web标准的理解.浏览器差异.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? (1).<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. (2).严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行. (3).在混杂模式中,页面以宽松的向后兼容的方式显…
利用::after和before来清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用::after和before来清除浮动</title> <style> #box::after,#box::before{ content:""; height:; visibi…