css知識點積累

關於樣式的優先級問題：

!important > style > [ id > class > tag ];

 

 z-index 的屬性用法：

z-index屬性是用來設置元素的堆疊順序，z-index的屬性值可爲負數、0 或 正數，屬性值越大，元素越接近用戶，越顯示於前面，以下圖所示：

新手使用CSS中的這個屬性時，常常會忘記在前面要先聲明定位元素，即z-index屬性只適用於絕對定位容器，例如代碼：position: absolute;   z-index: 1;

 role ：

html 裏面的 role 本質上是加強語義性，當現有的HTML標籤不能充分表達語義性的時候，就能夠藉助role來講明。一般這種狀況出如今一些自定義的組件上，這樣可加強組件的可訪問性、可用性和可交互性。

role的做用是描述一個非標準的tag的實際做用。好比用div作checkbox，那麼設置div 的 role=「checkbox」，輔助工具就能夠認出這其實是個checkbox

好比：

<div role="checkbox" aria-checked="checked"></div>

輔助工具就會知道，這個div其實是個checkbox的角色，爲選中狀態，role 更多的是起到註明做用，刪掉也沒有問題,只是爲了可讀性,這是一種良好的編程習慣，要堅持。

 

 data-toggle:

bootstrap框架中data-toggle="tab"屬性會取消a標籤默認行爲
標籤： data-toggle tab bootstrap 取消默認行爲
這幾天作公司項目用了bootstrap框架,在用導航組件的過程當中,我發如今a標籤裏面添加data-toggle="tab"屬性以後,這個a標籤會失去默認行爲,點擊a標籤的時候不會跳轉,即便有href屬性,可是它無論用.So,若是想要實現它導航欄的效果,又要可以讓連接有效,只能去掉data-toggle="tab"屬性.可是動態切換導航按鈕的active屬性就實現不了,可是實現了跳轉,active屬性還有什麼用呢?就算有也看不到。

原文：http://www.cnblogs.com/wdlhao/p/4504685.html

 aria-haspopup :

aria-haspopup :true表示點擊的時候會出現菜單或是浮動元素； false表示沒有pop-up效果。
aria-expanded:表示展開狀態。默認爲undefined, 表示當前展開狀態未知。其它可選值：true表示元素是展開的；false表示元素不是展開的。
Windows 8 中的 Internet Explorer 10 引入了 aria-haspopup 文檔對象模型　(DOM) 屬性的新用法：在支持觸摸的設備上模擬懸停。
注意 此行爲不適用於 Windows 7 中的 Internet Explorer 10。
此外，Internet Explorer 10 向現有 aria-haspopup 屬性添加新的行爲，以模擬具備隱藏交互式內容的頁面元素上的懸停。
在一個頁面元素上（例如菜單），將元素的 aria-haspopup 屬性設置爲 "true"。當支持觸摸的設備上的 Internet Explorer 10 用戶第一次點擊頁面元素時，用戶的體驗與將光標懸停在該元素上的用戶的體驗相同。在用戶點擊頁面上的其餘位置、再次點擊該元素或導航到其餘頁面前，該元素保留其懸停狀態。此外，onclick 事件的默認操做（例如連接的導航）不在第一次點擊頁面元素時執行。
啓用 aria-haspopup 屬性不更改針對使用鼠標和鍵盤的訪問者的網頁行爲。

 

 塊級元素：

顧名思義，塊級元素就是一塊一塊的，他會換行，老是在新行上開始，行高以及外邊距和內邊距均可控制，寬度缺省是它的容器的100%，除非設定一個寬度，它能夠容納內聯元素和其餘塊元素。 

常見的塊級元素有：div, p, table, ul , li, h1,h2, h3,h4....

內聯元素：

也稱行內元素，顧名思義，內聯元素就是在行內的，他不會換行，內就是在一行內的元素，只能放在行內，而且不能設置寬高，外留白等樣式；塊級元素，就至關因而一個四方塊，能夠放在頁面上任何地方，而且能夠換行。 
常見的塊級元素有：a , b, br,   i , span

內聯塊級元素：

有些元素他不換行，可是他能設置寬高。 
常見的內聯塊級元素有：img , button , input

關於樣式設置：

一些元素，通過樣式的控制能夠是他們變爲塊級元素，也可讓他們變爲內聯元素甚至內聯塊級元素。 
方法以下：

變爲塊級元素：display:block;

變爲內聯元素：display:inline;

變爲內聯塊級元素：display:inline-block;

outline屬性：

