css學習記錄

一，css 4種引用方式：

1，內聯：<style></style> 標籤

< stylex="」 > 屬性

2，外聯 css <link rel="stylesheet" href="./style.css」>

@import 在css文件中嵌套引用其他css文件

二，選擇器:

1,類名選擇器：

.className

2,標籤選擇器:

div

3,子類選擇器

div>.className

4,子代選擇器（.className是div的任意層級子類都可以找到，並不僅限為子類）

div .className

三，標籤高度：高度由其內部文檔流元素的高度的總和來決定。

文檔流解釋：文檔內元素的流動方向，1，內聯元素：從左往右如果遇到阻礙自動換行(允許單詞可以換行word-break:break-all)。2，塊級元素：從上往下。

四，脫離文檔流(在計算高度時不納入父標籤高度計算，起始位置在父標籤（0，0）開始)

方式：

1,{style：position: fixed;}

2，當前元素{style:position: absolute;} , 父類元素（參照元素）{style：position: relative;}

五，背景圖片自適應

{style: background-position: center center; （圖片位置居中）

background-size: cover; } （圖片大小適應當前控制項）

六，內聯元素不接受寬高，如：span。若想設置寬高則需要設置display：block

七，絕對位置（當脫離文檔流設置絕對位置時）

top:100% 表示： 當前元素距離父元素的頭部距離為父元素高度*100% ，也就是說在父元素的底部。

bottom：100% 表示：當前元素距離父元素的底部距離為父元素高度*100% ，也就是說在父元素的頭部。