CSS小貼士(垂直居中和百分比下調整盒模型填充)

2021-07-05 06:07:52 字數 433 閱讀 1757

最近寫**用到的一些小技巧吧

先是垂直居中

position

: absolute;

top: 50%;

margin-top

: -350px;

height

: 700px;

首先設定絕對定位,之後top50%到中間,之後上移本身高度的一半便可以做到垂直居中

百分比調整和模型填充,我經常使用百分比,但有時候加入填充就會是內容超過外部div等,但又沒辦法很好的控制盒模型大小,因為是百分比,所以就可以使用下面**

box-sizing

:border-box;

padding

: 20px;

//將padding也計算到盒模型的大小上,媽媽再也不用擔心了

css的div垂直居中的方法,百分比div垂直居中

css3不定寬高水平垂直居中 只要三句話就可以實現不定寬高水平垂直居中。justify content center 子元素水平居中 align items center 子元素垂直居中 display webkit flex 在父級元素上面加上上面3句話,就可以實現子元素水平垂直居中。親測好用!先...

css百分比定位和百分比尺寸

只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素,無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素,如果沒有則相對於視窗。可以...

CSS百分比布局

曾經的 布局可能大家都有點陌生了吧,其實我也是基本上沒用過,自從web2.0的興起,重構的思想,這讓 布局就這樣消失了基本上,布局中有用到百分比布局的,在 布局 落下帷幕之後,基本上我們都是讓網頁固定為950 1000px,如果布局使用了百分比寬度 如90 耳邊很快就能聽到抱怨 我的顯示器上效果不太...