css弹性布局总结

css静态页面搭建总结

弹性布局

弹性布局很方便,可以快速的搭建出想要的布局

1、header部分

效果图:

在这里插入图片描述

实现思路:

一个header部分html结构是使用一个版心里面两个div一个是logo另一个是nav导航,样式搭建好后,使用弹性布局,给版心加:display:flex;justify-content:space-between;两端对齐,刚好两个div占在版心左右两端,然后,如果想垂直居中的话再设置align-item:center;可以快速搭建出布局,不用使用浮动,不用使用margin去挤。

2、footer部分

效果图:

在这里插入图片描述

实现思路:

版心宽1200px,里面上下两个div,div里面分别有不同的内容,想要实现平均占满整个版心,并且每个内容两边都要有相同的间距,这个使用环绕对齐,justify:space-around;

弹性布局虽然很方便但是,他也是有缺点的,缺点是兼容问题

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_46475440/article/details/110872110