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

<!DOCTYPE html>

<head>

</head>

.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>

</body>

</html>

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

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

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

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

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

原理：

先给父级<div>设置宽度（像素）

然后再子<div>里，设置百分比，如图示。

代码原件：

复制到<body></body>之间使用即可。

欢迎分享，转载请注明来源：内存溢出

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