css小技巧(一)

2021-08-20 14:22:15 字數 1081 閱讀 8996

#box

如**演示:

box-shadow

: 00

010px #665, 00

020px blue, 00

030px red;

發生特點:

1. 塊級元素(不包括浮動元素和絕對定位元素)

2. 只發生在和當前文件流垂直的方向上(預設情況下文件流是水平的,writing-mode可以修改流方向)。

修復邊距合併問題:

1. margin-top合併

1.1. 父元素設定為塊狀格式化上下文元素(overflow:hidden;float:left;position:absolute;)

1.2. 父元素設定border-top值

1.3. 父元素設定padding-top值

1.4. 父元素和第乙個子元素之間新增內聯元素進行分割。(對第乙個元素新增display:inline-block/inline-flex/inline-table;)

2. margin-bottom合併

2.1. 父元素設定為塊狀格式化上下文元素

2.2. 父元素設定border-bottom值

2.3. 父元素設定padding-bottom值

2.4. 父元素設定height/min-height/max-height

最後記住邊距合併其實對於排版來說其實是有一定的好處的。並不完全不可取。

.spite-bg

指定background-size為雪碧圖的等比例縮放後的大小,

通過background-positon:x y;來調整的顯示位置,預設情況下座標原點(左上角是 0% 0%。右下角是 100% 100%)

eg: background-position: 0% 0%;

background-position: 0px 0px;

background-position: top/center/bottom left/center/right;

CSS之小技巧

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

css之小技巧

css之小技巧 1.margin的計算規則 margin百分比都是相對於容器的寬度計算的,例如 img div 父元素 位於上60px,左60px2.絕對定位元素的百分比margin 例如 img 位於上102.4px,距離祖先元素的距離3.寬度2 1自適應矩形 box box div4.一側定寬的...

CSS實用小技巧

1 不要使用過小的做背景平鋪。這就是為何很多人都不用 1px 的原因,這才知曉。寬高 1px 的平鋪出乙個寬高 200px 的區域,需要 200 200 40,000 次,占用資源。2 無邊框。推薦的寫法是 border none 哈哈,我一直在用這個。border 0 只是定義邊框寬度為零,但邊框...