css零星高階知識點

display: inline-block: 可設定寬高的行級元素，

如果inline-block元素本行無法顯示完全的話則整個換行而不是裡面的單詞換行

position: 設定參照物，top,left,right,bottom就是相對於參照物的偏移量

poistion relative: 仍在文件流，tlrb都是相對它自身原來的位置說的，往往relative position作為絕對定位子元素的參照物，以及改變元素z軸的層級（比static(預設)的元素z軸高）

position absolute: 絕對定位元素內容為內容寬度，脫離了文件流，top/left/right/bottom是相對第乙個父定位元素（或者根元素)

position fixed: 固定定位元素內容為內容寬度，脫離文件流，定位是相對視窗的，即使scroll也不變

z-index:只對positioned元素有效(relative,absolte,fixed), z-index為-1時則會跑到normal flow中的元素的下面；z-index還有乙個棧的概念，也就是說父元素（確切地說是參照物元素）的z-index比較低的話，即使定位子元素的z-index很高也沒有用

text-align只對內容元素為行級元素時起效果

float: float元素的預設寬度為內容寬度,半脫離文件流（對後序元素來說脫離了文件流，對於後序內容來說該元素未脫離文件流），向指定的方向一直移動到不能移動為止(到父元素邊界)，後序元素將占有float元素的本來位置（普通文件流)，同時由於float元素類似定位元素它的z-index就比較高，所以會遮罩後序元素（內容並不會覆蓋）。

float的元素不再占有高度，父元素的高度由非float子元素來決定。如果沒有非float子元素，則父元素的高度就變為了0

所有的float元素本身一起在同一文件流。float元素的父元素高度可能就變為0了（如果沒有其他非float元素的話）

我們可以使用clear屬性來清除浮動的影響，這時父親元素就會被撐開

clear:應用於浮動元素的後續元素，應用於塊級元素。可以通過增加以惡搞空白元素或者clearfix方法。一般方法是在float元素的父元素那裡使用clearfix建立乙個pesudo element,clear:both

頁面架構布局：

水平居中布局： 1. 父text-align: center;子display:inline-block，原理是：當子元素為inline時，寬度為內容寬度，同時父元素text-align center對inline內容是有效的，這樣子元素就水平居中了，但是注意可能只對內容較少的一行有效！（注意margin: 0 auto對於inline-block元素無法達到居中的效果）

2.子display:table+margin:0 auto,原理是：display為table的元素和div元素類似，但是他的寬度是由內容寬度來決定的。

3.父position:relative；子position:absolute+left: 50%+transform:translate(-50%)原理是：絕對定位的元素寬度為內容寬度，其定位是相對父元素的；注意：這時由於子元素脫離文件流，父元素高度就為0了！

垂直居中布局（父子高度都不定）：

1. 父元素display:table-cell;vertical-align:middle; 原理:vertical-align作用域inline,inline-block和table-cell元素上面。table-cell元素寬度為內容寬度，高度方向可以設定vertical-align;

2.父元素position:relative;子元素position absolute;top:50%;transform:translatey(-50%);width:100%: 其原理是：絕對定位的元素其寬度為內容寬度，脫離文件流，top:50%是相對于父元素的高度的，translatey(-50%)是相對元素本身的高度的；

3.flex

多列布局中的：定寬+自適應：

1. float+margin-left .left: float:left;width: 100px; .right: margin-left:120px;

2. float+overflow-hiddlen .left: float:left;width:100px;.right: overflow: hidden;

3. table+tablecell .parent: display:table;.left/.right: display:table-cell;

如果有以下**, 由於span元素預設地就是inline元素，你以為parent span總歸是完全能夠包裹住child span的，但是不然，有時候很奇怪的事情就會發生：父親竟然比child span莫名奇妙地矮了幾個畫素。

乙個解決辦法就是：將parent設定為inline-block，就能夠解決問題，具體原因也還沒有搞清楚

<
span 
class
="parent"
>
<
span 
class
="child"
>
span
>
span
>

.parent

modal在web ui中非常常見，但是乙個可能遇到的問題是：如果modal的內容很多必須scroll，而document body內容也很多也需要scroll,那麼怎麼做到只顯示乙個modal的scroll而document body的scroll禁掉或者明顯區分開來呢？

第一種方案是在modal展開時禁掉body scroll;（body overflow:hidden）

參考主要思想就是將一些視覺性的效果比如background-color,color,border-color抽象規整放到乙個theme-class中，比如bootstrap中的panel-primary這個css類被應用於panel根元素上來定義這個panel的**，在less源**中，我們使用乙個mixin來定義這個panel以及內容元素的顏色資訊。同樣地，可以定義多個variant: panel-info,panel-danger,panel-alert;

主要思想是要求元素不能依賴於其所處的位置。（這個我的經驗是對此持保留意見：即可以適當食用a > b的方式來選擇元素）

心得：該方**比較適合於smacss中的模組css的定義和設計

categorizing css rules: 為css做精心分類

按照smacc的理論，css被認為分為5類，分別是：

1. base

就是基礎樣式，是指在任何場合下，頁面元素的預設外觀，它的定義不會用到class和id，css reset也屬於此類。

2. layout(major components)

布局樣式，它和下面的module rules一同描述的是頁面中的各類具體元素。元素有層級之分，layout rules往往屬於較高的一層，它可以作為層級較低的module rules元素的容器。比如左右分欄，柵格系統都屬於布局樣式。我們往往可以定義出通用的布局class，在定義好整個頁面的布局或者頁面區域性布局後，在這些布局class的裡面填入module class元素；

3.module rules(模組樣式)

4.state rules（狀態樣式）

描述的是任意元素在特定狀態下的外觀，比如a鏈結有是否訪問過的狀態，導航條有是否current的狀態，元素是否hover的狀態，tabs是否collapse的狀態。總之，凡是和互動相關的都可以歸類到狀態樣式

5.theme rules:主題樣式

描述了頁面主題外觀，一般是指顏色，背景圖，padding,marggin的size大小。這一點可以結合oocss中的結構和主題分離的原則來綜合考慮；

naming rules: 命名規則

根據上面對css的歸類，一般需要體現在命名規則上，比如：

layout一般用 l-xx 來表示；

狀態相關用 j-xx 來表示；

模組根樣式用 m-xx 來表示；

模組子元素則用m-xx p_element來選中

theme樣式則使用m-xx-theme來表示，並且通過m-xx-theme > p_element來重寫主題相關的css**;

smacc需要實現的兩個目標是：更加語義化的html和css，降低對特定html結構的依賴(注意並不是完全消除！這是乙個折中)

bem:(block element modifier)

這個是俄羅斯著名搜素引擎企業倡導的方法，其核心思想是元件化重用，對於smacss中的模組類css有參考意義。

css零星高階知識點

android 零星知識點記錄

Makefile零星知識持續更新中

東拼西湊 MATLAB一些零星知識

css零星高階知識點

android 零星知識點記錄

Makefile零星知識 持續更新中

東拼西湊 MATLAB一些零星知識

相關推薦

Makefile零星知識持續更新中