第二十三节 屏幕适配之流体布局 

 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>

 

posted @ 2020-03-14 16:30  kog_maw  阅读(130)  评论(0)    收藏  举报