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

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

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

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

 ???width: 50%; ???height: 0; ???background: red; ???padding-bottom: 50%;

2:通过在元素中添加一个正方形的图片实现，设置图片宽度100%，高度auto，元素不设置高度即可。（不推荐，特别是九宫格）3：通过vw,vh来实现。（有一定的兼容性问题）

元素高度可变，需要元素内部元素水平垂直居中（主要是垂直）方案

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

<div class="container"> ???<div class="center"> ???<span> ???</span> ???</div></div>.container { ???display:table; ???widht:50%; ???height:50vw;}.center { ???display: table-cell; ???vertical-align: middle;}.center > span { ???display: block; ???widht: 20px; ???height: 20px; ???background: #ff0000; ???margin: 0 auto;}

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="parent"> ???<div class="child"></div></div>.parent { ???width: 200px; ???height: 200px; ???position: relative; ???background: yellow;}//transform: translate(-50%, -50%);.child { ???position: absolute; ???width: 100px; ???height: 100px; ???left: 50%; ???top: 50%; ???margin: -50px 0 0 -50px; ???background: green;}

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

//注意是单行文本可用<p class="text"> ???这时一段单行文本</p>.text{ ???overflow: hidden; ???white-space: nowrap; ???text-overflow: ellipsis; ???width: 200px;}//多行文本 需要注意盒子的高度要调整适当，不然会出行最后一行文字只显示一半的情况//该方法适用于WebKit浏览器及移动端<p class="text"> ???这时一段多行文本</p>.text{ ???height: 100px; ???display: -webkit-box; ???-webkit-box-orient: vertical; ???-webkit-line-clamp: 7; ???overflow: hidden;}

自定义文本选择样式

<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;}

杂项

//文字阴影text-shadow: 1px 1px #ad6969;//CSS3 filter(滤镜) 属性fliter: 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; //文本不能选择

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;}

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;}

原文地址：https://segmentfault.com/a/1190000016960443

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

原文地址：https://www.cnblogs.com/lalalagq/p/9942919.html