CSS的一些案例和坑

2022-08-10 06:54:11 字數 2192 閱讀 6215

<

style

type

="text/css"

>

ulli

style

>

<

body

>

<

ul>

<

li>

li>

<

li>

li>

<

li>

li>

<

li>

li>

<

li>

li>

ul>

body

>

執行**效果:

可以看到給li設定display: inline-block後元素排成了一行,但是每個之間出現間距;

如果將**這樣寫

<

style

type

="text/css"

>

ulli

style

>

<

body

>

<

ul>

<

li>

li><

li>

li>

<

li>

li>

<

li>

li><

li>

li>

ul>

body

>

執行**效果:

如果將li不換行寫成一行,css樣式**沒有更改,間距就消失了;

參看w3c對display屬性值的解釋:

inline : 預設。此元素會被顯示為內聯元素,元素前後沒有換行符。

block :此元素將顯示為塊級元素,此元素前後會帶有換行符。

inline-block : 行內塊元素。

個人理解出現這樣坑的原因:inline-block將元素顯示為行內塊元素時,block會讓元素前後帶有換行符,但因為已經inline內聯所以元素前後會出現間距;

(二) 填坑

方法一:在ul中設定乙個font-size屬性,但是此方法在safari瀏覽器無效;

<

style

type

="text/css"

>

ulli

style

>

方法二:margin-left設為負值調整間距

<

style

type

="text/css"

>

ulli

style

>

<

body

>

<

ul>

<

li>

li>

<

li>

li>

<

li>

li>

<

li>

li>

<

li>

li>

ul>

body

>

話不多說上**

<

style

type

="text/css"

>

divstyle

>

<

body

>

<

div>

div>

body

>

position:absolute將div元素絕對定位,是以div元素的左頂點相對於父級元素(目前父級元素為瀏覽器視窗)的左頂點定位,所以要讓div元素實現真正的垂直水平居中就需要讓元素的中心位置點相對父級元素絕對定位,這時就需要將margin-left,margin-top值設為負的高寬的一半,使中心位置點到原來的左上角點,這樣就實現div元素的垂直水平居中。

一些for迴圈案例

1 請在控制台輸出滿足如下條件的五位數 個位等於萬位 十位等於千位 個位 十位 千位 萬位 百位 2 請統計1 1000之間同時滿足如下條件的資料有多少個 對3整除餘2 對5整除餘3 對7整除餘2 3 一張紙的厚度大約是0.08mm,對折多少次之後能達到珠穆朗瑪峰的高度 8848.13公尺 4 計算...

Xgboost的一些坑

這兩天做乙個競賽,用xgboost作為工具來做了一些事情。主要的框架是 xgboost的python擴充套件。然後這過程中花了不少時間在解決各種xgboost的error上。大部分的問題都在這個函式裡 dtrain xgb.dmatrix train.txt dtest xgb.dmatrix te...

Cardboard的一些坑

之前用暴風魔鏡做vr移動端的開發,魔鏡的乙個很明顯的優點是它具有搖桿,這個搖桿使用起來很方便 接著就接觸了cardboard的移動端外掛程式,使用起來也是很方便,可以自己寫指令碼做凝視觸發,在開發過程中遇到兩個問題很是頭痛 問題一 網上的版本很多,有的只支援android,有的同時支援android...