前言：结构+样式是前端必须了解和使用的部分，这篇是一篇总结的常见和常用的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