使用過的CSS小技巧筆記

2021-07-10 10:18:47 字數 1864 閱讀 1762

1.實現兩個按鈕水平居中顯示:

讓兩個按鈕分別作品有浮動,然後調節左右margin就可以

兩個button標籤,id為login和register:

#login

#register

2.實現div或者img頭像畫成圓形並居中顯示:

img標籤的id為welcomeimg:

#welcomeimg

原文:**的方法

在曾經的"**ued招聘"中有這樣一道題目:

「使用純css實現未知尺寸的(但高寬都小於200px)在200px的正方形容器中水平和垂直居中。」

題目的難點在於兩點:

垂直居中;

(1)下面是乙個權衡的相對結構乾淨,css簡單的解決方法:

//外層div盒子的樣式:

.box

//裡面img的樣式:

.box img

(2)背景法

//最簡單的方法莫過於背景法了,但不利於動態匯入的

* div

(3)背景法2

//這種方法也很簡單,但需要加乙個的額外標籤

.qq

i .qq img

文字垂直居中的方法:

div

html 

body

4.@media響應式布局技巧

有時需要根據不同的裝置不同的螢幕尺寸設定不同的樣式來調整布局,@media正好可以靈活實現:

比如:@media screen and (min-width:1000px)

}

@media是語法標識,screen是對裝置的選擇,screen表示的是針對。。。的,and連線語句字段,括號裡對尺寸進行篩選,min-width:1000px指的是當螢幕尺寸寬度大於等於1000px時應用下面的樣式。

補充:media query中的not onlyall等關鍵字:

not: not是用來排除掉某些特定的裝置的,比如 @media notprint(非列印裝置)

only: 用來定某種特別的**型別。對於支援mediaqueries的移動裝置來說,如果存在only關鍵字,移動裝置的web瀏覽器會忽略only關鍵字並直接根據後面的表示式應用樣式檔案。對於不支援media queries的裝置但能夠讀取media type型別的web瀏覽器,遇到only關鍵字時會忽略這個樣式檔案。

all: 所有裝置,這個應該經常看到

還有其它一些:

media_type

裝置型別說明

all所有裝置

aural

聽覺裝置

braille

點字觸覺裝置

handled

便攜裝置,如手機、平板電腦

print

列印預覽圖等

projection

投影裝置

screen

顯示器、筆記本、移動端等裝置

tty如打字機或終端等裝置 tv

電視機等裝置型別

embossed

盲文印表機

直接在link中判斷裝置的尺寸,然後引用不同的css檔案:

media="screen and (min-width: 600px) and(max-width: 1000px)">

意思是當螢幕的寬度大於等於600px且小於等於1000px的時候,應用style.css

在media屬性裡:

小編使用CSS的8種技巧

在網上論壇上經常看到一些朋友對 css的提問,他們總是不能很好的控制 css,影響 css的效率發揮。今天整理了一下資料,下面我給大家說說 css的 8種技巧 一 使用 css縮寫 使用縮寫可以幫助減少你 css檔案的大小,更加容易閱讀。css縮寫的主要規則請參看 常用 css縮寫語法總結 這裡就不...

css知識筆記(五) css樣式設定小技巧

如果被設定元素為文字 等行內元素時,水平居中是通過給父元素設定text align center來實現的。如下 html 我是文字,哈哈,我想要在父容器中水平居中顯示。css 當被設定元素為塊狀元素時用 text align center 就不起作用了,這時也分兩種情況 定寬塊狀元素和不定寬塊狀元素...

常用的css小技巧

li first child li last child li nth child 4 width 200px word break break all text overflow ellipsis display webkit box 物件作為伸縮盒子模型顯示 webkit box orient ...