哪些你知道或不知道的css，在这里或许都齐全

暑假实习的时候带个人师傅，告诉我要注重基础，底层实现原理。才能在突飞猛进的技术行业站住脚跟，以不变应万变，万丈高楼平地起，因此咱们应该不断的去学习，去交流。交流，不该该仅仅停留在技术方面，更多的应该是在思惟方式。语言只是一种工具，编程的思想才是核心。咱们只有在明白了编程的思想以后，才能去创造属于本身的东西，随意切换。授之以鱼不如授之以渔。在咱们的时代应该是去创造而不是模仿。回到学校以后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有不少有意思的CSS技巧，有时间有兴趣的朋友能够去读读这本书，读完以后咱们能够一块儿交流，学习，一块儿解答你个人迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结概括：

有问题欢迎讨论sunseekers

本文全部连接均来自《CSS揭秘》，内容基本都来自原书

css编码技巧

---

尽可能减小代码重复的重复，尽可能减小改动时要编辑的地方，易维护，性能高；

使用css变量，currentColor,inherit...目前css变量不多，兼容性有待改善

响应式网页设计，每一个媒体查询都会增长成本；避免媒体查询

使用百分比长度来取代固定长度,或者使用与视口相关的单位（vw,vh,vmin,vmax)，她们的值解析为视口宽度或高度的百分比

当你须要在较大分辨率下获得固定宽度， 使用max-width代替width，由于他能够适应较小的分辨率，而无需使用媒体查询

替换元素（img,object,video,iframe)设置一个max-width值为100%；

图片元素以行列式进行布局时，让视口的宽度来决定列的数量，弹性和布局（flexbox，display：inline-block）;

使用多列文本时，指定column-width（列宽）而不是指定column-count（列数），目的他就能够在较小的屏幕上自动显示单列布局

合理使用简写

合理使用简写，是一种良好的防卫性编码方式，能够抵御将来的风险；

css小技巧

为何说能使用html/css解决的问题就不要使用JS呢？两个字，由于简单。简单就意味着更快的开发速度，更小的维护成本，同时每每具备更好的体验；下面我介绍哪些或许你不知道css小技巧。

• 半透明边框

实现半透明边框能够有不少的实现方法，好比：伪元素和定位相结合，多层div包裹和定位相结合...,一千个读者就有一千个哈利波特，每一个人都有一套本身的实现方法，或许那都不是最优的；

问题：代码量有点多，不符合我前面说的css编程技巧，在实际中会出现各类咱们想象不到的bug；

解决：利用背景的工做原理，背景与边框的关系；

background-clip:设置元素的背景（背景图片或者颜色)是否延伸到边框下面；重点在切割的位置

border-box: 默认状况 背景延伸到边框外延(可是在边框之下)

padding-box: 边框下面没有背景，即背景延伸到内边距外延

content-box: 背景裁剪到内容去外延

本身动手敲的实现的效果图以下：

试一试

• 灵活背景定位

有时候咱们但愿图片和容器的边角之间能留出必定的空隙，相似padding的效果，对于固定尺寸大小的容器来讲咱们能够利用 background-position 实现，可是内容每每是不固定？background-position的值和padding一致也可实现，可是每次修改都要三个地方，代码不够DRY

解决：background-origin calc()

• background-origin: 规定了指定背景图片background-image 属性的原点位置的背景相对区域,重点在background-position位置的源点

border-box: 背景将会延伸到延伸到外边界的边框，并且是「边框在上、背景在下」，这个用border-style 为dashed能够直接看得出来

padding-box:>默认状况 背景描绘在padding盒子，边框里不会有背景出现。一样，背景将会延伸到最外边界的padding.

content-box:背景描绘在内容区范围.

试一试

本身动手敲的实现的效果图以下：

试一试

• 多重边框

你还在用多个元素层层包裹来模拟多重边框吗？不，我在用伪元素实现，哈哈。可是她们都须要咱们添加额外的元素，或者大量的代码来污染咱们的结构

解决方案：box-shadow,outline

• box-shadow: 向框添加一个或多个阴影;

inset : 默认阴影在边框外。

使用inset后，阴影在边框内（即便是透明边框），背景之上内容之下。

offset-x,offset-y :

这是头两个 length 值，用来设置阴影偏移量。offset-x 设置水平偏移量，若是是负值则阴影位于元素左边。 offset-y 设置垂直偏移量，若是是负值则阴影位于元素上面。可用单位请查看 length 。
若是二者都是0，那么阴影位于元素后面。这时若是设置了 blur-radius 或 spread-radius 则有模糊效果。

