input等在浏览器中的默认黄色

其实只要设置autocomplete=”off”属性即可去掉

设置如下代码是无效的

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
background:white !important;
}

不过如果一定需要用样式解决可以用(用阴影变相解决)

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
-webkit-box-shadow: 0 0 0 1000px white inset;
}

css3中3d必不可少的perspective属性

理解css3的3d,直接demo

一个骰子的效果(此demo没有perspective,必须加transform-style:perspective-3d;)

perspective的中文意思是:透视,视角!

perspective属性的存在与否决定了你所看到的是2次元的还是3次元的,也就是是2D transform还是3D transform. 这不难理解,没有透视,不成3D.

translateZ帮你寻找透视位置

如果说rotateX/rotateY/rotateZ可以帮助理解三维坐标,则translateZ则可以帮你理解透视位置。

我们都知道近大远小的道理,对于没有rotateX以及rotateY的元素,translateZ的功能就是让元素在自己的眼前或近或远。比方说,我们设置元素perspective为201像素,如下:

perspective: 201px;

则其子元素,设置的translateZ值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);translateZ值越大,该元素也会越来越大,当translateZ值非常接近201像素,但是不超过201像素的时候(如200像素),该元素的大小就会撑满整个屏幕(如果父辈元素没有类似overflow:hidden的限制的话)。因为这个时候,子元素正好移到了你的眼睛前面,所谓“一叶蔽目,不见泰山”,就是这么回事。当translateZ值再变大,超过201像素的时候,该元素看不见了——这很好理解:我们是看不见眼睛后面的东西的!

perspective属性的两种书写

perspective属性有两种书写形式,一种用在舞台元素上(动画元素们的共同父辈元素);第二种就是用在当前动画元素上,与transform的其他属性写在一起。如下代码示例:


.stage {
    perspective: 600px;
}

以及:


#stage .box {
    transform: perspective(600px) rotateY(45deg);
}

建议Chrome浏览器下访问,可以使用range控件,演示效果更赞,如下截图:-100时候最小,200时候超级满屏(垂直方向因特殊布局限制没有显示),250的时候因为元素已经在视点之外,因此是一片空白(看不见)。

本地没装微软雅黑,用css写@font-face让其能显示微软雅黑字体

在设计布局网页时 经常想要用一些比较好看的字体,比如微软雅黑,这个字体在近年来在网页设计中运用越来越平常, 然而所使用的字体也只有自己能看到 到别的机子上 又恢复了原来的宋体神马的。

经过一位高手的提点,能用CSS直接实现,查阅了部分资料 并经过测试 总结下列方法来实现网页中的自定义字体
我们很容易发现EOT字体仅仅对于IE浏览器支持 面对庞大的IE用户 EOT字体的重要性也就不说了

对于其他浏览器由于直接支持TTF字体 就不多介绍 只是在定义样式时 注意下浏览器的兼容问题就可以了

由于各浏览器对 ‘@font-face’ 规则字体格式支持存在差异,若仅通过定义一个 ‘@font-face’ 规则,可以通过 CSS hack 的方式在IE、Firefox、Chrome、Safari、Opera中得到相同的字体效果:

<style type="text/css">

/*定义字体*/
@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* 非IE */
}
/*调用部分*/
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif; }

</style>

<body>
<span>微软雅黑显现效果</span>
</body>

解释一下,”your FontName” 为自定义字体名字, “real Fontname”是真实字体名字, 非IE浏览器读到第一行,一看是eot字体,跟自己没关系,于是跳到第二行,读取”local”(本地)定义的字体,试图到用户机器上去找这个字体(所以一定要用真实的字体名字,这样万一用户机子上有该字体就可以省去用户一个ttf的下载),发现没有就从后面的”url”的路径去下载ttf文件了. 而IE过程相反,它读到第一行发现是eot, 但是执行以前他会去继续读后面的行,所以”local”定义非常必要,IE不认识”local”,它就晕了,只好倒回去下载eot,如果没有local定义的话,这段字体定义代码对IE是无效的.

至此跨浏览器的内嵌字体css定义就完成了.

最后还有一个问题,我考虑了下中文内嵌字体下载量过大的问题,英文字体一般比较小,中文字体动辄几MB,下载量太大,看来中文内嵌字体要完全实用要给字体减肥才行,比如只保留字体里面网站使用的字,不用的字全部剔掉,这样就能大大减小体积了.
搜了一下,有人貌似有类似的解决方案

在线的转换工具

inline-block空格问题及运用

Inline-block是元素display属性的一个值。这个名字的由来是因为,display设置这个值的元素,兼具行内元素( inline elements)跟块级元素(block elements)的特征。

inline-block元素跟元素设置浮动后的表现差别并不是很大。对盒子设置浮动后,同样会水平排列。虽然他们实现的原理不同,但内部表现为块级元素,水平排列这种需求,浮动跟inline-block都适合实现。

inline-block和float的区别

  1. 文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然,周围元素不会环绕这个元素,你也不可能通过清除inline-block就让一个元素跑到下面去。
  2. 水平位置(Horizontal position):很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display:inline-block,则对父元素设置一些定位属性会影响到子元素。(这还是因为浮动元素脱离文档流的关系)。
  3. 垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
  4. 空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inline-block时,这些元素之间就会出现空白。而浮动元素会忽略空白节点,互相紧贴
  5. IE6和IE7:Ie67对此属性部分支持。如果你要兼容这些浏览器,必须解决这个问题。这不是个大问题,但值得留意一下。

