css相关tips

IE10，IE11浏览器当点击input text文本框时，输入文本后出现一个删除功能的X按钮。

去掉input text文本框后的X按钮的方法：给input text添加如下CSS

input::-ms-clear{ display:none; } //提示：input后是两个冒号，伪元素需要两个冒号。

readonly ：不可编辑，不可获得焦点，背景颜色默认透明，字体颜色默认为前景色黑色，值可以在请求中传递；

chorme和ie支持，firefox不支持readonly属性（在属性内定义：onfocus="this.blur()"）

disabled ：不可编辑，不可获得焦点，背景颜色默认灰色，字体颜色默认为灰色，值不可以在请求中传递； 

标签属性(readonly)大小写都不会影响其效果，但js的DOM中严格区分大小写(readOnly)。 

Firefox的css usage插件可以显示重复或没有用到的css rules，每个页面scan一次比autoscan准。

Firefox不支持background-position-x/y属性，要用background-position：X Y;代替。

position为fixed的元素，宽度为自适应的最小宽度，不会占一整行。

表格的单元格会自动收缩，不能利用overflow属性。即使设置width属性固定宽度，也会收缩到最小文字宽度。如果真要设置固定宽度，可以在td中嵌套p，给p设置宽度。或者用table的table-layout:fixed;属性。

表格的第一行决定整体表格的单元格宽度。如果要表格根据内容自适应宽度，只要加white-space:nowrap属性即可。特别是ie，别的浏览器会自动调整宽度。

改变浏览器大小？ 

font的简写注意事项

1、简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。

font: italic bold .8em/1.2 Arial, sans-serif;//family之间用，号

2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值

 页面居中时出现滚动条不跳动的方法：

只有margin-left为auto时，出现滚动条会改变其值，页面跳动。  

1.body { overflow-y: scroll; }    //超出时出现滚动条，不超出时依然会保留一个丑陋的灰色的滚动栏

2.wrap-outer {margin-left: calc(100vw - 100%);}   //在左边提前预留滚动条的宽度

//calc()是css3中的函数，可进行四则运算（前后必须有空格），可混合使用百分比、px、em、rem等单位

// 100vw指viewport的宽度，包含滚动条的宽度；而100%是不包含滚动条的viewport宽度。

若margin-left为固定值，不会跳动。滚动条会出现在最上面一层，压住下面的内容。

 不同分辨率显示不同宽度

.abc{ height:300px; border:1px solid #000; margin:0 auto} //通用样式
@media screen and (min-width: 1201px) { //设置了浏览器宽度不小于1201px时 abc 显示1200px宽度
      .abc {width: 1200px}
}
@media screen and (max-width: 1200px) {//设置了浏览器宽度不大于1200px时 abc 显示900px宽度
      .abc {width: 900px}
}

注意：CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前）

块元素默认占据一行，如果宽度不够，会自动换行，可以使用white-space:nowrap属性强制不换行。

子元素设置width=100%,若有border的话，子元素宽度会超出父元素的固定宽度。

box-sizing: content-box|border-box|inherit;//指定盒模型计算宽和高的方式。

content-box: 宽和高只应用到元素的内容框，元素的内边距和边框在宽度和高度之外绘制。

border-box：为元素指定的内边距和边框都将在已设定的宽度和高度内进行绘制。

.cf:after，.cf:before {content: " "; display: table;}

.cf:after {clear: both;}

：before是因为table类型能生成独立的bfc，防止上边距塌陷，

：after负责清除浮动，防止父级高度塌陷；配合使用，代码少，效率高。
大小不固定的图片和多行文字的垂直水平居中？

1.将父容器设为display:table并给固定高度，子容器设为display:table-cell，并配合使用vertical-align：middle属性（在表中和行内元素中生效）即可。

或者：父容器要用相对定位position:relative;子容器绝对定位，top:50%;left:50%;margin-top和margin-left的值为该容器高度，宽度的一半的负值。

或者：父元素相对定位，子容器绝对定位，top:0，bottom:0，margin:auto，不用计算。

若要同时水平居中：使用position：relative属性或再套一层p使用margin：auto属性。

多列内容不固定等高css Hack：

父容器设置overflow:hidden;子元素:padding-bottom:9999px;margin-bottom:9999px;

每个p都增加相同的高度，内容少的增加的p会被父容器hidden掉。

label标签的for 属性规定 label 与哪个表单元素绑定。

隐式和显式的联系

例如，在 XHTML 中：

显式的联系：

<labelfor="SSN">SocialSecurity Number:</label>
<inputtype="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <inputtype="text" name="DofB" /></label>

第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。第二个标记 ("Date of Birth:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 标签中放入 标签来隐式地连接起来的。

 ie8之前不支持opacity属性，需要使用滤镜：filter:alpha(opacity=30);  /* IE 4-9 */ 

IE专有的滤镜属性filter是只适用于 layout 元素的，也就是说如果你给一个p设置透明用的是filter:alpha(opacity=80);如果你没有让p触发hasLayout，那么这个透明将无效。需要另外设置zoom：1；这个属性进行触发。

 IE8开始添加的属性，指定浏览器去模拟某个特定版本的IE浏览器的渲染方式，解决IE的兼容性问题。

   background-origin: 规定 background-position 属性相对于什么位置来定位。

padding-box      背景图像相对于内边距框来定位；（默认）

border-box背景图像相对于边框盒来定位；

content-box背景图像相对于内容框来定位。

background-position ：设置背景图像的起始位置。

默认值：0% 0%（从背景图的左上点开始）；如果只设置一个值，另一个值将为“居中”（50%/center）

background-size:取值（IE8不支持此属性）

百分比/length：背景图的尺寸相对于背景区域的长度。只设一个，第二个为auto（会保持比例不变，不变形）。

如果都设为100%，则背景图会铺满背景区域，但长宽比率会跟着变化。

contain:背景区域按背景图的固定比例包含整个背景图。背景图的尺寸以背景图按固定比例扩大，其任意一条边到达背景区域的边界为止，经常会导致另一边空白。

cover:背景图按固定长宽比缩放至填充满整个背景区域，有一边的背景图会因超出背景区域而被切除。

IE8兼容：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='绝对路径',sizingMethod='scale/crop');

      crop : 背景图大小不变，剪切图片以适应区域尺寸。

      image : 默认值。增大或减小区域的尺寸边界以适应背景图的尺寸，相当于overflow：visible的效果。

      scale : 缩放背景图以适应区域的尺寸边界。

①不能指定任意大小background百分比②只适于单张图片不能使用图片精灵等拼图③要引用绝对路径图片④兼容ie7，8

 JPG：有损压缩，压缩比例高，体积小，打开快。不支持透明，色彩丰富，数码相机最常用的格式，压缩比率高。

PNG：无损压缩，体积大。

      png8：支持透明/不透明，体积小，256种颜色，适合颜色比较单一的图像，如纯色、logo、图标等。

      png24：支持半透明，体积稍大，1600万种颜色，适合颜色比较丰富的图片。

更多css相关tips相关文章请关注PHP中文网！