如何实现两栏布局
实现两栏布局一般指的是左边固定,右边自适应,这里给出几个案例给大家参考
- 直接使用 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 了文章来源：https://www.toymoban.com/news/detail-481026.html
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
css 的实现场景题还有很多,由于篇幅原因先写这些,后续会持续更新,欢迎关注公众号web 前端进阶文章来源地址https://www.toymoban.com/news/detail-481026.html
到了这里，关于CSS中常见的场景实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
