css中的流体布局是指当网页缩小或放大时，网页布局会随着浏览器的大小而改变。流体布局的优势是如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动。
流体布局：
简单来说就是网页缩小和放大时网页布局会随着浏览器的大小而改变！
（学习视频分享：css视频教程）
优势：
立即学习“前端免费学习笔记（深入）”；
页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白；
如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动；
即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展）。
劣势：
如果不对页面各个部分的宽度加以控制，那么页面设计会和预期的效果大相径庭，例如某些项目或元素挤压到一起，其周围出现意想不到的空隙；
如果用户的窗口非常宽，文本行就会很长，以至于难以阅读；
如果用户的窗口非常窄，单词可能会被挤压，导致每行只有几个单词；
如果一个固定宽度的元素位于一个不能容纳它的盒子里，那么这个元素就会溢出盒子。
举例：
下面的代码演示了流体布局，关键技术是设置宽度单位为百分比。
Liquid Layout * { color: #fff; text-align: center;} body { width: 90%; margin: 0 auto;} #content { overflow: auto;} #nav, #feature, #footer { margin: 1%;} .column1, .column2, .column3 { width: 31.3%; float: left; margin: 1%;} .column3 { margin-right: 0%;} li { display: inline; padding: 0.5em;} #nav, #footer { padding: 0.5em 0;} #feature, .article { color:#fff; height: 10em; margin-bottom: 1em; }软件开发，成就梦想
学编程，上利永贞网
Logo
功能
第一列
第二列
第三列
相关推荐：CSS教程
以上就是css中的流体布局是什么的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1616175.html
微信扫一扫 
支付宝扫一扫 
