css相关tips

2018-06-24 00:55:45来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

12px的中文占据16px高度,英文占据14px的高度。所以做双语版网页时css样式要做相应调整。

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)。

 autofocus is defined to work reliably only on page load.

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

 

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

 

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

 

表格的单元格会自动收缩,不能利用overflow属性。即使设置width属性固定宽度,也会收缩到最小文字宽度。如果真要设置固定宽度,可以在td中嵌套div,给div设置宽度。或者用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或padding的话,子元素宽度会超出父元素的固定宽度。

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属性或再套一层div使用margin:auto属性。

 

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

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

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

 

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

隐式和显式的联系

例如,在 XHTML 中:

显式的联系:

<label for="SSN">Social Security Number:</label>

<input type="text" name="SocSecNum" id="SSN" />

隐式的联系:

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

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

 

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

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

 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">IE8开始添加的属性,指定浏览器去模拟某个特定版本的IE浏览器的渲染方式,解决IE的兼容性问题。

 

JPG:有损压缩,压缩比例高,体积小,打开快。不支持透明,色彩丰富,数码相机和web页面最常用的格式。
PNG:无损压缩,多次保存不影响图片质量,体积大。
      png8:支持透明/不透明,体积小,256种颜色,适合颜色比较单一的图像,如纯色、logo、图标等,但会有锯齿。
      png24:支持半透明,体积稍大,1600万种颜色,适合颜色比较丰富的图片。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【css】zSass - 用 sass 编写 css

下一篇:【规范】前端编码规范——html 规范