实现两栏布局一般指的是左边固定,右边自适应,这里给出几个案例给大家参考
直接使用 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;
}
与第一种类似,只不过动态计算了 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: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 绘制三角形主要用到的是 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;
}
很简单,加个 border-radius 即可
div {
width: 0;
height: 0;
border: 100px solid;
border-color: red transparent transparent transparent;
border-radius: 50%;
}
正常情况下最小单位是 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 前端进阶
手机扫一扫
移动阅读更方便
你可能感兴趣的文章