css之小技巧

2021-07-28 12:38:28 字數 741 閱讀 9880

css之小技巧

1.margin的計算規則

margin百分比都是相對於容器的寬度計算的,

例如:img div/*父元素*/

位於上60px,左60px

2.絕對定位元素的百分比margin

例如:img

位於上102.4px,距離祖先元素的距離

3.寬度2:1自適應矩形

.box

.box div

4.一側定寬的自適應布局

例如(width,float)+文字(margin-left:200px)
5.vertical-align:middle只有在父元素為table-cell或設定line-height時生效

6.inline-block元素之間產生的間距可以使用font-size:0解決

現代瀏覽器的最新版都支援inline-block,ie6、7不支援inline-block,但ie6、7可以通過 display:inline;zoom:1;來模擬。

7.去除滾動條 html

8.當沒有指定border-color的時候,預設使用color作為邊框色。

select option direction: lfrl,ltr 文字位於左還是右

10.文字兩端對齊 text-align:justify;

CSS之小技巧

css樣式設計小技巧 水平居中設定 行內元素 如果被設定元素為文字 等行內元素時,水平居中是通過給父元素設定 text align center 來實現的。水平居中設定 定寬塊狀元素 當被設定元素為塊狀元素時用 text align center 就不起作用了,這時也分兩種情況 定寬塊狀元素和不定寬...

CSS揭秘之《小技巧》

1 在增強網頁設計效果時,應該使用生成性內容,而不是依賴冗餘的標籤和。2 要把表單元素的字型設定為與頁面的其他部分相同,你並不需要重複指定字型屬性,只需利用 inherit 的特性即可 3 利用 css 自身的機制來組織回退樣式,而不是依賴 css hack 來實現 eg 正確的 組織方式應該是先寫...

CSS小技巧之盒子那點事兒

說起css盒子模型,很多人都會覺得不就是margin padding border width height那點事兒嗎,對,就說說這點事。css盒子模型的作用 決定盒子有多大,即能有多大的空間給元素用來展示,物件的邊界,留白,物件的大小,還有就是去其他元素的相對位置。注意事項 如果乙個盒子的寬度設定...