css雜記

title: css雜記
date: 2017-05-21 15:52:05
tags: css筆記

word-spacing 單詞間距

判斷是否是單詞的依據(jù)是有沒有空格

行高的測量方式

假如文字是12px，行高是16px明棍，那么文字上下空隙分別是2px乡革，假如行高是15px，那么上方是1px，下方是2px沸版。

white-space 強制不換行

值為nowrap為強制不換行嘁傀，默認是normal。

text-indent 首行縮進视粮。

通常設置em心包，這樣文字尺寸改變了也不用該縮進值，只需要設置2em便一直是2個字的距離馒铃。

文字和空格的大小

字體本身原本是一張張的圖片，通過一定的編碼方式確定是哪個文字痕惋，文字和文字之間本身也有一定的縫隙区宇，算上縫隙才算是一個文字的大小，所以文字大小最好是從上到下測量值戳。而宋體中一個空格的大小差不多是一個文字的一半议谷。

偽類的順序

a:link 未訪問過,a:visited 訪問過后,a:bover 鼠標移入,a:active 鼠標按下。

clear屬性

給一個元素加上clear屬性堕虹，那么對應方向上的元素就不會浮動了卧晓。值可以設置為left|right|both|none|inherit。
clear:both是左右兩側都不能浮動赴捞。

清除浮動的方法

清除浮動是為了讓元素回歸文檔流逼裆，回歸到同一層級。

加高度

給浮動元素的父元素加一個固定的高度赦政。缺點是擴展性不好胜宇。有時候高度不能寫死。

父級浮動

給浮動元素的父元素加浮動恢着，缺點是父元素的父元素仍然會有問題桐愉，當前元素的父元素同時也是更上級元素的子元素。而且margin:0 auto;會失效

inline-block

給浮動元素的父元素加inline-block掰派，缺點也是margin:0 auto;會失效

使用空白元素

在浮動元素的后面增加一個沒有內(nèi)容的塊級元素設置css為clear:both从诲。缺點是只要清除浮動就要放一個空白元素，而且ie6仍會有2px的默認高度靡羡。

br

在浮動元素后面增加一個<br clear="all" />系洛。缺點也是只要清除浮動就要放一個空白元素。

偽類清除浮動

假設浮動元素的父元素添加一個class名為clearfix略步。

.clearfix {
    *zoom:1;
}
.clearfix:after {
    content:'';
    display:block;
    clear:both;
}

zoom是為了兼容ie瀏覽器碎罚，當設置了zoom之后會檢索設置對象的縮放比例，所設置的元素就會擴大或縮小纳像，高度就被重新計算了荆烈，所以可以清除浮動，*號是hack的寫法，只有ie6憔购、7瀏覽器可以識別宫峦。

overflow

給浮動元素的父元素設置overflow:hidden。原理是觸發(fā)BFC玫鸟。缺點是比浮動長的內(nèi)容會被直接剪裁掉导绷。

BFC和haslayout

BFC(block formatting context):BFC是塊級元素格式化上下文。是標準瀏覽器塊級元素的標準(除了ie6屎飘、7妥曲、8之外都是標準瀏覽器)。

haslayout:ie瀏覽器特有的钦购。

只要觸發(fā)了這兩個其一檐盟，那么這個觸發(fā)的區(qū)域就是一個獨立的區(qū)域不受外界影響，也可以理解為元素就不會脫離標準文檔流了押桃。

觸發(fā)BFC的情況

float的值不會none葵萎。
overflow的值不為visble(這就是overflow:hidden可以清楚浮動的原理，讓其觸發(fā)BFC)唱凯。
display的值為table-cell羡忘、table-caption、inline-block中的任何一個磕昼。
position的值不為relative和staic卷雕。
width|height|min-width|min-height的值不是auto的時候。

觸發(fā)haslayout的情況

zoom的值不會normal的時候票从。給ie瀏覽器設置zoom:1清楚浮動就是為了觸發(fā)haslayout爽蝴。

css hack

\9所有ie10及以下的瀏覽器。\9是寫在屬性值的后面纫骑。
*ie7及以下瀏覽器蝎亚，寫在屬性的開頭。
_ie6及以下瀏覽器先馆，寫在屬性的開頭发框。

