当css样式表遇到层2
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的更多相关文章
- 当css样式表遇到层
(附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内 ...
- 2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页
一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联 ...
- HTML基础（三）——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- HTML静态网页 css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- 3月22日 html(三)css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...
- HTML静态网页（css样式表）
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- css样式表及属性
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- CSS样式表的写作规范
推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...
- CSS样式----CSS样式表的继承性和层叠性（图文详解）
本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...
随机推荐
- 正则_action
http://wiki.ubuntu.org.cn/index.php?title=Python%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%93% ...
- 用Qt编写的计算文件MD5值的Demo
Dialog.ui <?xml version="1.0" encoding="UTF-8"?> <ui version="4.0& ...
- 最短路Dijkstra算法的一些扩展问题
最短路Dijkstra算法的一些扩展问题 很早以前写过关于A*求k短路的文章,那时候还不明白为什么还可以把所有点重复的放入堆中,只知道那样求出来的就是对的.知其然不知其所以然是件容易引发伤痛的 ...
- opencv IplImage各参数详细介绍以及如何从一个JPEG图像数据指针转换得到IplImage
这篇文章里介绍得最清楚了.http://blog.chinaunix.net/uid-22682903-id-1771421.html 关于颜色空间 RGB颜色空间已经非常熟悉了.HSV颜色空间需要 ...
- HDU 6119 小小粉丝度度熊 【预处理+尺取法】（2017"百度之星"程序设计大赛 - 初赛（B））
小小粉丝度度熊 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- java上传文件，提交表单必须要设置enctype="multipart/form-data"
表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码.默认情况,这个编码格式是application/x-www-form-urlenc ...
- HDU1495 非常可乐 —— BFS + 模拟
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1495 非常可乐 Time Limit: 2000/1000 MS (Java/Others) M ...
- Shell 脚本实现 Linux 系统监控
一.实验介绍 1.1 实验内容 本课程实现 shell 脚本监控系统的各项参数,并可以将脚本加入系统环境中,可以直接在终端里执行.还添加了几个参数,一个脚本可以执行不同的操作. 1.2 知识点 本实验 ...
- code::Blocks 汉化经验
首先,在网上下载一个code::Block的汉化包 code::Block汉化包下载地址,复制到地址栏即可. http://files.cnblogs.com/files/QW-lzm/codebl ...
- EOJ Monthly 2018.4 （E.小迷妹在哪儿（贪心&排序&背包）
ultmaster 男神和小迷妹们玩起了捉迷藏的游戏. 小迷妹们都希望自己被 ultmaster 男神发现,因此她们都把自己位置告诉了 ultmaster 男神,因此 ultmaster 男神知道了自 ...