前言:结构+样式是前端必须了解和使用的部分,这篇是一篇总结的常见和常用的css的布局和样式
一. 常用的css样式
1. 清除浮动(清除浮动的方式有很多,但是最多的还是添加伪元素)
.clearfix:after {
content: "",
display: block,
height: 0,
clear: both
}
.clearfix {
*zoom: 1
}
2.rgba透明色的两种写法
background-color: rgba($color: #000000, $alpha: 0.2);
background-color: rgba(255,255,255,0.2)
3.背景渐变色
具体的参数 - CSS3 渐变 | 菜鸟教程
background-image: linear-gradient(direction, color-stop1, color-stop2, ...) (渐变的方向,颜色
4.单行文本溢出显示省略号
注意要固定宽度
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
5.多行文本溢出省略号
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
有时候并不会有作用,会在一行,可以在加一个属性
white-space: initial;
6.阴影
box-shadow: h-shadow(x偏移) v-shadow(偏移) blur(模糊距离) spread(阴影大小) color(颜色) inset(内外阴影选择);
常见得内阴影
box-shadow: 0 0 10px blue inset
常见外阴影
box-shaow: 0 0 10px blue
7.三角形
width: 0;
height: 0;
border: 100px solid transparent;
border-top: 100px solid pink;
8.梯形
width: 100px;
height: 0;
border-bottom: 100px solid pink;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
9.定义动画
.technology-box {
animation: toTop 1s ease;
}
@keyframes toTop {
0% {transform: translateY(50px);opacity: 0.5;}
100% {transform: translateY(0);opacity: 1;}
}
10.边框渐变色
1渐变色
.border-box {
width: 100px;
height: 100px;
border: 20px solid black;
border-radius: 50%;
border-image: -webkit-linear-gradient(pink, yellow) 30 30;
border-image: -moz-linear-gradient(pink, yellow) 30 30;
border-image: linear-gradient(pink, yellow) 30 30;
}
2.圆角渐变
.content {
width: 100px;
height: 100px;
box-sizing: border-box;
padding: 10px;
border-radius: 50%;
background-image: -webkit-linear-gradient(top, pink 0%, skyBlue 30%, yellow 60%, orange 90%);
background-image: -moz-linear-gradient(top, pink 0%, skyBlue 30%, yellow 60%, orange 90%);
background-image: linear-gradient(top, pink 0%, skyBlue 30%, yellow 60%, orange 90%);
}
.box {
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
}
<div class="content">
<div class="box"></div>
</div>
二.常见的css布局
1.左边固定,右边自适应
(1)利用float和calc
<style>
#box1 {
width: 100%;
height: 600px;
background: pink;
margin-bottom: 100px;
}
#box1 .left {
float: left;
width: 200px;
height: 600px;
background: red;
}
#box1 .right {
float: left;
width: calc(100% - 200px);
height: 600px;
background: blue;
}
</style>
<!-- 左边固定,右边自适应 -->
<div id="box1">
<div class="left"></div>
<div class="right"></div>
</div>
(2)flex
<style>
#box1 {
width: 100%;
height: 600px;
background: pink;
display: flex;
flex-direction: row;
}
#box1 .left {
width: 100px;
height: 100%;
background: red;
}
#box1 .right {
flex: 1;
height: 100%;
background: blue;
}
</style>
<body>
<!-- 左边固定,右边自适应 -->
<div id="box1">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
三. 样式小技巧
1.定位元素无法被内容撑开
white-space: nowrap;
2.v-html的内容没有换行
white-space: pre-wrap
更多推荐
那些常用的css
发布评论