摘要：在 Firefox 1.0+，Chrome 1.0+ 和 Safari 3.0+ 中，我们可以使用 -moz-appearance 或者 -webkit-appearance 属性让元素模仿系统原生控件的外观。在上述几个浏览器中，默认情形 button 元素的 -moz-appearance 或 -webkit-appearancee 属性为 "button"。这样浏览器将模仿系统按钮的外观来渲染该按钮。这样网页应用看起来就很像系统程序，在某些时候也许很有好处。大多数时候我们更喜欢自己定义按钮的样式。如果我们用 CSS 修改了该按钮的样式（大小或字体等除外），浏览器将放弃模
阅读全文
随笔分类 - style
摘要：在 CSS 中，利用 background-image 属性我们可以指定元素的背景图片，例如：.example { background-image: url(image/some.png); background-repeat: repeat;}其中，PNG 是常见的背景图片格式；较新的浏览器，比如 Chrome 8+，Firefox 4+，IE 9+，Opera 9.5+ 和 Safari 5+，也支持使用 SVG 格式的背景图片。当背景图片大小超过元素的大小时，我们可以用 background-repeat 属性指明重复覆盖的方式。通常，一个网站中会使用许多个小图片。为减少网络请求的..
阅读全文
摘要：CSS 的选择器有很多类型，我们将常用的这些列表如下：一、CSS 选择器的类别1. 基本选择器基本选择器解释备注*通用选择器，匹配所有元素CSS2E元素选择器，匹配类型为 E 的所有元素CSS1.foo类选择器，匹配 class 属性包含 "foo" 的所有元素CSS1#barID 选择器，匹配 id 属性等于 "bar" 的惟一元素CSS12. 组合选择器组合选择器解释备注E, F多元素选择器，匹配 E 和 FCSS1E F后代选择器，匹配 E 的后代 FCSS1E > F子元素选择器，匹配 E 的子元素 FCSS2E + F相邻选择器，匹配紧随
阅读全文
摘要：在 Android 和 iOS 等触屏设备中，如果网页中某元素设置 overflow: auto 或者 overflow:scroll，那么问题就来了。在 Android 3.0 之前以及 iPhone OS 3.0 之前的自带浏览器中，你无法用手指拖动该元素所在区域，这样就相当于 overflow: hidden 了。在 Android 3.0 中，这个问题解决了，但是该溢出区域不会显示滚动条。而在 iPhone OS 3.0 中这个问题却是以另一种方式解决：我们只能用两个手指拖动溢出区域，而且该区域同样不会显示滚动条。一直到了 iOS 5.0，苹果公司才完整解决了这个问题，这时候可以单指拖
阅读全文
摘要：CSS3 中的弹性盒布局（Flexible Box Layout）标准已经进入候选推荐阶段，大部分浏览器也开始支持这个标准了，这里我们来介绍下这个标准。在最新的 Chrome 中浏览下面的例子，可以看到父元素被横向分为三部分，而当鼠标移动到某一部分上面时，各部分的宽度会自动调整： one two three在上面的例子中首先我们设置了父元素的 display: flex; flex-direction: row; ，表示我们使用横向的弹性布局。display 也可以设为 inline-flex，这时候父元素就类似于 inline-block 的元素。接下来我们对三个子元素分析设置了 f...
阅读全文
摘要：在 CSS2 的盒模型中，一个元素的渲染宽度（rendered width）等于 width + padding + border，渲染高度等于 height + padding + border。元素的渲染大小就是它在网页中实际占用的盒子大小。这种规定在很多时候让人很头疼。比如你想让子元素的 padding-width: 10px 和 border-width: 2px，然后填满父元素的所有空间，这时候简单地来一个 width: 100% 和 height: 100% 是会溢出的。当父元素的大小是固定的时候，我们很容易计算出正确的 width 和 height。但是，如果父元素的大小也不是固
阅读全文
摘要：CSS 的轮廓(outline)属性有点像边框(border)属性，但两者还是有明显不同之处的。我们先看一个例子：div#test { width: 100px; border: 1px solid #000000; outline: 3px solid #6688AA;}可以看到在宽度为 1px 的 border 外面由多了一层宽度为 3px 的 outline。考虑到两者的写法也一致，为何有了 border 还需要 outline 这个属性呢？实际上，outline 和 border 的最大区别在于，它不占用空间，无论 outline 多宽也不会影响正常的页面流。所以，可...
阅读全文
摘要：在 CSS 中，由于浮动元素不包含在正常的页面流中，所以如果父元素只有浮动子元素，浮动子元素将会脱离父元素，产生我们不想要的结果。例如（结果见这里）： Hello World可以看到两个浮动的子元素并不会撑开父元素，而是跑到下边去了。这个问题的解决方法有下面几种：父元素设置 overflow 为 hidden 或者 auto父元素设置 float 为 left 或者 right父元素设置display 为 table添加空白 div 或者 br 并设置为 clear: both添加 :after 伪元素并设置 content: '' '';display: ta
阅读全文
摘要：在 CSS 中我们可以设定用 color 和 background-color 设定元素的前景色和背景色。例如：a { color: #123456; background-color: #ABCDEF;}CSS2 中使用的是 24位 RGB 颜色：即一个颜色由红绿蓝三部分组成，每部分用两位 16 进制数表示，总共可以表示 2^24 =16777216 种不同的颜色。在 RGB 颜色中，最小值 #000000 表示黑色，而最大值 #FFFFFF 表示白色，而 #FF0000，#00FF00 和 #0000FF 分别表示纯红色，纯绿色和纯蓝色。RGB 颜色值还有其它的表示方式：#33...
阅读全文
摘要：要利用 CSS 实现下拉菜单，首先需要将菜单内容写在嵌套的无序列表中，例如： Home Archive▾ Alpha Example Hover For More ▸ Sub Menu Item Sub Menu Item Sub...
阅读全文
摘要：几个 inline-block 元素，比如 button，如果在 HTML 中连续写在一起，则它们之间可以没有空隙。但是如果在 HTML 中将它们分行格式化，则它们之间有空隙。例如：<!DOCTYPE html><html><head><style type="text/css">button { margin: 0; border: 1px solid gray;}</style></head><body><div><button>One</button>
阅读全文
摘要：如果在一行中即有小图片，又有文字，这时候图片和文字的对齐一般就需要仔细设置。其中用到的最重要的 CSS 属性是 vertical-align。假设我们的 HTML 代码如下：<div id="test">Hello <img src="http://static.cnblogs.com/favicon.ico" width="16" height="16" class="favimage"> Image!</div>vertical-align 的取值主要有
阅读全文
摘要：在介绍 CSS 的 line-height 属性之前，我们先来看看 height 属性。height 属性适用于大部分元素，除了行内非替换元素（replaced inline element）。所谓的替换元素，就是指 ，，，，，， 等默认就有一定大小的元素。因此，行内非替换元素，比如 ，， 等，将无法设置 height 属性，它们的高度由字体大小决定。元素的 height 属性的取值可以是长度值或者比例值。如果是比例值，则根据它所在的包含块（containing block）的高度来计算。height 属性的默认值为 auto，此时将根据它的子元素的大小来确定。元素的行高（line-heigh
阅读全文
摘要：在之前的屏幕大小与视区大小 这篇文章中，已经介绍了移动设备的 viewport meta tag。这里介绍与它相关的 media type 和 media query 概念。CSS2 中可以通过 media type 对不同的浏览情形定义不同的样式。例如：@media screen { body { font-size: 16px }}@media print { body { font-size: 12pt }}@media screen, print { body { line-height: 1.5 }}上面 CSS 代码将对在正常浏览时设置字体大小为 16pt，而打印时设置字体大...
阅读全文
摘要：IE，特别是旧版本的 IE6 和 IE7，问题多如牛毛。为了减少问题，首先要做的就是选择一个标准的 doctype，比如 html5 的 doctype 如下：<!DOCTYPE html>这些标准的 doctype 将使得 IE 用（几乎）标准的模式来渲染页面，比如将使用 W3C 的盒模型而不是 IE 自己的盒模型，这样兼容性的问题就少很多了。但是还没完，IE 还有其它的 Bugs。例如之前就遇到过 IE6 的 overflow bug。即，对于 position: relative 的子元素，父元素即使设置 overflow 为 auto 或者 hidden，子元素还是溢出了。
阅读全文
摘要：在 W3C CSS 2.1 标准中，BFC（block formatting context，块级格式化范围）规定了浏览器如何渲染块级元素及其浮动。具体来说，对下面这些元素将创建一个 BFC：float 值不为 none 的元素overflow 值不为 visible 的元素position 值为 absolute 或 fixed 的元素display 值为 inline-block，table-cell 或table-caption 的元素创建了 BFC 的元素，将作为一个整体来渲染，即它会框住它的子元素，使得子元素不会影响外面其它元素的布局。具体来说是 BFC 元素有如下这些特点：BFC
阅读全文
摘要：元素的 z-index 属性规定了它的的层叠级别（stack level），这些级别确定了元素之间互相覆盖时的层叠顺序。但是 z-index 似乎没那么简单，这里总结一下。首先是层叠内容（stack context）的概念。层叠内容由下列这些元素形成（其中定位元素指 position 不为默认值 static 的元素）：根元素 HTMLz-index 不为默认值 auto 的定位元素opacity 小于默认值 1 的元素但其中要注意几个问题：（1）对于非定位（即 position 为 static）的元素，设置 z-index 无效；（2）在 IE8 之前，定位元素的默认 z-index 为
阅读全文
摘要：在 IE 和 Fireofx 浏览器中都可以用window.showModalDialog 方法弹出一个模态窗口，在关闭该窗口之前，主窗口将不能操作。Chrome 虽然支持此方法，却只是将它当成普通的弹出窗口，没有禁止主窗口的操作。为了跨浏览器考虑，有必要用 DIV 和 CSS 生成模态窗口。基本的方法是，通过设置 z-index，用一个占满全部显示区域的覆盖层 DIV 放在主要内容前面，再将模态窗口 DIV 放在覆盖层前面。为了让用户知道主窗口的内容暂时不可使用，可以对覆盖层 DIV 设置半透明的灰色背景。例如（查看效果）：<!DOCTYPE html><html>&
阅读全文
摘要：在 CSS3 中引入了一个 calc() 方法，可以对各种长度作四则运算。如果将计算的结果设定为元素的大小，将比每次窗口大小改变时用 JavaScript 来计算方便很多。例如我们需要这样的三栏布局：中间宽度固定为 40px，两边宽度各占其它宽度的一半。用 calc() 方法来处理非常容易和直观（查看效果）：html, body { height: 100%;}#left, #right { width: -moz-calc(50% - 20px); width: -webkit-calc(50% - 20px); width: calc(50% - 20px); float: le...
阅读全文
摘要：在 CSS 中，文本的水平居中可以简单地用 text-align: center 来实现。因此，再加上 margin: auto 就可以实现 DIV 元素的水平居中。例如：horizontal center in css Hello World! Hello World! Hello World! Hello World! Hello World!垂直居中稍微麻烦一些，因为 margin-top 和 margin-bottom 为 auto 在大多数情形等同于 0。但我们还是有不少办法的。例如：vertical center in css Hello World! He...
阅读全文
浙公网安备 33010602011771号