2021-07-28 响应式布局:左侧宽度固定右侧宽度自适应、双飞翼布局、圣杯布局

三种布局都是最先加载出主体。
双飞翼布局与圣杯布局都是 中间盒子宽度自适应,最先加载出主体
双飞翼布局与圣杯布局的不同之处在于:
双飞翼布局在主体内容中添加了一个div ,并对主体添加margin来使左右盒子不覆盖主体。
而圣杯布局并没有在主体中添加新的div,只是对整体添加左右填充、左右盒子添加相对定位,来达到效果。

左侧宽度自适应

body中需要先写出自适应宽度的div

	
"box">
"right">right
"left">left

style中

.right {
   
            height: 400px;
            width: 100%;
            background-color: yellow;
            float:left;
        }
        .left {
   
            height: 200px;
            width: 200px;
            background-color

你可能感兴趣的:(学前端)