設置 4 個邊框的樣式：
p
{
outline:#00FF00 dotted thick;
}
定義和用法
outline （輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用 。
註釋：輪廓線不會佔據空間，也不必定是矩形。
outline 簡寫屬性在一個聲明中設置全部的輪廓屬性。
能夠按順序設置以下屬性：
outline-color
outline-style
outline-width
若是不設置其中的某個值，也不會出問題，好比 outline:solid #ff0000; 也是容許的。

Transition (變換動畫)：

CSS Transition (變換動畫) - 奶齒 Netsh:https://blog.netsh.org/posts/css-transition-animate-tutorial_522.netsh.html

-Webkit- Transition:（Transition:變換. 效果有：顏色變換、拉伸和伸縮效果、位置移動）
在CSS3中這個屬性的做用是使得變化不那麼生硬，達到比較平和的過渡。而實際變化的屬性是須要咱們本身手動去添加變化.
這個屬性能夠分解成多個CSS屬性：

（1)-webkit-transition-timing-function 能夠定義
動畫的變化時間曲線
-webkit-transition-timing-function: ease-out ,cubic-bezier(x1,y1,x2,y2);
（2）-webkit-transition-property指定發生變化的屬性
-webkit-transition-property: opacity;
（3）-webkit-transition-duration制定發生變化的時間
-webkit-transition-duration: 2s;
-webkit-transition-delay 指定在變換開始以前的時間延遲
-webkit-transition: opacity 500ms ease-out 100ms;
在css代碼中，要使用Transition屬性須要這麼書寫：
-moz-transitioin: //firefox
-webkit-transition: //safari,chrome
-o-transition: //opera
transition: //官方標準

-webkit-appearance: none;

目前在IE系列和Opera瀏覽器上不支持「appearance」，並且Safari也只有3.0版本以上支持，而在Chrome和Firefox以及移動設置瀏覽器上獲得較好的支持。
-webkit-appearance 是一個 不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。此屬性非標準且渲染效果在不一樣瀏覽器下不一樣，有些屬性值甚至不支持，請慎用。
使用「appearance」屬性，來改變任何元素的瀏覽器默認風格
使用CSS3的appearance屬性改變元素的外觀_appearance, css3屬性詳解 教程_w3cplus：
http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html
eg:
.select select {
-webkit-appearance: none;
appearance: none;
color: #333;
height: 3.2rem;
line-height: 3rem;
border: none;
background: url(../images/select.png) right 1rem center no-repeat;
background-size: 0.8rem;
font-size: 1.4rem;
width: 100%;
padding: 0;
margin: 0;
text-indent: 0.5rem;
border-radius: 5px;
}

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

總的來講：這是CSS3.0的對於文章段P容器的定義方法語句！
display:block這個樣式，只定義了P容器爲一個塊;
後面四句是CSS3中的樣式定義方法；
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
分別定義p的上邊距和下邊距的數值是1倍字體高度，如10px像素的字，那麼邊距就爲10px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
上面二句則定義爲左右邊距都爲0PX，這個應該好理解；
因此以上
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
至關於CSS2.0中的
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 0px;
margin-left: 0px;
}
但因爲CSS3.0要求瀏覽器版本較高，因此國內並無流行CSS3.0樣式，依然以CSS2.0爲主流

 

 

-webkit-line-clamp：

段落多行文本超出省略、隱藏：
（若是考慮瀏覽器的兼容性，特別是作網站的時候，能夠直接用最大高度max-height來限制文字超出隱藏，若是是寫移動端的頁面，直接用如下的方法來限制比較正確。）
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //超出3行省略，行數可換，後3句是固定搭配

 

（-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它須要組合其餘的WebKit屬性。
常見結合屬性：
display: -webkit-box; 必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。
text-overflow: ellipsis;，能夠用來多行文本的狀況下，用省略號「…」隱藏超出範圍的文本 。這個屬性比較合適WebKit瀏覽器或移動端（絕大部分是WebKit內核的）瀏覽器。
跨瀏覽器兼容的方案：比較靠譜簡單的作法就是設置相對定位的容器高度，用包含省略號(…)的元素模擬實現；
eg:css 代碼:
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png)
repeat-y;
}
這裏注意幾點：
height高度真好是line-height的3倍；
結束的省略好用了半透明的png作了減淡的效果，或者設置背景顏色；
IE6-7不顯示content內容，因此要兼容IE6-7能夠是在內容中加入一個標籤，好比用<span
class="line-clamp">...</span>去模擬；
要支持IE8，須要將::after替換成:after；）

background-repeat:no-repeat;

background-position:

若是您僅規定了一個關鍵詞，那麼第二個值將是"center"。

默認值：0% 0%。
可能的值：
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

或者可能的值：x% y% ，第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。