blur-radius :

这是第三个 length 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。

spread-radius :

这是第四个 length 值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素一样大。

color

边框的 color 。若是没有指定，则由浏览器决定——一般是color的值，不过目前Safari取透明。

若是你只须要两层，那就能够设置一层常规的边框，再加上outline（描边）属性来产生内外层边框；
例如咱们常见的：

• outline: 是用来设置一个或多个单独的轮廓属性的简写属性 ， 例如 outline-style, outline-width 和 outline-color;轮廓不占据空间，它们被描绘于内容之上
• outline-offset: 一个元素边缘或边框之间的间隙;

试一试

• 边框内圆角

有时候咱们须要一个容器，只有内侧有圆角，边框或者描边的四个角在外部仍然保持直角形状

解决方案：box-shadow和outline结合

实现原理： outline（描边）不会跟着元素的圆角走（于是显示直角）；box-shadow倒是会跟着元素走的；，二者相结合，box-shadow会填补描边和容器圆角之间的空隙；

试一试

• 连续的图像边框

有时候咱们想把一副图案应用为边框，而不是背景？你或许会想到border-image，可是行不通，border-image他的原理基本上就是九宫格伸缩法，把图片切割成九块，而后把她们应用到元素边框相应的边和角

border-image的工做原理：

效果图如上所示：

解决方案：css渐变和背景的扩展，在背景图之上在加一层纯色实色背景，给两层背景指定不一样的background-clip;
渐变是能够和背景图片一块儿使用的，并且背景图片的预发和平时的写法是同样的。并且写在前面的优先级会比较高，会盖在后面的图片上面

试一试

• 平行四边形

有没有办法只让容器的形状倾斜而保持其内容不变呢？或许你会想到嵌套两层元素，外层skew（）,对内容在应用一次反相skew变形，从而抵消变形的效果。可是意味着咱们不得不使用一层额外的HTML元素包裹内容.有些累赘

解决方案：伪元素，把样式应用到伪元素上，对伪元素进行变形，再把伪元素定位+层级放到到住宿元素下面

光说不练，假把式试一试

• 梯形标签页

在网页中咱们常常见到梯形形状的标签页，常见的技巧都是比较杂乱，或者说难以维护的，那他们是如何实现的呢？

解决方案： 三维世界中旋转一个矩形，因为透视关系，咱们在二维图像上看到一个梯形，再结合平行四边实现的方法便能实现

perspective: 观察者与z=0平面的距离;

对元素使用了3D变形以后，其内部的变形效应是"不可逆转的"，和2D变形不一样（2D变形内部的逆向变形能够抵消外部的变形效应）；

为了让他的尺寸更好掌握，咱们能够为他指定transform-origin：bottom;也可用scale()对他在进行美观操做；

试一试

• 简单的饼图

饼图在网页中的运用极为常见，好比简单的统计表，进度指示器，若是咱们不用图像处理器，和JavaScript，那要如何去实践呢？

解决方案:伪元素，变形属性和css渐变实现

1.把这个元素设置为一个圆形；

2.用一个简单线性渐变来把图像的有半部分设为其余颜色

3.用伪元素覆盖到这个元素的渐变区域上面去（看起来这个元素和第一步效果同样），经过旋转来决定漏出多大扇区；

试一试

若是咱们想要看到一个静态的不一样比率的饼状图哪有如何解决呢？

解决方案： 很简单，咱们只需将上面用到的那个动画处于暂停状态就行了
animation-play-state: paused;
animation-delay: 设置为负；负的动画延时，让动画一开始就直接跳至设置的时间点。即负负得正；

试一试

• 自适应内部元素

若是不给一个元素指定具体的height，他就会自动适应其内容的高度，若是咱们但愿width也具备相似的行为该怎么实现呢？？

解决方案: css内部与外部尺寸模型:min-content

max-content,min-content,fit-content

min-content：宽度表示的并非内部那个宽度小就是那个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度做为最终容器的宽度。

首先，咱们要明白这里的“最小宽度值”是什么意思。替换元素，例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，若是所有是中文，则最小宽度值就是一个中文的宽度值；若是包含英文，由于默认英文单词不换行，因此，最小宽度可能就是里面最长的英文单词的宽度。So，你们明白的说。

试一试

• 满幅的背景，定宽的内容

相似的布局咱们在网页中常常碰见，一般是在页脚和导航；若是咱们只使用一个元素该如实现这个效果呢？
解决方案calc()函数

margin:0 auto;所产生的左右外边距实际上都等于视口宽度的一半减去内容宽度的一半；
所以咱们可使用margin：0 calc(50%-width/2);

