CSS 流体布局
流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩。这种设计通常使用百分数。
优势
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。- 页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白；
- 如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动；
- 即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展）。
劣势
- 如果不对页面各个部分的宽度加以控制，那么页面设计会和预期的效果大相径庭，例如某些项目或元素挤压到一起，其周围出现意想不到的空隙；
- 如果用户的窗口非常宽，文本行就会很长，以至于难以阅读；
- 如果用户的窗口非常窄，单词可能会被挤压，导致每行只有几个单词；
- 如果一个固定宽度的元素位于一个不能容纳它的盒子里，那么这个元素就会溢出盒子。
由于流体布局可以伸展到浏览器窗口的整个宽度，产生难以阅读的长文本行，所以有些流媒体布局只让页面的一部分伸展和收缩。
在页面的其它部分则限制最大和最小宽度。
下面的代码演示了流体布局，关键技术是设置宽度单位为百分比。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html> < html > < head > < title >Liquid Layout</ title > < style type = "text/css" > * { 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; } </ style > </ head > < body > < h1 style = "color:#706fd3" >软件开发，成就梦想</ h1 > < h2 >< a href = "https://www.liyongzhen.com/" style = "color:#000" >学编程，上利永贞网</ a ></ h2 > < div id = "header" > < h1 >Logo</ h1 > < div id = "nav" > < ul > < li >< a href = "" >首页</ a ></ li > < li >< a href = "" >产品</ a ></ li > < li >< a href = "" >服务</ a ></ li > < li >< a href = "" >关于我们</ a ></ li > < li >< a href = "" >联系我们</ a ></ li > </ ul > </ div > </ div > < div id = "content" > < div id = "feature" > < p >功能</ p > </ div > < div class = "article column1" > < p >第一列</ p > </ div > < div class = "article column2" > < p >第二列</ p > </ div > < div class = "article column3" > < p >第三列</ p > </ div > </ div > < div id = "footer" > < p >© Copyright 2019</ p > </ div > </ body > </ html > |
更多精彩
