Css細節個人總結(一)
Css 知識點總結
css中選擇器的權重大小：
- 萬用字元選擇器（*）—— 0
- 標籤選擇器、偽元素選擇器（::after ,::before）—— 1
- 類選擇器、偽類選擇器、屬性選擇器 —— 10
- id選擇器 —— 100
- 行內樣式 —— 1000
- ！important —— 無窮
對於定義樣式的三種方式，以及權重的大小關係
-
權重比較：行內樣式 >內部樣式>外部樣式
-
行內樣式：例如
-
內部樣式：例如
-
外部樣式：例如
HTML中定義寬高六個屬性值
- width、height、min-height、max-height、min-width、min-height
-
min-width 一般定義在外層的包裹容器中，當元素的寬度小於這個最小寬度時，瀏覽器會顯示橫向的滾動條
-
min-height 設定元素盒子的最小高度，元素中的內容沒有達到最小的高度的會預設顯示最小的高度值，當元素中的內容超過最小高度時，元素的高度將會自動被撐開變高
-
max-height 設定元素的最大高度，這個屬性的使用場景一般搭配著overflow屬性一起使用。
-
overflow屬性常用的三個屬性值：
overflow：hidden ; auto ; scroll
font-weight 字型粗細
lighter； normal； bold； bolder
數值範圍：100~900
font-style 字型樣式 italic oblique normal
設定字型的三種方式，以及各自的用法不同點的比較
-
ont-style : italic
-
font-style : oblique
-
em 標籤
上述的三種方式都可以設定文字的樣式為斜體，但是各自的關注點會有略微的不同：
italic 可以設定某些字型的樣式為斜體（有些個別的不行）
oblique 可以強制的將文字傾斜
em 標籤，雖然瀏覽器預設的將這個標籤中的內容設定為斜體進行顯示，但是em標籤的側重點並不是改變字型的樣式，而是語義化。目的是進行強調，告訴瀏覽器這是一個強調的地方。
border 邊框（複合屬性）
border:1px solid red; （複合）
（拆解）
border-width : 1px
border-style : solid
border-color : red
注意：border-width也是一個複合屬性，單獨跟上一個值則預設置的是上下左右的border-width ,border-width : 2px 10px ;跟上兩個值，設定的為上下邊框為2px 左右邊框為10px；跟上三個值：border-width : 1px 2px 3px 設定的為上1px 左右 2px 下3px；
跟上四個值：border-width:1px 2px 3px 4px 設定的方向分別為上、右、下、左
案列：利用border的複合屬性繪製一個三角形(角的方向朝右)
div {
width:0;
height:0;
border-widht:30px; // 一個值預設設定的了上下左右的寬度
border-color:transparent transparent transparent red
border-style: solid
}
text-indent 文字縮排
運用場景
input 標籤的游標定位的位置
文字內容的字型縮排，通常配合em 單位進行縮排
em 是根據當前元素中的文字大小的值進行變化調整的，是一個相對值，如果沒有手動自己更改文字的字型大小，則1em 預設採用瀏覽器的預設字型的大小進行設定。1em=16px
單行文字截斷和顯示省略號的三大件
使用場景：在一個固定寬度的容器盒子中，需要顯示一大段的文字內容，預設一行顯示不完，瀏覽器會自動換行顯示。
需要使用到的屬性
-
white-space : nowrap;// 強制文字內容不換行
-
overflow ：hidden; // 超出部分隱藏
-
text-overflow : ellipsis; // 文字部分超出變為省略號
display : none 和 visibility : hidden 的區別？
總結：visibility : hidden 保留被隱藏元素所佔據的HTML的文件空間
display : none 不保留元素的HTML的文件空間，HTML中沒有這個元素
vertical-align 使用的場景
vertical-align 是用來解決行內元素和行內塊級元素的對齊方式的，對於block元素並不會起到對齊的效果，vertical-align的屬性值為 top、bottom、middle、具體的畫素值。
多種場景下的文字垂直居中的解決方式？
在固定寬高的塊級元素中裡面的單行文字水平垂直居中：
text-align : center
line-height: 容器的高度
在固定寬高的塊級元素中實心多行文字的垂直居中：