1.css实线左右布局
使用float,在子元素中分别加入float,使其子元素脱离父元素的文档流,left是向左放置,right是向右放置。
需要注意的是要在父元素加一个clearfix清除浮动。
2.css实现左中右
用box-sizing设置为border-box,然后配合padding,给左右留固定的宽度即可。
举例说明:
<div style="display:inline-block;width:100%;">
<div style="float: left; width:100px;">
左边
</div>
<div style="float: left;box-sizing:border-box;width: 100%;padding-left: 150px;margin-left: -150px;">
中间
</div>
<!- 此处float等于left只是为了让它浮动,处在第三个节点,已经是布局的右边 ->
<div style="float: left; width:50px;">
右边
</div>
</div>
3.css水平居中
设置固定宽度width,然后margin左右的宽度设置为auto。
4.css垂直居中
可以给父元素添加一个伪元素before
举例:
::before{
content: ";
display:inline-block;
vertical-align:middle;
height:100%;
}