在HTML5中如何设置屏幕百分比

html-css013

在HTML5中如何设置屏幕百分比,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>景安</title>

</head>

<style type="text/css">

.head{width: 1000pxheight: 200pxmargin:0 auto}

.head-a{width: 30%height: 200pxbackground: bluefloat: left}

.head-b{width: 70%height: 200pxbackground: orangefloat: right}

</style>

<body>

<div class="head">

<div class="head-a"></div>

<div class="head-b"></div>

</div>

</body>

</html>

我们可以使用width：30%和width：70%这样的形式来设置百分比

width和height属性是指你设置的宽度和高度，百分比指你设计的东西占屏幕大小的百分比。

例如你在写一个表格的时候：

<html>

<head></head>

<body>

<table border="1" width="80%" height="50%">

<tr>

<td>QQ</td>

<td>QQ</td>

<td>QQ</td>

</tr>

<tr>

<td>QQ</td>

<td>QQ</td>

<td>QQ</td>

</tr>

<tr>

<td>QQ</td>

<td>QQ</td>

<td>QQ</td>

</tr>

</table>

</body>

</html>

你通过调整百分比可以看到表格占总页面的大小的比例也随之改变！

希望以上对你有用！

1.左侧固定右侧自适应-定位 步骤:

左侧宽度写死——》定位——》给父元素设置左padding即可

右侧宽度不用设置(自适应)

2.浮动+触发BFC 拓展:想详细了解BFC戳这里 overflow:hidden 会触发盒子的BFC 触发BFC的盒子的特点: 解决margin的塌陷 清除浮动 ...