前言
曾经何时,听到某人讲过。写静态页面就多试试一定可以试出来的,处理兼容性就多在几个其他浏览器上试试就好了(这样做适合新手)。
正文
我还真按照某人所说去这样写Css了。然后要实现这样一个效果:
就写出这样的代码:
body{
margin:0;
background-color: orange;
.content{
width: 750px;
height: 280px;
background-color: blue;
&__footer1{
float: left;
width: 375px;
height: 20px;
background-color: blue;
border-radius: 0 0 0 100%;
}
&__footer2{
float: left;
width: 375px;
height: 20px;
background-color: blue;
border-radius: 0 0 100% 0;
}
}
}
这样代码是可以呈现出效果。1.可是使用了太多额外的标签了,影响DOM树的渲染和我们后期的维护以及控制这个效果位置也是比较难。2.并且高度写死,我们换一个其他宽高就不可以使用了。
改进1:
@content-hight:190px;
@border-radius-hight:280px - 190px;
body{
margin:0;
.content{
box-sizing: border-box;
width: 750px;
height: @content-hight;
padding-top: @content-hight;
margin:10px auto;
margin-bottom: @border-radius-hight;
background-color: blue;
&::before{
content: "";
display: inline-block;
width: calc(100% / 2);
height: @border-radius-hight;
background-color: blue;
border-radius: 0 0 0 100%;
}
&::after{
content: "";
display: inline-block;
width: calc(100% / 2);
height: @border-radius-hight;
background-color: blue;
border-radius: 0 0 100% 0;
}
}
}
div:nth-of-type(2){
background-color: pink;
}
这里使用了伪元素来代替了额外的标签,可是需要我们来定3个地方的长度,分别是上部分的高,上部分的宽,下部分的高。这时组长不满意了。实现个效果还要我定3个长度??
改进2:
@content-height:340px;
body{
margin:0;
.content{
box-sizing: border-box;
width: 1000px;
height: @content-height;
margin:10px auto;
margin-bottom:calc(@content-height * 0.45);
background-color: blue;
&::before{
content: "";
display: inline-block;
width: calc(100% / 2);
height: calc(100% * 0.45);
background-color: blue;
border-radius: 0 0 0 100%;
transform: translateY(calc(100% * 2.2));
}
&::after{
content: "";
display: inline-block;
width: calc(100% / 2);
height: calc(100% * 0.45);
background-color: blue;
border-radius: 0 0 100% 0;
transform: translateY(calc(100% * 2.2));
}
}
}
div:nth-of-type(2){
background-color: pink;
}
经过测量UI图片可以发现,这个效果的上半部分与下半部分的高度比例大概是6.9比3.1的。这个很接近黄金比例6.67比3.33了呀。。。。。。。。那么我们就可以通过上半部分的高度推出下半部分的高度了。那么我们只有设置上半部分的宽高就可以了。
@content-height:340px;
body{
margin:0;
.content{
box-sizing: border-box;
width: 1000px;
height: @content-height;
margin:10px auto;
margin-bottom:calc(@content-height * 0.45);
background-color: blue;
&::before{
content: "";
display: inline-block;
width: calc(100% / 2);
height: calc(100% * 0.45);
background-color: blue;
border-radius: 0 0 0 100%;
transform: translateY(calc(100% * 2.2));
}
&::after{
content: "";
display: inline-block;
width: calc(100% / 2);
height: calc(100% * 0.45);
background-color: blue;
border-radius: 0 0 100% 0;
transform: translateY(calc(100% * 2.2));
}
}
}
div:nth-of-type(2){
background-color: pink;
}
可是这样实现了,还是不好,应该如果其他人看我写的less 一定会迷糊,这个0.45 是什么?? 2.2又是什么??
那么我们可以继续优化:
@content-height:340px;
body{
margin:0;
.content{
box-sizing: border-box;
width: 1000px;
height: @content-height;
margin:10px auto;
margin-bottom:calc(@content-height * (3.1 / 6.9));
background-color: blue;
&::before{
content: "";
display: inline-block;
width: calc(100% / 2);
height: calc(100% * (3.1 / 6.9));
background-color: blue;
border-radius: 0 0 0 100%;
transform: translateY(calc(100% * (6.9 / 3.1) - 0.5px));
}
&::after{
content: "";
display: inline-block;
width: calc(100% / 2);
height: calc(100% * (3.1 / 6.9));
background-color: blue;
border-radius: 0 0 100% 0;
transform: translateY(calc(100% * (6.9 / 3.1) - 0.5px));
}
}
}
div:nth-of-type(2){
background-color: pink;
}
这里使用transform来移动伪元素,我们也可以使用margin实现。其中:
transform: translateY(calc(100% * (6.9 / 3.1) - 0.5px));
-0.5px 因为要考虑到舍入。然后看看兼容性,发现其实如果不支持CSS3的浏览器,也只是显示这样的内容,我们是可以接受的。
还可以再优化,这边使用了这么多calc() 使用原生的css进行计算。其实我们完全可以使用less帮我们计算。把所有的calc()都改为less的计算,那么可以节省客户的CPU资源。
总结
从前面例子可以看出写css,不仅仅实现了显示相近就好。我们还需要:
- 用尽量少的标签去实现。
- 用尽量少的css代码实现,节省网络传输的带宽。
- css代码可读性要高。
- 注意低版本浏览器用户的体验,注意css的兼容性。
- 最好不要写死宽高度,最好是按照内容的多少来撑开盒子,这样好维护。