設定乙個元素垂直居中

1、如何設定乙個元素垂直居中？

1、如果是單行文字設定line-height等於height 實現垂直居中

2、如果是高度已知的元素，並且還要使用絕對定位position:absolute，使top:50%,margin-top:元素一半高度的負值。

3、給元素開啟絕對定位，設定元素的margin:auto , top :0 , bottom:0 ;

2、懶載入的實現

1、給目標元素指定一張佔位圖，將真實的鏈結儲存在自定義屬性中（data-src），

監聽scroll事件，當出現在可視區時，將data-src值賦值給src，載入，在未載入時，用alt 屬性，在影象無法顯示時的替代文字 imgs[i].src = imgs[i].getattribute('data-src');

3、簡述**查詢的作用

1、針對不同的螢幕尺寸設定不同的樣式，特別是針對於響應式頁面非常有用。語法：@media screen and (**特徵)

例：@media screen and(max-width:900px)

**的意思是當**型別小於或者等於指定寬度時body的樣式生效

2、**查詢可以查詢當前屬於哪種裝置，讓網頁能夠在不同的裝置下正常預覽，**查詢將不同的裝置劃分為不同的型別(例如：all 所有的裝置 print 列印裝置 screen 電腦螢幕，平板電腦，智慧型手機)，可以設定不同的**特徵(寬高最大寬度最大高度最小寬度最小高度橫豎屏模式)，**查詢的語法關鍵字，目的是將**型別和**特徵連線到一塊，進行裝置檢測(and 將多個**特性連線到一塊，相當於且 not 排除某個**特性相當於非 only指定某個特定的**型別)

4、css3新增了哪些特徵

1、邊框 border-radius:為元素設定圓角邊框

2、陰影 box-shadow :向盒子新增乙個或者多個陰影

語法box-shadow ：水平位移垂直位移模糊半徑陰影顏色

3、邊框影象：border-image:設定邊框影象

border-image-source:邊框的路徑

border-image-slice:邊框向內偏移

border-image-width:邊框的寬度

border-image-outset:邊框影象區域超出邊框的量

border-image-repeat:影象邊框是否應該平鋪(repeate)、鋪滿(round)或者拉伸(stretch)

4、background-size:背景尺寸

5、漸變background:linear-gradient(方向(to right 從左向右漸變 to top 從下向上漸變),開始顏色，結束顏色)線性漸變

6、徑向漸變 background:radial-gradient(圓的型別（ellipse:預設橢圓形 circle 圓形）漸變的大小 at 漸變的位置，開始顏色，結束顏色)

漸變的大小：farthest-corner(預設) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

closest-corner ：指定徑向漸變的半徑長度為從圓心到離圓心最近的角

farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

7、word-break定義如何換行:normal 使用瀏覽器預設的換行規則

break-all 允許在單詞內換行

keep-all 只能在半形空格或連字元處換行

8、word-wrap允許長的內容可以自動換行：normal 只在允許的斷字點換行（瀏覽器保持預設處理）

:break-word 在長單詞或url位址內進行換行

9、text-shadow :文字陰影

語法：text-shadow :水平位移垂直位移 [模糊半徑陰影顏色] ;

10、transform:應用於元素的2d或3d轉換。允許將元素旋轉，縮放，移動，傾斜等。　　

2d轉換方法

rotate(angle)：定義 2d 旋轉，在引數中規定角度。

translate(x,y)：指定元素在二維空間中的位移。x軸方向向右，y軸方向向下。

translatex(n)：指定元素在x軸中的位移。

translatey(n)：指定元素在y軸中的位移。

scale(n)：定義 2d 縮放轉換。

scalex(n)：定義 x 軸方向的縮放轉換。

scaley(n)：定義 y 軸方向的縮放轉換。

3d轉換方法

translate3d(x,y,z)：指定元素在三維空間中的位移。x軸方向向右，y軸方向向下，z軸方向向你。

translatex(x)：指定元素在x軸中的位移。

translatey(y)：指定元素在y軸中的位移。

translatez(z)：指定元素在z軸中的位移。

scale3d(x,y,z)：定義 3d 縮放轉換。

scalex(x)：通過設定 x 軸的值來定義縮放轉換。

scaley(y)：通過設定 y 軸的值來定義縮放轉換。

scalez(z)：通過設定 z 軸的值來定義縮放轉換。

rotate3d(x,y,z,angle)：定義 3d 旋轉。

rotatex(x)：定義沿著 x 軸的 3d 旋轉。

rotatey(y)：定義沿著 y 軸的 3d 旋轉。

rotatez(z)：定義沿著 z 軸的 3d 旋轉。

過渡transition:設定元素過渡效果

transition-property:過渡屬性名

transition-duration:規定完成過渡效果需要花費的時間

transition-timing-function:指定切換效果的速度

transition-delay:指定何時將開始切換效果

動畫@keyframes規則：使用@keyframes規則，你可以建立動畫。

語法：@keyframes animationname }

animation:為元素新增動畫，是乙個簡寫屬性。　　

animation-name：為 @keyframes 動畫名稱。

animation-duration：動畫指定需要多少秒或毫秒完成。

animation-timing-function：設定動畫將如何完成乙個週期。　

11、transform-origin：允許更改轉換元素的位置。2d轉換元素可以改變元素的x和y軸。 3d轉換元素可以更改元素的z軸。

語法：transform-origin: x-axis y-axis z-axis;

12、transform-style：指定巢狀元素是怎樣在三維空間中呈現。

：flat 　　所有子元素在2d平面呈現

：preserve-3d 　　所有子元素在3d空間中呈現

5、display:none 和 visibility:hidden的區別

display:none 不為被隱藏的物件保留其物理空間，即該物件在頁面上徹底消失，通俗來說就是看不見也摸不到。

visible:hidden　　使物件在網頁上不可見，但該物件在網頁上所佔的空間沒有改變，通俗來說就是看不見但摸得到。

6、less的作用？scss(sass),stylus的作用？

less sass stylus 預處理器是一種語言,用來為 css 增加一些程式設計的的特性，無需考慮瀏覽器的相容性問題，例如可以在 css 中使用變數、簡單的程式邏輯、函式等等在程式語言中的一些基本技巧，可以讓css 更見簡潔，適應性更強，**更直觀等諸多好處。

sass 和 less 都使用的是標準的 css 語法，因此可以很方便的將已有的 css **轉為預處理器**，預設 sass 使用 .sass 副檔名，而 less 使用 .less 副檔名。

sass讓人們受益的乙個重要特性就是它為css引入了變數。你可以把反覆使用的css屬性值定義成變數，然後通過變數名來引用它們，而無需重複書寫這一屬性值。

在less檔案中，當乙個值需要反覆使用時，可以通過@符號定義變數。已經被賦值的變數以及其他的常量（如畫素、顏色等）都可以參與運算。

stylus對變數是沒有任何設定的，可以是以$開頭，或者任何的字元，而且與變數之間可以用冒號，空格隔開，但是在stylus中不能用@開頭

如果用 css 預處理器，就可以少寫很多單詞，而且父子節點關係一目了然，並且sass，less，stylus都支援。在 css 預處理器中還是可以進行樣式的計算

當需要為多個元素定義相同樣式的時候可以考慮使用繼承的做法.

設定乙個元素垂直居中

設定乙個元素在容器中垂直居中

如何垂直居中乙個元素

如何垂直居中乙個元素

設定乙個元素垂直居中

設定乙個元素在容器中垂直居中

如何垂直居中乙個元素

如何垂直居中乙個元素

相關推薦