解决空白问题

你现在估计已经跃跃欲试了,不过估计不想让那些空白出现。

  1. 删除html中的空白:不要让元素之间换行,这可能比较蛋疼,但也是一种方法,特别是你元素不多的时候。
  2. 使用负边距:你可以用负边距来补齐空白。但你需要调整font-size,因为空白的宽度与这个属性有关系。我认为是0.25em,但我不确定。如果有人知道可以留言告诉我。
  3. 给父元素设置font-size:0:不管空白多大,由于空白跟font-size的关系,设置这个属性即可把空白的宽度设置为0.在实际使用的时候,你还需要给子元素重新设置font-size。

什么时候使用inline-block,什么时候使用float

什么时候使用,取决于你的设计稿跟解决方法。如果你需要文字环绕容器,那浮动是不二选择。如果你需要居中对齐元素,inline-block是个好选择。

最终,这可以归结为float跟inline-block的两种属性作用后的区别,你需要对其作出选择。

  1. 使用inline-block:当你需要控制元素的垂直对齐跟水平排列时,使用inline-block。
  2. 使用浮动:当你需要让元素环绕某一个元素时,或者需要支持旧版本ie,或者不想处理inline-block带来的空白问题时,使用浮动。

div { display:inline-block; _zoom:1;*display:inline;} /*推荐:ie67*/

CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑

华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
俪黑 Pro:LiHei Pro Medium
俪宋 Pro:LiSong Pro Light
标楷体:BiauKai
苹果俪中黑:Apple LiGothic Medium
苹果俪细宋:Apple LiSung Light

Windows的一些:

新细明体:PMingLiU
细明体:MingLiU
标楷体:DFKai-SB
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微软正黑体:Microsoft JhengHei
微软雅黑体:Microsoft YaHei

装Office会生出来的一些:

隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei

CSS样式在IE6下无效的编码问题、中文注释问题

问题症状:
1、<link href="css.css" rel="stylesheet" type="text/css" />
通过link方式引用css,在ie7,ie8可以正常显示,ie6不能正常显示。

解决:
1、改变文件编码格式为utf-8,并在css文件加上 @charset “utf-8”;
2、去掉css中的中文注释。

原因:

网页采用了 UTF-8 编码格式,这本来没有问题,问题是外部 CSS 文件默认是 ANSI 编码,并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的,然而当 CSS 文件中包含有中文注释时就可能不尽如人意了!我估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析,所以才会发生 CSS 在 IE6 下不起作用的情况。看来微软已注意到这个问题,在 IE7 中把它修复了。

但是用 IE6 的人还是不少。因此这个问题需要解决:
方法一:把 CSS、JS 和网页文件都统一保存为 UTF-8 格式。
方法二:去掉 CSS、JS 中的中文注释,或者改为英文。

css用户本地没装微软雅黑,网页怎么显示雅黑字体等

在设计布局网页时 经常想要用一些比较好看的字体,比如微软雅黑,这个字体在近年来在网页设计中运用越来越平常, 然而所使用的字体也只有自己能看到 到别的机子上 又恢复了原来的宋体神马的。

经过一位高手的提点,能用CSS直接实现,查阅了部分资料 并经过测试 总结下列方法来实现网页中的自定义字体

我们很容易发现EOT字体仅仅对于IE浏览器支持 面对庞大的IE用户 EOT字体的重要性也就不说了

对于其他浏览器由于直接支持TTF字体 就不多介绍 只是在定义样式时 注意下浏览器的兼容问题就可以了

由于各浏览器对 ‘@font-face’ 规则字体格式支持存在差异,若仅通过定义一个 ‘@font-face’ 规则,可以通过 CSS hack 的方式在IE、Firefox、Chrome、Safari、Opera中得到相同的字体效果:

<style type="text/css">
<!--

//定义字体
@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* 非IE */
}

//调用部分
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif; }
-->
</style>

<body>
<span>微软雅黑显现效果</span>
</body>

解释一下,”your FontName” 为自定义字体名字, “real Fontname”是真实字体名字, 非IE浏览器读到第一行,一看是eot字体,跟自己没关系,于是跳到第二行,读取”local”(本地)定义的字体,试图到用户机器上去找这个字体(所以一定要用真实的字体名字,这样万一用户机子上有该字体就可以省去用户一个ttf的下载),发现没有就从后面的”url”的路径去下载ttf文件了. 而IE过程相反,它读到第一行发现是eot, 但是执行以前他会去继续读后面的行,所以”local”定义非常必要,IE不认识”local”,它就晕了,只好倒回去下载eot,如果没有local定义的话,这段字体定义代码对IE是无效的.

至此跨浏览器的内嵌字体css定义就完成了.

最后还有一个问题,我考虑了下中文内嵌字体下载量过大的问题,英文字体一般比较小,中文字体动辄几MB,下载量太大,看来中文内嵌字体要完全实用要给字体减肥才行,比如只保留字体里面网站使用的字,不用的字全部剔掉,这样就能大大减小体积了.
搜了一下,有人貌似有类似的解决方案

在线字体转换工具