若是你以为还有疑虑的话：试一试

• 垂直居中

在css中对元素进行水平居中垂直居中，咱们在页面布局的时候会常常用到。相信每一个人都有一套本身实现的方式；
我想介绍一下FlexBox的解决方案

display: flex;

align-items：垂直方向上的对齐方式；

justify-content：水平方向上的对齐方式；

试一试我推荐的方案吧！试一试

• 紧贴底部的页脚

一个具备块级样式的页脚，当页面内容足够长时他一切正常，可是当页面比较短时，就会出现问题；页脚就不能像咱们指望中那样紧贴在视口的最底部，而是在内容的下方

解决方案:flex弹性布局

• flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex-grow：定义项目的放大比例。默认0，不放大。1等分剩余空间

flex-shrink：项目的缩小比例默认为1，若是空间不足，等比缩小

flex-basis：项目占据主轴空间

试一试

• 缓动效果

给过渡和动画加上缓动效果是一种流行的表现手法，可让界面显得更加生动和真实，可是在现实世界中，物体从a到b点的移动每每不是 彻底匀速的，所以咱们须要对动画效果加以调整，使得更加逼真

解决方案：咱们能够用animation-timing-function的调速函数和反向版本，模拟现实世界的速度变化css的transform只对块级元素有用

若是是反反复复的循环函数，咱们也能够用可用animation-direction来反转循环的周期函数；

animation-direction:reverse;反转每个循环周期；

animation-direction:alternate;反转第偶数循环周期；

animation-direction:alternate-reverse;反转第奇循环周期；

首先介绍一下animation-timing-function

animation-timing-function：属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个；(ease-in,ease-out,ease-in-out,linear,steps(),cubic-bezier())；

cubic-bezier()函数，容许咱们指定自定义调速函数；cubic-bezier(x1,y1,x2,y2);(x1,y1)表示第一个-P1控制锚点的坐标,(x2,y2)，表示第二个-P2;曲线的片断分别固定在(0,0)-P0起点,(1,1)-P4终点;

咱们须要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，固然也毋须过大。

把控制锚点的水平坐标和垂直坐标互换，就能够获得任何调速函数的反向版本
'

steps()：是一个阶跃函数，用于把整个操做领域切分为相同大小的间隔，每一个间隔都是相等的。

steps 第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值，指定在每一个间隔的起点或是终点发生阶跃变化，默认为 end。

弹跳动画，球体自由落体运动，在降低的过程当中匀加速咱们可用ease-out;弹起方向是匀减速咱们可用ease-in;

动手看效果吧！试一试

• 逐帧动画

有时候咱们想要实现连续的动画帧，动画帧之间然不须要过渡的状态。而咱们在实现中每每会失败？

解决方案:steps()会根据你指定的步数量，把整个动画切分为多个针，并且整个动画帧与帧之间硬切，不会有任何过渡效果

step-start和step-end是steps(1,start)和steps(1,end)的简写；

动手看效果吧！试一试

<h2 style='color:rgb(230,3,135);'>16. 沿环形平移的动画</h2>

当一个元素沿着环形进行移动的同时，咱们但愿它能保存本身本来的的朝向。那咱们该如何去实现呢？或许你已经有了你的方法啦！但个人方法可能会比你的更加优化

咱们能够用前面介绍的嵌套的两层相互抵消，用内层的变形来抵消外层变形的效果；即两层的旋转方向相反；

动手看效果吧！试一试

可是这样还不是特别理想，若是只用一个元素那要怎么去实现呢？

transform-origin只是一个语法糖，实际上你老是能够用translate()来代替；变形函数并非孤立存在；以下图可证明：

这个原理我目前还不是特别可以理解，但你能够试试
试一试

• 自定义复选框

咱们对于美得追求是永无止境的，可是复选框，单选框的样式的样式老是不如咱们如意。虽然js可以实现效果，可是代码停臃肿。那咱们有什么去实现呢？

解决方案：:checked伪类，这个伪类只有在复选框被勾选时才会匹配，不管是由用户交互触发，仍是有脚本触发

当< label > 元素与复选框关联以后，能够起到触发开关的做用

label 不是复选框那样的替换元素,咱们能够为他添加生成性内容(伪元素),并基于复选框的状态来为其设置样式，而后把真正的复选框隐藏起来（但不能把它从tab键切换焦点的队列中彻底删除），再生成性内容美化一番，用来顶替原来的复选框！

可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容

• 例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而若是查看(x)html代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，仍是单选按钮等。

试一试