CSS手写题

发布于：2025-07-16 ⋅ 阅读:(20) ⋅ 点赞:(0)

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;
}
  1. 三栏都使用 float: left 浮动；
  2. 中间栏 width: 100%，左右栏固定宽度；
  3. 使用 负 margin 将左右栏拉到中间栏两侧；
  4. 父容器设置 padding-left 和 padding-right 为左右栏腾出空间；
  5. 左右栏使用 position: relative + left/right 偏移到正确位置
  6. 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;
}
  1. 中间栏外面再包一层 .main-wrap，设置为 width: 100%；
  2. 三栏都使用 float: left；
  3. 中间栏通过 margin-left 和 margin-right 为左右栏留出空间；
  4. 左右栏使用 负 margin 移动到中间栏两侧；
  5. 不需要使用 position: relative

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布