摘要:
现在的问题是:body{text-align:center}与margin:0 auto的异同。text-align:center设置为文本或img标签等一些内联对象(或与之类似的元素)的居中。margin:0 auto是设置块元素(或与之类似的元素)的居中。但这两个属性IE与FF的理解也有所不同。 s洁的css解决方法:在曾经的 淘宝UED 招聘 中有这样一道题目:“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。题目的难点在于两点:1.垂... 阅读全文
随笔分类 - web---css
margin:0,auto;
2011-11-02 12:15 by youxin, 644 阅读, 收藏, 编辑
摘要:
margin:0,auto;上下边为0PX左右自动适中margin: 0 atuo;意思是:上下边界为0,左右根据宽度自适应(浏览器自动适应屏幕居中)AUTO 是自动的意思 MARGIN: 0 1 5 6;依次是上右下左如果四个值一样可以简写MARGIN: 0 如果全为自动为MARGIN:AUTO如果上下为自动 左右为0 则:MARGIN:AUTO 0;注意:auto只能用于左右,不能用于上下。两个典型的错误引起的不能居中的问题:1 . 没有设置宽度;<div ></div>看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题!2. 没 阅读全文
浏览器兼容方式
2011-11-02 12:00 by youxin, 330 阅读, 收藏, 编辑
摘要:
浏览器兼容可以说是前端开发所要面对的第一个跳转。css hacks利用浏览器的漏洞来隐藏特地浏览器的css贵站。实现浏览器兼容的主要有两种方式:1:条件样式表2: css hacks(selectors haks,attribute hacks);对此根据一些资料汇总了一些css hacks方法1:条件样式表像这样的代码你应该见过:<link rel=”stylesheet” type=”text/css” href=”css/style.css”/><!—[if IE]><link rel=”stylesheet” type=”text/css” href=”c 阅读全文
CSS Hack浏览器兼容IE6+IE7+IE8+IE9+FF |
2011-10-30 13:48 by youxin, 343 阅读, 收藏, 编辑
摘要:
http://www.yixiaoer.com/?p=1905本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象HACK原理:不同浏览器对各中字符的识别不同 (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同)在 CSS中常用特殊字符识别表:(1)*:IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;(2)!important: 除IE6不能识别!important外,FF+IE8+IE7都能识别!important ;(3)_: 除IE6支持_外,FF+IE8+IE7都不支持_;(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)示例:( 阅读全文
需要掌握的30个最常用css选择器解析
2011-10-30 13:47 by youxin, 392 阅读, 收藏, 编辑
摘要:
你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。css代码1234* {margin:0;padding:0;}星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。*选择符也可以在子选择器中使用。css代码123#container * {border:1pxsolidblack;}上面的代码中会应用于id为container元素的所有子元素中。除非必要,我 阅读全文
CSS使用技巧大全 - 阮一峰的网络日志
2011-10-30 13:46 by youxin, 756 阅读, 收藏, 编辑
摘要:
CSS使用技巧大全作者:阮一峰日期:2010年3月31日最近,我开始升级网志了。在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用。未来,本文将持续更新。1. 文字的水平居中将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center;2. 容器的水平居中先为该容器设置一个明确宽度,然后将margin的水平值设为auto即可。 div#container { width:760px; margin:0 auto; }3. 文... 阅读全文
css 技巧 集锦
2011-10-30 13:45 by youxin, 171 阅读, 收藏, 编辑
摘要:
浮动元素容器的clearing问题CSS选择器(JQuery)CSS 清除浮动的几种方法用户评论 阅读全文
W3Help - 兼容性 - 根本原因
2011-10-30 13:43 by youxin, 316 阅读, 收藏, 编辑
摘要:
http://www.w3help.org/zh-cn/causes/渲染-HTML相关渲染-CSS相关渲染-混合类型脚本服务端通信浏览器特性 阅读全文
On having layout
2011-10-30 13:39 by youxin, 310 阅读, 收藏, 编辑
摘要:
http://www.satzansatz.de译者注:一篇很好的文章,很久以前在blog上就推荐过,这两天断断续续花了点时间翻译了一下,推荐读读。英语原文在此 :http://www.satzansatz.de/cssd/onhavinglayout.html#translation文中所有的 layout 这个单词都未作翻译,一来本身这个单词意思就比较多,翻成啥都觉得别扭,二来它也是专有的属性,所以就意会一下吧。水平有限,很多地方都是模模糊糊地意译,发现错误欢迎留言指出。引用一段来自Dean Edwards的评价:I recommend that every CSS designer an 阅读全文
10个非常有用的CSS hack和技术
2011-10-30 13:26 by youxin, 256 阅读, 收藏, 编辑
摘要:
以下这个网止是全文http://hi.baidu.com/newyorkmen/blog/item/77bd19890f41c8759f2fb406.html1 – 跨浏览器的inline-block<style> li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; margin: 5px; zoom: 1; ... 阅读全文
国外转过来十个最好的CSS hacks
2011-10-30 13:22 by youxin, 227 阅读, 收藏, 编辑
摘要:
If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I’ve written about some of them earlier on PNG transparency issues, Yellow fields in web 阅读全文
css hacks 汇总
2011-10-30 13:19 by youxin, 283 阅读, 收藏, 编辑
摘要:
浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等)。 CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则。实现浏览器兼容主要有两种方式条件样式表和CSS Hacks(Selector Hacks、Attribute Hacks)。对此根据一些资料汇总了一些CSS Hacks方法。1.条件样式表像这样的代码你应该见过:<link rel="stylesheet" type="text/css" href="css/style.css"/>& 阅读全文
css中font与text的继承
2011-10-30 11:08 by youxin, 513 阅读, 收藏, 编辑
摘要:
CSS font属性font-familyfont-style1.normal2,italic3.obliquefont-sizeabsolute sizerelative sizeet the size realtive to surrounding elements.没有指定字体尺寸的话。默认的正常文本尺寸,比如paragraph.is 16px( 16px=1em)to avoid the resizing problem with ie,many developers use em instead of pixelsfont-weight:1.bold2normal3bolder4li 阅读全文
在网页中插入css的方式
2011-10-30 01:02 by youxin, 415 阅读, 收藏, 编辑
摘要:
在网页中插入css,有如下3种方式CSS saves a lot of works1:内联样式表 inline<body style=”color:red “> suming </body>2:内部样式表 internal在<head> css </head>内增加css<head><style type=”text/css “></style></head>3:外部样式表 external style sheet链接到外部的css文件<head><link rel=”styles 阅读全文
Css inheritance继承详解
2011-10-29 23:30 by youxin, 590 阅读, 收藏, 编辑
摘要:
Css inheritance以下的css属性是继承的。Yikes(哎呀,可恶),that is a lot of propertiesto simply things >让我们来看一看重要属性组。Text-related properties 与文本有关的属性font-family, font-size,font-style ,font-variant, font-weight;font , letter-spacing,line-height;text-align,text-indent,text-transform.word-spacing;List-related propert 阅读全文