关键词：
常用前端布局，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
csshack技术介绍及常用的hack技巧(代码片段)
一、什么是CSSHack？不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSSHack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS代码的过程，就叫CSSHack。CSSHack常见的... 查看详情
史上最全html和css布局技巧(代码片段)
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元... 查看详情
前端必会的html+css常用技巧之移动端1px边框(代码片段)
目录写在开头物理像素(physicalpixel)设备独立像素(device-independentpixel)设备像素比(devicepixelratio)移动端1px边框的解决方案方案一方案二方案三写在末尾写在开头正文之前，我们需得了解几个重要的名词：物理像素、设备独立... 查看详情
10个css技巧前端开发(代码片段)
1、使用相对单位通常我们在项目开发中，使用px作为尺寸的单位，而不是使用相对单位，如：rem、em等。在万物互联的时代，最好的方式是相对单位rem、vh、vw等现代CSS布局（如flexbox和grid）方式，最大限度的支持各种终端设备。... 查看详情
前端基础小知识
CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现），希望能给需要的小伙伴带... 查看详情
csscss技巧，看到css布局不一致(代码片段)
前端前端开发8个常用经典技巧(代码片段)
如何知道iframe下载完成定时器轮询监听readyState的状态，如果是complete或者interactive说明文件加载完成。letiframe=document.createElement(\'iframe\');iframe.src=path;iframe.style.display=\'none\';document.body.appendChild(iframe);c 查看详情
前端必会的html+css常用技巧之虚线的实现方式(代码片段)
前端必会的HTML+CSS常用技巧之虚线的特殊实现方式利用边框border属性利用background的linear-gradient属性上下左右矩形利用边框border属性这个属性比较简单<divclass="dashed">利用边框borderdashed属性实现虚线</div><divcla... 查看详情
web前端教程：css布局十八般武艺都在这里了
...CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现），希望能给需要的小伙伴带... 查看详情
前端小白案例-爱新鲜抽屉式特效制作(代码片段)
知识点：企业布局技巧，如何高效的编写CSS样式，常用选择器，基本标签，动态布局，盒子模型，jquery类库调用，JS特效编写，JS编程思维等。html代码：<divid="box"><divclass="item"><imgsrc="images/1.jpg"alt="美女"width="956"height="40... 查看详情
css布局技巧之——各种居中
...要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1.把margin设为auto具体... 查看详情
css布局技巧之——各种居中
...要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1.把margin设为auto具体... 查看详情
css布局技巧之——各种居中
...要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1.把margin设为auto具体... 查看详情
css常用的定位和布局方法汇总(已添加源码地址)(代码片段)
CSS-Layout旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文常见定位方法水平居中子元素为行... 查看详情
前端基本知识介绍(代码片段)
...de的介绍2.vscode的下载安装3.vscode的使用3.1图形界面操作3.3常用插件三.HTML基础标签HTML基础知识1.HTML为何物？2.标签介绍3.HTML属性4.HTML标签骨架基本的HTML标签1.HTML标题标签2.换行与空格3.HTML段落4.字体加粗与倾斜及删除效果5.图... 查看详情
同样是网页前端小白你的页面为什么更高级？(代码片段)
...片与文字之间的距离6.常见布局技巧总结前言学习了网页前端中的HTML和CSS也许你的页面已经有了一定的改善。在现有的技术你的页面有了一定的雏形一些简单的效果可以展示出来，但我们为了让用户有更好的使用体验所以我... 查看详情
css3总结之居中(代码片段)
居中在前端布局上很常见，也很常用，也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中，垂直居中和水平垂直居中。 针对调整的元素不同，具体的处理方式上有些差异。这里我们先不讲绝对定位下的... 查看详情
前端常用布局方案总结(代码片段)
...平布局比较简单，方法也比较多，这里总结了7种常用的布局方法。公共的HTML结构如下：<divclass="parent"><divclass="child"></div></div>最终实现的效果如下：1. 使用text-alig 查看详情