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 /*width: 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>
