CSS中常见的场景实现

2023/6/13 18:22:45

本文主要是介绍CSS中常见的场景实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

如何实现两栏布局

实现两栏布局一般指的是左边固定,右边自适应,这里给出几个案例给大家参考

直接使用 calc 计算 right 宽度

.left {
  width: 200px;
  background: red;
  height: 100px;
  float: left;
}
.right {
  width: calc(100% - 200px);
  background: black;
  float: left;
  height: 100px;
}

利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）

.left {
  width: 200px;
  background: red;
  height: 100px;
  float: left;
}
.right {
  background: black;
  margin-left: 200px;
  width: auto;
  height: 100px;
}

利用 bfc 特性,将 right 设置成(overflow: hidden)触发 bfc(不会与浮动元素重叠)

.left {
  width: 200px;
  background: red;
  height: 100px;
  float: left;
}
.right {
  background: black;
  overflow: hidden;
  height: 100px;
}

flex 布局,将 right 的 flex 设置为 1,实现自动撑满父容器

.outer {
  display: flex;
}
.left {
  width: 200px;
  background: red;
  height: 100px;
}
.right {
  background: black;
  flex: 1;
  height: 100px;
}

定位实现

.outer {
  position: relative;
}
.left {
  width: 200px;
  background: red;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
}
.right {
  background: black;
  height: 100px;
  position: absolute;
  left: 200px;
  top: 0;
  right: 0;
}

如何实现三栏布局

一般是指两边固定宽度,中间自适应的布局

浮动实现

注意这里必须将中间的盒子 center 放到最后,因为如果放在第二位它会独占一行,下一个浮动元素将会换行

<div class="outer">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}
.right {
  float: right;
  width: 200px;
  height: 100px;
  background: pink;
}
.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: orange;
}

calc 实现

与第一种类似,只不过动态计算了 center 宽度

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}
.right {
  float: right;
  width: 200px;
  height: 100px;
  background: pink;
}
.center {
  height: 100px;
  width: calc(100% - 300px);
  margin-left: 100px;
  background: orange;
}

圣杯布局

给父容器设置左右 padding 留出空间,然后再给 left 和 right 设置负 margin 让其移上来

.outer {
  padding: 0 200px 0 100px;
}
.left {
  width: 100px;
  height: 100px;
  float: left;
  margin-left: -100px;
  background: red;
}
.center {
  height: 100px;
  float: left;
  background: orange;
  width: 100%;
}
.right {
  width: 200px;
  height: 100px;
  float: right;
  background: pink;
  margin-right: -200px;
}

双飞翼布局

双飞翼布局和圣杯布局的不同之处是通过给 center 套个盒子,通过它的 margin 来留出空间,注意,它要放在最前面

.left {
  width: 100px;
  height: 100px;
  float: left;
  margin-left: calc(-100% + 200px);

  background: red;
}
.center_wrap {
  margin: 0 200px 0 100px;
}
.center {
  height: 100px;
  float: left;
  background: orange;
  width: 100%;
}
.right {
  width: 200px;
  height: 100px;
  float: left;
  background: pink;
  margin-right: -200px;
}

<div class="outer">
  <div class="center_wrap">
    <div class="center"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

flex 布局

使用 flex 布局是非常容易实现的,两边设置宽度,中间 flex:1,宽度撑满整个容器

.outer {
  display: flex;
}
.left {
  width: 100px;
  height: 100px;
  background: red;
}
.center {
  height: 100px;
  flex: 1;
  background: orange;
}
.right {
  width: 200px;
  height: 100px;
  background: pink;
}

定位

.outer {
  position: relative;
}
.left {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  background: red;
}
.center {
  height: 100px;
  left: 100px;
  position: absolute;
  right: 200px;
  top: 0;
  background: orange;
}
.right {
  width: 200px;
  height: 100px;
  background: pink;
  position: absolute;
  right: 0;
  top: 0;
}

grid 布局

使用 grid 则是最简单的,给父元素设置：display：grid,grid-template-colums：左盒子宽度 auto 右盒子宽度,grid-template-rows：高度

.outer {
  display: grid;
  grid-template-columns: 100px auto 200px;
  grid-template-rows: 100px;
}
.left {
  background: red;
}
.center {
  background: orange;
}
.right {
  background: pink;
}

如何利用 css 实现一个三角形

CSS 绘制三角形主要用到的是 border 属性,border 属性是由三角形组成的，如果设置很粗的话就能看出来,比如

div {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: red black pink green;
}

所以可以利用这个特性来绘制三角形,如

div {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: red transparent transparent transparent;
}

如何利用 css 实现一个扇形

很简单,加个 border-radius 即可

div {
  width: 0;
  height: 0;
  border: 100px solid;
  border-color: red transparent transparent transparent;
  border-radius: 50%;
}

画一条 0.5px 的线

正常情况下最小单位是 1px,当然也有现代浏览器也支持 0.5px 的,为了考虑兼容性,有以下几种方案

采用 transform: scale()的方式

transform: scale(0.5, 0.5);

meta viewport

我们经常可以看到 meta viewport 中有initial-scale=1这样一个熟悉,其实它是用来规定页面的初始缩放的,可以设置成 0.5,这样页面的 1px 其实就是 0.5px 了

<meta name="viewport" content="width=device-width, initial-scale=0.5" />

css 的实现场景题还有很多,由于篇幅原因先写这些,后续会持续更新,欢迎关注公众号web 前端进阶

这篇关于CSS中常见的场景实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！