.clear{clear:both;line-height:0}
暴力清除浮動磁浇,清除浮動的時候都需要添加一個空標(biāo)簽求冷。
clearfix 清除浮動的方法钧大,直接解決了上面的缺陷翰撑,不需要增加空標(biāo)簽,直接在有浮動的外層加上這個樣式就可以了啊央,這也是我們今天要討論的clearfix進(jìn)化史眶诈。
使用clearfix 清除浮動,解決父類高度崩塌瓜饥。
.clearfix {
? ? zoom: 1;
}
.clearfix:after {
? ? visibility: hidden;
? ? display: block;
? ? font-size: 0;
? ? content: " ";
? ? clear: both;
? ? height: 0;
}
終極版本一
.clearfix:after{
? ? content:"\200B";
? ? display:block;
? ? height:0;
? ? clear:both;
}
.clearfix{*zoom:1;}
終極版本二
.clearfix:before,.clearfix:after{
? ? content:"";
? ? display:table;
}
.clearfix:after{clear:both;}
.clearfix{
? ? *zoom:1;/*IE/7/6*/
}
user-select禁止用戶選中文本
div{
? ? user-select:none;
}
清除手機(jī)tap事件后element 時候出現(xiàn)的一個高亮
* {
? ? -webkit-tap-highlight-color: rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb? 可以修改瀏覽器的滾動條樣式逝撬。IE火狐可能不支持。
-webkit-appearance:none
移除瀏覽器默認(rèn)的樣式乓土,比如chrome的input默認(rèn)樣式宪潮,然后就可以定義需要的樣式。
input, button, textarea, select {
? ? *font-size: 100%;
? ? -webkit-appearance:none;
}
css實現(xiàn)不換行趣苏、自動換行狡相、強(qiáng)制換行
//不換行
white-space:nowrap;
//自動換行
word-wrap: break-word;
word-break: normal;
//強(qiáng)制換行
word-break:break-all;
box-sizing 讓元素的寬度、高度包含border和padding
{
? ? box-sizing: border-box;
}
常用的選擇器 :nth-child() Selector
選擇父類下第一個子節(jié)點食磕,p元素
p:nth-child(1) {
? ? ...
}
-webkit-font-smoothing 字體抗鋸齒
使用該屬性能讓頁面上的字體變得清晰尽棕,但是也會造成font-weight: bold 加粗變得異常。不信你試試...
div {
? ? -webkit-font-smoothing: antialiased;
}
使用css創(chuàng)建三角形
div {
? ? border-bottom: 20px solid white;
? ? border-right:20px solid transparent;
? ? border-left: 20px solid transparent;
? ? height: 0px;
? ? width: 0px;
}
height貌似沒有用