relative 元素開啟相對定位：
如果不設定偏移量元素不會發生任何的變化,當元素開啟了定位以後，可以通過偏移量來設定元素的位置。（top,bottom,left,right）設定後它的位置只會影響自己，不會影響別人，不存在把別的塊元素擠下去。
相對定位是參照於元素在文件流中的位置進行定位的。
相對定位會提公升元素的層級。4.相對定位不會使元素脫離文件流，相對定位不會改變元素的性質。
absolute 元素開啟絕對定位：
如果不設定偏移量元素的位置不會發生變化。
元素會從文件流中脫離，絕對定位會改變元素的性質，行內變成塊，塊的寬度被內容撐開。
絕對定位會使元素提公升乙個層級。
絕對定位元素是相對於其包含塊進行定位的。正常情況下，包含塊就是離當前元素最近的祖先塊元素。開啟絕對定位的包含塊：包含塊就是離她最近的開啟了定位的祖先元素。如果所有的祖先元素都沒有開啟定位則根元素就是它的包含塊（html）。
fixed 元素開啟固定定位：
固定定位也是一種絕對定位，所以固定定位的大部分特點都和絕對定位一樣，唯一不同的是固定定位永遠參照於瀏覽器的視口進行定位。
sticky 元素開啟粘滯定位：
粘滯定位和相對定位的特點基本一致，不同點是粘滯定位可以在元素到達某個位置時將其固定（position:sticky; top:100px）。·
是css的又一種布局手段，它主要用來代替浮動來完成頁面的布局。
flex可以是元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變。
彈性容器：要使用彈性盒，必須先將乙個元素設定為彈性容器，我們通過 display來設定彈性容器。display:flex 設定塊級彈性容器。display:inline-flex 設定為行內的彈性容器。
彈性元素：彈性容器的子元素是彈性元素，彈性元素可以同時是彈性容器。
flex-direction 指定容器中彈性元素的排列方式，可選值如下：
row 預設值，彈性元素在容器中水平排列（左向右） -主軸 自左向右。
row-reverse 彈性元素在容器中反向水平排列（右向左） -主軸 自右向左。
column 彈性元素縱向排列（自上向下）。
column-reverse 彈性元素方向縱向排列（自下向上）。
主軸：彈性元素的排列方向稱為主軸。
側軸：與主軸垂直方向的稱為側軸。
彈性元素的屬性：
flex-grow 指定彈性元素的伸展係數，當父元素有多餘空間時，子元素如何伸展，父元素的剩餘空間，會按照比例進行分配。
flex-shrink 指定彈性元素的收縮係數，當父元素中的空間不足以容納所有的子元素時，對子元素進行收縮。
彈性容器上的樣式：
flex-wrap 設定彈性元素是否在彈性容器中自動換行 可選值：nowrap 預設值，元素不會自動換行；wrap 元素沿著輔軸方向自動換行；wrap-reverse 元素沿著輔軸反方向換行
justify-content 如何分配主軸上的空白空間（主軸上的元素如何排列） 可選值：flex-start 元素沿著主軸起邊排列；flex-end 元素沿著主軸終邊排列； center 元素居中排列；space-around 空白分布到元素兩側；space-evenly 空白分布到元素的單側。
螢幕是由乙個乙個發光的小點構成，這乙個個的小點就是畫素。
解析度：1920*1080說的就是螢幕中小點的數量。
在前端開發中畫素要分成兩種情況討論：css畫素和物理畫素。
物理畫素，上述所說的小點點就屬於物理畫素。
css畫素，編寫網頁時，我們所用畫素都是css畫素。瀏覽器在顯式網頁時，需要將css畫素轉換為物理畫素然後再呈現。乙個css畫素最終由幾個物理畫素顯式，由瀏覽器決定，預設情況下在pc端，乙個css畫素=乙個物理畫素。
視口就是螢幕中用來顯示網頁的區域。
可以通過檢視視口的大小，來觀察css畫素和物理畫素的比值。
預設情況下：視口寬度 1920px（css畫素），1920px（物理畫素） 此時，css畫素和物理畫素的比是1:1。
放大兩倍的情況：視口寬度 960px（css畫素），1920px（物理畫素） 此時，css畫素和物理畫素的比是1:2。
你所不太了解的位運算
與 或 非 異或這些運算子的含義就不過多介紹了，本篇文章主要通過乙個例題來介紹如何靈活使用位運算子，來給我們的演算法錦上添花。例題如下 演算法 如下 class solution return ones 解題思路如下圖所示 考慮數字的二進位制形式，對於出現三次的數字，各二進位制位出現的次數都是3的倍...
你真的了解css中的換行嗎
我們經常會遇到這樣的問題，純數字不能自動換行，連續輸入的英文不能換行，或者篇文章中一行到達容器的末端以後沒有在我們想要的位置進行換行，換行後會截斷某個單詞等問題，今天我們就說說css中關於換行的一些屬性，和使用技巧 在介紹之前我們先來看一下瀏覽器預設情況下文字的超出容器的處理情況 案例展示 通過上邊...
CSS中hover的使用細節
元素新增hover偽類選擇器時候一定要緊貼hover，不能有空格，有空格的話表示給該元素的所有子元素設定裡hover樣式 錯誤例子 ul hover ul的所有子元素設定了hover樣式正確例子 ul hover ul會顯示出想要的效果想要在父元素新增hover，在指定的子元素實現效果 子元素應該寫...