CSS学习个人总结---一

CSS学习：

权重记忆口诀：

从0开始，一个行内样式（style）+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1。

svg：

对于支持html5的FireFox和Chrome浏览器，可以直接使用object标签引入。

在chrome中引入的代码如下：

<object type="image/svg+xml"

data="/.../**.svg"></object>

/*去除select默认下拉箭头*/

select{

appearance:none;

-moz-appearance:none;

-webkit-appearance:none;

}

去掉textarea右下方的角：

css：{resize:none;} 即可。

解决css中父div高度不随子div高度变化的方法：

给父层div加overflow:auto;属性即可。

<div class="clear"></div>清除一下浮动即可。

dpr：

window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。

解决手机端点击出现阴影：

1.做好的页面在手机端测试时，发现部分浏览器，tap后会出现一个半透明的灰色背景，起初以为是outline作怪，加上后发现没反应，最后发现是tap后的背景高亮，要重设这个表现，则需要设置-webkit-tap-highlight-color为所需色彩，直接透明吧：

a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}

2.另外，如何去掉textarea,input的默认样式（IOS上的圆角及内阴影等，Android未测试）：

input,textarea{-webkit-appearance:none;}