当前位置：首页 > news >正文

CSS手写题

news 2025/7/15 7:02:16

html, body {

height: 100%;

margin: 0;

}

让页面元素可以使用百分比高度，并清除浏览器边距，确保布局从视口左上角开始，避免不必要的滚动条或者空白边距

1.两栏布局

<body><div class="left">红色</div><div class="right">蓝色</div>
</body>.left{height: 100%;width: 200px;float: left;background-color: red;
}.right{height: 100%;background-color: blue;
}

<body>
<div class="min"><div class="left">红色</div><div class="right">蓝色</div>
</div>
</body>.min{height: 100%;position:relative;
}
.left{position: absolute;height: 100%;width: 200px;background-color: red;
}
.right{height: 100%;background-color: blue;margin-left: 200px;
}

<body>
<div class="min"><div class="left">红色</div><div class="right">蓝色</div>
</div>
</body>.min{display: flex;height: 100%;
}
.left{height: 100%;width: 200px;float: left;background-color: red;
}.right{flex:1;height: 100%;background-color: blue;
}

2.三栏布局

<div class="container"><div class="left">红色</div><div class="min">黄色</div><div class="right">蓝色</div>
</div>.container{display: flex;height: 100%;
}
.left{width: 200px;background-color: red;
}
.min{flex:1;background-color: yellow;
}
.right{width: 200px;background-color: blue;
}

<div class="container"><div class="left">红色</div><div class="min">黄色</div><div class="right">蓝色</div>
</div>.container{position: relative;height: 100%;
}
.left{top: 0;//距离其定位父容器的顶部为0像素left: 0;position: absolute;width: 200px;background-color: red;height: 100%;
}
.min{margin-left: 200px;margin-right: 200px;background-color: yellow;height: 100%;
}
.right{top: 0;right: 0;position: absolute;width: 200px;background-color: blue;height: 100%;
}

3.圣杯布局和双飞翼布局

两者目标：

实现左右两栏宽度固定，中间栏宽度自适应；
保证中间栏内容优先渲染（SEO 和用户体验更好）；
三栏等高布局，即任意一栏高度变化，其他栏同步撑高。

<div class="content"><div class="center"><h1>主区域</h1></div><div class="left"><h1>左区域</h1></div><div class="right"><h1>右区域</h1></div>
</div>.content{padding-left: 300px;    // 给左盒子留位置padding-right: 200px;   // 给右盒子留位置overflow: hidden;       // 父级添加overfloat属性 清除浮动 让父盒子拥有高度
} 
// 三个盒子都要浮动
.center,.left,.right{float: left;
}
.center{background-color: pink;// 中间盒子宽度必须是百分之百width: 100%;height: 100px;
}
.left{background-color: skyblue;height: 100px;width: 300px;margin-left: -100%;right: 300px;position: relative;
}
.right{background-color: greenyellow;height: 100px;width: 200px;margin-right: -200px;
}

三栏都使用 float: left 浮动；
中间栏 width: 100%，左右栏固定宽度；
使用 负 margin 将左右栏拉到中间栏两侧；
父容器设置 padding-left 和 padding-right 为左右栏腾出空间；
左右栏使用 position: relative + left/right 偏移到正确位置
conten放在最前面保证最先加载

<div class="main-wrap"><div class="main">中间内容</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>.main-wrap {width: 100%;float: left;
}.main {margin-left: 200px;margin-right: 150px;height: 200px;background: red;
}.left,
.right {float: left;height: 200px;
}.left {width: 200px;background: green;margin-left: -100%;
}.right {width: 150px;background: blue;margin-left: -150px;
}