<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>fluid流体布局,横向百分比,竖向固定数值</title>
<style>
body{
margin: 0;
}
.box a{
width: calc(25% - 4px);
/* 使用calc()函数计算长度的时候,需要注意语法.
计算符号两边数字之间应有空格留白.
用以区分.
*/
border: 2px solid #000;
line-height:200px;
height: 200px;
float: left;
background: coral;
}
.box2 a{
width: 25%;
height: 200px;
border: 2px solid #000;
line-height: 200px;
text-align: center;
float: left;
background: khaki;
box-sizing: border-box;
}
/*
在使用流体布局的时候:
1.calc计算减去边框
2.直接设置盒子大小 box-sizing:border-box;(意为盒子大小包含边框大小)
两种方法相比较, 第二种方法更为方便,且兼容性更好.
多数应该使用第二种方法.
当使用第一种方法的时候要查看border对整体大小的影响,以及margin叠加.
*/
</style>
</head>
<body>
<div class="box">
<a href="#">网址:1</a>
<a href="#">网址:2</a>
<a href="#">网址:3</a>
<a href="#">网址:4</a>
</div>
<div class="box2">
<a href="#">网址:(1)</a>
<a href="#">网址:(2)</a>
<a href="#">网址:(3)</a>
<a href="#">网址:(4)</a>
</div>
</body>
</html>