1 <!-- 流体布局：就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以用样式中的计算函数calc()来设置宽度，或者使用box-sizing属性将盒子设置从边线计算盒子的尺寸 2 calc()：可以同计算的方式给元素加尺寸，比如：width：calc(25% - 4px)； 3 box-sizing 4 1、content-box 默认的盒子尺寸计算方式 5 2、border-box 设置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内框填充算在盒子内 --> 6 7 <!DOCTYPE html> 8 <html lang="en"> 9 <head> 10 <meta charset="UTF-8"> 11 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 12 <title>Document</title> 13 <style type="text/css"> 14 body{ 15 margin: 0; 16 } 17 18 .con a{ 19 display: block; 20 width: 25%; 21 /* calc(25% - 4px);*/ /* 第一种解决方式 */ 22 23 height: 100px; 24 background-color: gold; 25 text-align: center; 26 line-height: 100px; 27 float: left; 28 text-decoration: none; 29 color: #333; 30 font-size: 14px; 31 border: 2px solid #000; 32 box-sizing: border-box; /* 第二种解决方式 */ 33 } 34 </style> 35 </head> 36 <body> 37 <div class="con"> 38 <a href="#">菜单文字</a> 39 <a href="#">菜单文字</a> 40 <a href="#">菜单文字</a> 41 <a href="#">菜单文字</a> 42 </div> 43 </body> 44 </html>