常用前端布局,CSS技巧介绍

1,080 阅读5分钟

前端常用布局,CSS技巧介绍

对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍

timg.jpg

css常用技巧之可变大小正方形的绘制

1:若通过设置width为百分比的方式,则高度不能通过百分比来控制.在这个地方可以使用padding来实现,首先,元素的高度=height+padding2+border2; 所以我们可以将widht设置为0,然后用padding来实现盒子的高度(若元素padding的值是一个百分比,则是基于其父元素的宽度来计算的)


    <div class="container">
        <div class="box"></div>
    </div>

    .container {
        width: 50%;
        margin: 0 auto;
        background: yellow;
    }

    .box {
        width: 50%;
        height: 0;
        background: red;
        padding-bottom: 50%;
        margin: 0 auto;
    }

square.gif

2:通过在元素中添加一个正方形的图片实现,设置图片宽度100%,高度auto,元素不设置高度即可。(不推荐,特别是九宫格)

3:通过vw,vh来实现。(有一定的兼容性问题)


    <div class="container">
        <div class="box"></div>
    </div>

    .container {
        width: 50%;
        margin: 0 auto;
        background: yellow;
    }

    .box {
        width: 30vw;
	height: 30vw;
    }

元素高度可变,需要元素内部元素水平垂直居中(主要是垂直)方案

1:通过display:table实现,给最外部元素display:table,同时添加一个次外层元素,设置display:table-cell,vertical-align: middle;这时第三层的元素即可垂直居中。

    <div class="container">
        <div class="box">
            <span></span>
        </div>
    </div>

    .container {
        display:table;
        width:50%;
        height:50vw;
        margin: 0 auto;
    }
    .box {
        display: table-cell;
        vertical-align: middle;
        background: gray;
    }
    .box > span {
        display: block;
        width: 20px;
        height: 20px;
        background: #ff0000;
        margin: 0 auto;
    }

square.gif

2:通过flex布局,容器元素设置为justify-content:center,align-items:center;

3:通过grid布局,容器元素设置为justify-content:center,align-items:center;

4:通过position + transform(margin)实现,如果使用margin则需要知道子元素的宽高且这个宽高不可变(这是由于magin如果设置为百分比是基于父元素的widht来计算的),如果使用transform则没有这个限制(transform的值是基于元素本身的widht和height来计算的),但又一点兼容的问题(推荐使用transform的方式)


    <div class="container">
        <div class="box">
        </div>
    </div>

    .container {
        background: yellow;
        width:50%;
        height:50vw;
        margin: 0 auto;
    }
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -50px;
	//transform: translate(-50%, -50%);
        background: green;
    }

对于单行文本和多行文本超出部分 ...


//多行文本 需要注意盒子的高度要调整适当,不然会出行最后一行文字只显示一半的情况
//该方法适用于WebKit浏览器及移动端
    <div class="container">
        single line : <p class="single-line-text">...</p>
        multi line : <p class="multi-line-text">...</p>
    </div>

    .single-line-text{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 200px;
        background: red;
    }

    .multi-line-text{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 20px;
        width: 200px;
        height: 40px;
        overflow: hidden;
        background: red;
    }

image.png

自定义文本选择样式

<p class="custom-text-selection">Select some of this text.</p>

//全局设置选中文本样式
::selection {
    background: aquamarine;
    color: black;
}
//针对某个class设置
.custom-text-selection::selection {
    background: deeppink;
    color: white;
}

image.png

杂项

//文字阴影
text-shadow: 1px 1px #ad6969;

//CSS3 filter(滤镜) 属性
filter: blur(50px); //设置高斯模糊 单位px 会导致边缘变大
filter: grayscale(100%); //灰度100%
filter: brightness(150%) //设置亮度
filter: contrast(180%);  //设置对比度
...

clip: rect(0,0,0,0)  //元素剪切(只在定位元素中生效)

cubic-bezier属性 三阶贝塞尔曲线 用户控制动画速度
用法:transition: transform 1s cubic-bezier();

user-select: none; //文本不能选择

image.png

css变量使用

//基础用法
<p class="var-dynamic">var-dynamic</p>
.body {
    --customize-height: 100px;
}

.var-dynamic {
     height: var(--customize-height);
}

//扩展高级 通过js来控制css中的变量值
<p class="var-dynamic">var-dynamic</p>

.var-dynamic {
     height: var(--customize-height);
}

<script>
    var varDynamic  = document.querySelect(".var-dynamic");
    el.style.setProperty('--customize-height', 200 + 'px')
</script>

//和less sass等预处理器的变量比较

1:预处理器的变量不是实时的,在media中试图改变变量的值是不可行的,css变量可以

2:不继承,不级联

查看详情

border为1像素的边框

//由于设备的dpr不同,我们设置的1px边框在不能的设备中呈现的效果不一。
//那么通过设备dpr来设置不同的border的值不可以吗?
//我们需要知道border-widht的最低值为1px,低于1的无效

//使用 box-shadow: 0 0 0 0.5px; 来处理
//Browser Support 95.5%

.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}

对于列表元素针对某个元素的样式做单独处理(:not 选择器)

//对每个li元素 添加右border 最后一个不加
<ul class="css-not-selector-shortcut">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

//传统解决
li {
    border-right: 2px solid #d2d5e4;
}

li:last-child {
    border-right: none;
}

//简洁写法
li:not(:last-child) {
    border-right: 2px solid #d2d5e4;
}
//关于not的其他写法
li:not(.a) //not中放入其他选择器

ui:hover li:not(:hover) {
  opacity: 0.5;
}

css三角形的绘制


<div class="triangle"></div>

//通过border的方式间接实现
.triangle {
    width: 0;
    height: 0;
    border-top: 20px solid #333;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

//css3 clip-path裁剪属性
clip-path: polygon(50% 0px, 100% 100%, 0px 100%);

一个小小的loading动画

<div class="donut"></div>
@keyframes donut-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.donut {
    display: inline-block;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #7983ff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: donut-spin 1.2s linear infinite;
}

loading.gif

css实现switch

<input type="checkbox" id="toggle" class="offscreen" />
<label for="toggle" class="switch"></label>

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    transition: all 0.3s;
}
.switch::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    background-color: white;
    top: 1px;
    left: 1px;
    transition: all 0.3s;
}
input[type='checkbox']:checked + .switch::after {
    transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
    background-color: #7983ff;
}
.offscreen {
    position: absolute;
    left: -9999px;
}

switch.gif