hack的書寫順序要從高版本往低版本寫，因為css是按照順序執(zhí)行煤墙，后面的覆蓋前面的梅惯，所以先做統(tǒng)一處理，最后再去處理個別低版本瀏覽器仿野。另外hack不是一個標準的方法铣减，所以一般不要使用。

禁止選中文字

不同的瀏覽器設置的內(nèi)容不一樣脚作，user-select不是一個W3C的標準葫哗，瀏覽器的支持不完成缔刹，需要對不同的瀏覽器進行調(diào)整。

user-select有2個值（none表示不能選中文本劣针，text表示可以選擇文本）

-moz-user-select:none;  /*火狐*/

-webkit-user-select:none;   /*webkit瀏覽器*/

-ms-user-select:none;   /*IE10*/

-khtml-user-select:none;    /*早期瀏覽器*/

user-select:none;

ie6至ie9還沒發(fā)現(xiàn)有css屬性支持

opacity的兼容性

opacity是設置透明度校镐，標準寫法是opacity:1;,兼容ie的寫法是filter:alpha(opacity=100);

超出2行隱藏(強制2行)

首先css有三個屬性：

overflow:hidden超出的內(nèi)容隱藏。

text-overflow:ellipsis溢出用省略號顯示

white-space:nowrap溢出不換行

這樣只能強制一行顯示捺典，如果要強制2行顯示要用css3的屬性鸟廓。

display:-webkit-box將對象作為彈性伸縮盒子模型顯示

webkit-box-orient:vertical設置伸縮盒子的子元素排列方式(從上到下垂直排列子元素)

-webkit-line-clamp:2顯示的行數(shù)，不能單獨出現(xiàn)襟己。

最后css樣式如下：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;

css命名參考

頭：header head

內(nèi)容：content container

尾：footer

導航：nav navigation

側欄：sidebar aside

欄目：column

頁面外圍控制整體布局寬度：wrapper wrap

左右中：left right middle center

登錄條：login

標志：logo

廣告：banner

頁面主體：main body main-content page-main

熱點：hot

新聞：news

下載：download

子導航：subnav

菜單：menu dropmenu

子菜單：submenu

標題：title ttl caption small-caption

摘要：summary

搜索：search

友情鏈接：friend-link flink

頁腳：footer

版權：copyright

滾動：scroll

標簽頁：tab

文章列表：list

欄目標題：title

服務：service

注冊：register

投票：vote

加入我們：joinus

狀態(tài)：status status-bar

按鈕：btn-

圖標：ico- icon-

滾動：scroll

標簽頁：tab

文章列表：list

彈出層：pop popup

對話框：dialog dlg

狀態(tài)提醒：success error alert notice caution

提示信息：msg message message-box

當前的：active act current curr selected on

小技巧：tips

注釋：note　notice

指南：guide

移動端彈窗時暴力禁止html滾動

html.lock-html {
    height: 100%;
    overflow: hidden;
}

實現(xiàn)文字豎向排版

模擬豎排文字

對文字對象的寬度設置只能排下一個文字的寬度距離引谜，讓文字一行排不下兩個文字使其文字自動換行，就形成了豎立排版需求擎浴。

writing-mode屬性

writing-mode 有兩套屬性员咽，一套是IE私有的，另一套是CSS規(guī)范屬性退客。

CSS規(guī)范屬性

writing-mode: horizontal-tb;    /* 默認值 */
writing-mode: vertical-rl;
writing-mode: vertical-lr;

vertical-rl 表示文本是垂直方向(vertical)展示，然后閱讀的順序是從右往左(rl:right-left)链嘀，跟我們古詩的閱讀順序一致萌狂。

vertical-lr 表示文本是垂直方向(vertical)展示，然后閱讀的順序還是默認的從左往右(lr:left-right)怀泊，也就是僅僅是水平變垂直茫藏。

image

IE私有屬性

writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

IE下的屬性特別多，但是需要關注的只有這幾個：

如果是IE8及以上瀏覽器：lr-tb 霹琼、tb-rl 务傲、tb-lr，分別對應于CSS規(guī)范中的 horizontal-tb 枣申、vertical-rl 售葡、vertical-lr`。

如果是IE7瀏覽器：lr-tb 和 tb-rl 分別對應CSS規(guī)范的 horizontal-tb 和 vertical-rl忠藤。