定位技巧
- 善用100%,在最右边可以用left:100%实现他在最右边。 看到这个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;
- 某些浏览器无top/left位置会有bug,所以一般都写上。
-
善用left和transform可以直接居中。
直接居中了
.child{
display: flex;
border: 1px black solid;
height: 100px;
width:100px;
left:50%;
position: relative;
transform:translateX(-50%)}
- white-space
代表了文字内容换行与否。 - calc
可以让%与px混用。eg:
buttom:calc(100%+20px) - 虽然body如果用border看不会铺满整个屏幕,但是background改变背景色还是会整个网页而非border内变色。
- 记住滚动条是17px,如果做布局的时候发现有地方差17px就是滚动条了
网友评论