設定乙個元素垂直居中

2022-06-18 15:00:21 字數 4418 閱讀 1226

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 預處理器中還是可以進行樣式的計算

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

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

1 如果只有一行元素,設定text align center line height 容器高度 2 如果有多行元素 步驟一 給容器加上text align center 步驟二 給當前元素轉成行內塊元素 display inline block 再給當前元素加上vertical align midd...

如何垂直居中乙個元素

前兩天剛寫完如何水平居中乙個元素,今天把垂直的情況補上。相比於水平居中,垂直居中的情況就少多了。1 行級元素的垂直居中 這種情況比較簡單,只需要設定line height和height相等即可,也沒什麼可延伸的。2 塊級元素的垂直居中 2.1 父元素高度不固定 其實我認為這種情況不用討論,正常情況下...

如何垂直居中乙個元素

前兩天剛寫完如何水平居中乙個元素,今天把垂直的情況補上。相比於水平居中,垂直居中的情況就少多了。1 行級元素的垂直居中 這種情況比較簡單,只需要設定line height和height相等即可,也沒什麼可延伸的。2 塊級元素的垂直居中 2.1 父元素高度不固定 其實我認為這種情況不用討論,正常情況下...