html百分比布局缩放自适应

html-css012

html百分比布局缩放自适应,第1张

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

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

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

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

<div class="all">

<div class="boxall">

<div class="box1"></div>

<div class="box2"></div>

</div>

<div class="box3"></div>

</div>

CSS:

.all{width:100%；height:500pxmargin:auto}

.boxall{ width:500pxheight:500pxfloat:left}

.box3{margin-left:500pxheight:500px}

在box3里面再写内容，宽度设为100%，内容就是自适应了，