为了账号安全,请及时绑定邮箱和手机立即绑定

css-布局

标签:
Html/CSS

css基础的知识看完后,我们就要学习如何布局,这里详细的总结一下最近了解的布局方式。

一  单列水平居中

1.子元素为display:inline-block时,父元素只需设置text-align:center即可。


webp


webp

2,当子元素为块级元素,且有宽度width时,使用margin:0 auto;


webp

3,采用绝对定位

webp

二 两栏布局,采用一种最简单的,float+margin


webp

webp

三 两栏布局(比较简单的浮动方法)


webp

四垂直居中

1.把文字包裹在一个inline-block元素中vertical-align middle,外部元素line-height等于高度height即可

2.采用绝对定位与相对定位



webp

webp

3.采用flex盒子布局,在父级元素上添加属性

webp



作者:show_萧佩
链接:https://www.jianshu.com/p/f4c41f8cfb32


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
JAVA开发工程师
手记
粉丝
205
获赞与收藏
1011

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消