spl 遇到 上海 控制 .cn orange https nbsp silver
9.定制层的display属性:
层的表现是通过框这种结构来实现的。框可以是块级对象也可以是行内对象。 Display属性就是用来控制其中内容是块级还是行级。
定义为block则为kuai块级,inline则b表现wei为行级,默认情况是none。
- <html>
- <head>
- <title>display属性</title>
- <style type="text/CSS">
- body{
- text-align:"center";
- font:80% 黑体;
- }
- h1{
- font-size:2em;
- }
- h2{
- font-size:1.5em;
- }
- #kuai,#hang{
- background:silver;
- border:2px solid black;
- }
- span{
- background:white;
- display:block;
- border:0.5em dashed green;
- padding:1em;
- margin:0.5em;
- }
- span.yanse{
- background:yellow;
- }
- #hang span{
- display:inline;
- }
- </style>
- </head>
- <body>
- <h1>块和行</h1>
- <h2>块</h2>
- <p id="kuai"><span>北京</span><span class="yanse">上海</span><span>香港</span><span class="yanse">海南</span></p>
- <h2>行</h2>
- <p id="hang"><span>北京</span><span class="yanse">上海</span><span>香港</span><span class="yanse">海南</span></p>
- </body>
- </html>
0.css Hack:
不同的浏览器基于不同的内核,对css的解析也不一样。这直接导致生成的页面效果不同。例如最直接的影响就体现在框模型中对距离的理解。怎样才能解决浏览器兼容的问题呢?只能针对于不同的浏览器写不同的样式表,这种写法被称为CSS Hack
尽管有很多Hack针对不同的浏览器提供了解决方案。在解决Ie浏览器和FireFox浏览器中布局不同的问题时,常用的一个是!important。由于!important不被Ie支持,而其他浏览器可以支持。
- <html>
- <head>
- <title>
- CSS Hack
- </title>
- <style>
- .select{ border:20px solid navy !important; width:230px !important; padding:20px
- !important; border:20px solid orange; width:300px; padding:20px; font:1.5em
- 新宋体; text-align:"center"; }
- </style>
- </head>
- <body>
- <div class="select">
- 在FireFox中的效果是蓝色边框,它的width设置为14em,在IE10浏览器中的效果是橙色边框。
- </div>
- </body>
- </html>
当css样式表遇到层2
spl 遇到 上海 控制 .cn orange https nbsp silver
原文:http://www.cnblogs.com/wangshen31/p/7912122.html
来源: http://www.bubuko.com/infodetail-2410634.html