定位技巧
-
善用100%，在最右邊可以用left:100%實(shí)現(xiàn)他在最右邊。看到這個(gè)child出去了在最右邊
*{
padding: 0;
margin:0;
box-sizing:border-box ;
}
.parent{
display: flex;
border: 1px blue solid;
height: 100px;
width:300px;
}
.child{
display: flex;
border: 1px black solid;
height: 100px;
width:100px;
left:100%;
position: relative;
- 某些瀏覽器無(wú)top/left位置會(huì)有bug，所以一般都寫(xiě)上。
-
善用left和transform可以直接居中。
直接居中了
.child{
display: flex;
border: 1px black solid;
height: 100px;
width:100px;
left:50%;
position: relative;
transform:translateX(-50%)}
- white-space
代表了文字內(nèi)容換行與否。 - calc
可以讓%與px混用。eg：
buttom：calc（100%+20px） - 雖然body如果用border看不會(huì)鋪滿整個(gè)屏幕，但是background改變背景色還是會(huì)整個(gè)網(wǎng)頁(yè)而非border內(nèi)變色。
- 記住滾動(dòng)條是17px，如果做布局的時(shí)候發(fā)現(xiàn)有地方差17px就是滾動(dòng)條了
