一、流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值。流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
复制代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>流体布局</title> <style> body{ margin: 0; } .con a{ display: block; 25%; height: 100px; background-color: tomato; text-align: center; text-decoration: none; font-weight: bolder; color: white; line-height: 100px; float: left; } </style> </head> <body> <div class="con"> <a href="#">菜单</a> <a href="#">菜单</a> <a href="#">菜单</a> <a href="#">菜单</a> </div> </body> </html> 复制代码
如果给 a 标签加了 border，则布局混乱了，有以下两种解决方式：
方式1：calc()
可以通过计算的方式给元素加尺寸，比如： calc(25% - 4px);
复制代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>流体布局</title> <style> body{ margin: 0; } .con a{ display: block; calc(25% - 4px); /* 看这里 */ height: 100px; background-color: tomato; text-align: center; text-decoration: none; font-weight: bolder; color: white; line-height: 100px; float: left; border: 2px solid black; /* 看这里 */ } </style> </head> <body> <div class="con"> <a href="#">菜单</a> <a href="#">菜单</a> <a href="#">菜单</a> <a href="#">菜单</a> </div> </body> </html> 复制代码
方式2：box-sizing 设置为 border-box
- content-box 默认的盒子尺寸计算方式
- border-box 盒子的尺寸计算方式为从边框开始，盒子的尺寸、边框和内填充算在盒子尺寸内
复制代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>流体布局</title> <style> body{ margin: 0; } .con a{ display: block; 25%; height: 100px; background-color: tomato; text-align: center; text-decoration: none; font-weight: bolder; color: white; line-height: 100px; float: left; border: 2px solid black; /* 看这里 */ box-sizing: border-box; /* 看这里 */ } </style> </head> <body> <div class="con"> <a href="#">菜单</a> <a href="#">菜单</a> <a href="#">菜单</a> <a href="#">菜单</a> </div> </body> </html> 复制代码
二、响应式布局
使用媒体查询
复制代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>响应式布局</title> <style> body{ margin: 0; } .con div{ 23%; border: 2px solid black; background-color: tomato; height: 100px; margin: 1%; float: left; box-sizing: border-box; text-align: center; font-weight: bolder; color: white; line-height: 100px; } @media (max- 800px){ .con div{ 46%; margin: 2%; } } @media (max- 600px){ .con div{ 94%; margin: 3%; } } </style> </head> <body> <div class="con"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html> 复制代码