css day7 個人學習筆記

css-day7-個人學習筆記

一、浮動定位

1、清除浮動——清除當前元素前面的元素浮動所帶來的影響

clear：none（預設值，無清除效果）/ left（清除當前元素前面元素左浮動帶來的影響）/ right（清除當前元素前面元素右浮動帶來的影響）/ both（清除當前元素前面元素任何一種浮動方向所帶來的影響）

2、浮動元素為父元素高度帶來的影響——父元素的高度是以未浮動的子元素高度為準，如果乙個元素中所有的子元素全部都是浮動的，那麼該父元素的高度為 0。

解決父元素的高度問題方案：

a、直接設定父元素高度，弊端：必須知道父元素的高度；

b、讓父元素也浮動，弊端：對後續元素會產生影響；

d、在父元素中，增加空子元素到最後乙個位置處,並且設定其clear屬性為both，弊端：多乙個子元素在頁面上。

二、顯示

1、顯示方式——display：none（讓指定的元素不顯示並且不佔據頁面空間）/ block（將指定的元素顯示為塊級）/ inline（將指定的元素顯示為行內）/ inline-block（將指定的元素顯示為行內塊，多個元素能夠在一行內顯示）/ table（將指定的元素顯示為 table）

2、顯示效果

a、visibility屬性：visible（預設值，元素可見）/ hidden（元素不可見，但是佔據頁面空間）/ collapse（用在**元素上，刪除一行或一列時，不影響**整體布局。（display:none）和（visibility:hidden）區別：（display:none）脫離文件流，所以不佔據頁面空間；（visibility:hidden）只是改變可見性，並不脫離文件流，空間依然佔據。

b、opacity 屬性：改變元素的透明度，取值為從0.0(完全透明) ~ 1.0(完全不透明) 之間的數字。

c、vertical-align 屬性：在 td 中，設定文字的垂直對齊方式 / 設定行內塊元素兩邊文字的垂直對齊方式 / 設定兩端文字垂直對齊方式。vertical-align：top / middle / bottom / baseline（基線對齊）

3、游標——改變滑鼠在頁面(元素)中的狀態，cursor：default（預設）/ pointer（小手）/ crosshair（+）/ text （文字狀態 i）/ wait（等待）/ help（幫助）

三、列表

1、列表項標識——list-style-type：none （去點）/ disc （實心圓）

2、列表項影象——list-style-image：url()

3、列表項標識位置——list-style-position：outside（預設值）/ inside（將列表項標識的位置改為內容區域之內）

4、列表屬性——list-style：type url position；常用方式：list-style：none。

四、定位(相對，絕對，固定)

1、定位屬性

a、定位屬性——position：static（靜態的，預設值）/ relative（相對的）/ absolute（絕對的）/ fixed（固定定位）。注意：relative，absolute，fixed被稱之為 "已定位元素"

b、偏移屬性——改變元素在頁面中的位置，top / bottom / left / right：px(偏移距離)

c、堆疊順序——在已定位元素中調整堆疊順序，z-index：無單位的數字

2、定位 - 相對定位——元素會相對於它原來的位置偏移某個距離，元素原來所佔的空間會被保留。position：relative；配合 top / right / bottom / left 偏移屬性實現位置的微調

3、定位 - 絕對定位——絕對定位的元素會脫離文件流即不佔據頁面空間，會相對於離它最近的已定位的祖先元素去實現定位，如果沒有已定位的祖先元素，那麼就會相對於最初的包含塊去實現定位比如body或html。position：absolute；配合著 top / right / bottom / left 實現位置定位。特點：絕對定位元素會變成塊級元素，絕對定位元素的margin可以使用，預設情況下，auto會失效

4、堆疊順序——z-index：無單位的數值（數值越大，越靠前，預設是0，可以取負值，當前元素在頁面所有內容之下）

注意：只有已定位元素才能設定z-index；預設的堆疊順序是後來者居上；父子元素中，永遠都是子壓在父上,是不受z-index影響的。

五、彈性布局flex

1、採用flex布局的元素，稱為flex容器，他的所有子元素自動成為容器成員，稱為flex專案。

.box

2、容器屬性：flex-direction（排列方向）、flex-wrap（如何換行）、justify-content（主軸上對齊方式）、align-items（交叉軸上對齊方式），這些屬性設定在容器上。

.box .box .box

.box

3、專案屬性：order（專案排列順序）、flex-grow（放大比例），這些屬性設定在專案上。

.item

參考文章：flex布局語法教程

六、**查詢

1、常用裝置型別和寬度：超小螢幕手機（<768px）、小螢幕平板（>=768px）、中等螢幕桌面顯示器（>=992px）、大螢幕大桌面顯示器（>=1200px）

2、如何使用：

@media **型別 and （屬性設定）
例：@media screen and (min-width:768px) and (max-width:992px)
}

也可以通過呼叫相應的樣式檔案

3、頭部mate

一般情況下會設定頭部meta，如

width=device-width:寬度等於當前裝置的寬度 initial-scale:初始的縮放比列（預設設定為1.0） minimum-scale:允許使用者縮放到的最少比例（預設設定為1.0） maximum-scale:允許使用者縮放到的最大比例（預設設定為1.0）

user-scalable:使用者是否可以手動縮放（預設設定為no）

css day7 個人學習筆記

css day6 個人學習筆記

JUC個人學習筆記7 讀寫鎖

SAP BW個人學習筆記

css day7 個人學習筆記

css day6 個人學習筆記

JUC個人學習筆記7 讀寫鎖

SAP BW個人學習筆記

相關推薦