记录生活，存储回忆
**A~B (波浪号)** 选择前面有A元素的所有B标签 为相同父元素中位于A标签后的所有B元素设置样式 两种元素必须拥有相回的父元素，但是B不必真接紧随A出现 **A>B (大于号)** 是CSS3特有选择器，表示选则A元素的子元素中所有B元素 与AB的区别 A B 选择所有后代元素，但是A>B 只选择一代 **A，B (逗号)** 同时选择A B 两个类，对其应用相同的CSS样式 **A+B(加号)相邻兄弟选择器** 选择紧接在另一个元素后的元素，二者有相同的父元素 例:增加紧接在h1元秦后出现的段落的边距
ul li导航菜单居中/水平居中css样式。这个方法较简单，是将容器转成`display:inline-block`行内块级元素，然后就可以直接用`text-align:center`使其达到水平居中效果，也是推荐的方法。 示例ul导航菜单HTML代码： ```html 首页 … ``` CSS样式代码： 给外面的div添加`text-align:center`，然后将菜单容器设成`display:inline-block`行内块级元素，菜单浮左`float:left` ```css .nav {text-align:center;} .nav ul {display:inline-block;} .nav li {...
##### 一、CSS样式选择器优先级 ID选择器(形如#divMain{}) > 类(形如.divSpecial{}) > 标签(形如body{}) ##### 二、CSS文件的优先级 **1、**标有”!important”的规则有最高优先级 一个样式规则可以有一个”important”附带标签，表示该样式规则具有最高优先级。例如下面例子中，前景色被标为important。 h1{color:#FF7000 !importan; font-family:sans-serif} 注意：这种声明容易引起混乱，因此通常使用得较少。 **2、**创作者规则优先级高于浏览者规则 浏览器允许浏览者创建样式规则以覆盖系统缺省值。在此情况下，由网页创作者明确设定得样...
CSS选择器,CSS样式选择器,CSS选择器详解,高级CSS选择器,高级CSS选择器参考手册,CSS选择器参考指南 我们知道CSS 2 开始引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。简单的说即在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。本文主要描述CSS样式表中选择器的一些用法，当然你可能已经对CSS样式选择器不在生疏，但是通过本文你将能更好的掌握CSS样式的一些高级选择器使用。CSS是对网页设计师可用的最强大的工具之一，你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。本文向大家介绍一些常见的高级CSS样式选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。在深入研究高级CSS选择器之...
div+css不换行出现半字问题，推荐超出部分省略号显示：在显示文章标题时，为了提高可视性，常常要将超长部分省略，并用title提示完整标题。以下代码可用来达到超长部分用省略号显示的效果。style=”white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all;”不过，这段代码在部分早期FireFox版本下面不会出现省略号，而是直接将超长文字隐藏，而且会出现半个字现象。在部分版本Firefox下解决方法让文字换行，限定行高，然后隐藏换行的部分，这样也就不会出现半个字现象了。If you find any better way to solve the issue -just comment it here s...
图片自动等比例缩放css: max-width:100%兼容IE6、IE7、IE8、FirefoxCSS的防止图片撑破页面的代码，图片会自动按比例缩小适应当前容器的宽度。max-width, min-width, max-height 和 min-heigh是CSS2的属性，它工作于IE7以及更高版本和或者Mozilla Firefox、Chrome等支持CSS2的浏览器，但不能与IE 6和更低版本IE浏览器兼容，比较常用的解决方案是通过CSS表达式让IE6实现相同的效果。例如：如果有一个或多个图像，显示图像的宽度应该有一些限制，即图像不应该有宽度超过760px（假设），那么图像的CSS应为如下：undefined同样的方法你可以试试最小宽度、最大高度和最小高度。补充：需要注意的是IETester模拟的I...
通过HTML来判断IE版本，目的就是为了在某个特定的IE版本下，实行某个特定的JS或者进行CSS hack，IE版本中，目前最悲剧的版本就是IE6了。在进行WEB标准网页的学习和应用过程中，网页对浏览器的兼容性是经常接触到的一个问题。其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山，此外还有Firefox、Opera等。需要对这些浏览器进行兼容。同时，单就IE而言，因IE版本的升级更替，目前浏览者使用的主要停留在 IE5(IE5.5)、IE6和IE7这三个版本中。而这3个版本对于我们制作的WEB标准网页（XHTML+CSS）解释执行的显示状况不尽相同。并 且，其他非IE浏览器与IE对某些CSS解释也不一样。所以，通过IE浏览器中的专有条件注释可有针对性的进行相关属性的...
在 DIV+CSS3 的布局中，我一直以为 IE6 是最难伺候的，一会这个 bug，一会那个 bug，如果能把 IE6 摆平了，那也就天下太平了，兼容其他的浏览器应该也就不成问题。但是，我在制作新的 bo-blog 主题中碰到了一个不属于 IE 的杯具问题，在 Firefox、Opera、Safari 甚至在 IE 下都能正常显示的页面居然在 Chrome 下错位了！？这是让人无法容忍的，我可以 kill IE，但我不能把 Chrome 也给 kill 了。对于网站交互设计来说，chrome浏览器确实考虑的比较细致，针对眼视力障碍提供很好的帮助，但是为什么对于中文版的有12px限制呢？因为在中文当中，普遍使用的是宋体，宋体字体当中最小而且最清晰是12px大小，低于12px大小的文字就会看不清楚，针对中国本...
CSS全站黑白样式：undefined
CSS定义DIV居中,我们一般情况所用的样式是.xxx{margin:0 auto;}今天遇到了一个问题是在MSIE中显示居左，但在FireFox下已经居中显示。经过一番排查发现原来EditPlus默认没有在HTML前加上DTD,于是IE就以HTML方式来解释而不是XHTML来解释文档。所以问题并不在CSS而在XHTML网页本身。加上下面这句后发现MSIE下也显示正常了：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML使用CSS让DIV水平垂直居中的方法<html><head><title>DIV水平垂直居中</title><style>body{font-size:12px; margin:0; padding:0;}.div1{position:absolute;top:50%;left:50%;width:500px;height:300px; margin-top:-150px; margin-left:-250px; border:1px #999 solid; background:#CEE7FF;}</style></head><body><div clas...
首先我们大致的花了一个草图，理清一下思路。在实际操作中，你面对的可能不是草图，而是美工设计人员所设计的网站效果图，但大体上的结构是相当的，我们看下面的图片：图片文字说明：我们将顶部和底部设置为宽度960px左右，并居中对齐，以适应更大分辨率的需要。将中部的三列，即左侧，主内容区，右侧。置于一个div容器中，并将此div设置为宽度960px左右，并居中对齐。再将此容器内的左侧，主内容区，右侧分别设置宽度、应用浮动标签，以达到我们想预想的CSS布局效果。根据上面的图片示意，我们整理出各个div的id以及他们的关系： 顶部：header_common； 中部三列的容器：divall； 左侧：sider_a； 主内容区：main； 右侧：sider_b； 底部：footer_commonHTML代...
通过本文你将了解到div如何设置水平居中margin:0 auto参数说明很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题！margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小一在这里说两个典型的错误引起的不能居中的问题：1、没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！2、没声明DOCTYPE①DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么...
通过阅读本文你将了解到line-height的五种定义方法及在各浏览器中的特性与最佳定义方法。首先看2个问题：1）line-height和font-size 有联系吗，什么联系？2）line-height的继承特性有什么特殊性？如果你对这2个问题很清楚的话，你可以跳过本文。首先看看w3c的解释：line-height 属性设置行间的距离（行高，行间距）。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。什么是基线（bas...
定义和用法：list-style 简写属性在一个声明中设置所有的列表属性。说明：该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。可以按顺序设置如下属性： list-style-type list-style-position list-style-image 可以不设置其中的某个值，比如 "list-...