暑期实习的时候带了我的master，告诉我要注意基础和底层的实现原理。只有这样，我们才能在瞬息万变的科技行业中站稳脚跟，以同样的变化应对一切变化，平地盖高楼，所以要不断学习，不断交流。沟通不能只停留在技术层面，更应该停留在思维方式上。语言只是工具，编程思想才是核心。只有理解了编程的思想，我们才能创造自己的东西，随意切换。授人以鱼不如授人以渔。在我们这个时代，创造而不是模仿。回到学校后，我开始了新的学习之旅；读一本好书就像交一个有趣的朋友。最近看了一本书《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（列数），目的是在较小的屏幕上自动显示单列布局。合理使用缩略语合理使用缩略语是一种很好的防御性编码方法，可以抵御未来的风险；csstips为什么可以用html/css不用JS解决问题？两个字，因为简单。简单意味着更快的开发速度，更低的维护成本，往往也意味着更好的体验；让我介绍一些您可能不知道的CSS技巧。半透明边框的实现方式有很多种，比如：伪元素结合定位，多层div包裹结合定位……，一千个哈利波特给一千个读者，每个人都有自己的实现方法，这可能不是最佳的；问题：代码量有点多，不符合我前面说的css编程技巧，实践中会出现各种我们想象不到的bug；解决方案：利用背景的工作原理，背景与边框的关系；background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框以下；焦点在裁剪位置border-box:默认背景延伸到borderextension(butBelowtheborder)padding-box:border下没有背景，即背景延伸到内边距和扩展内容框：背景被裁剪到内容以扩展扩展。我们希望图片和容器的角之间有一定的空隙，类似于padding的效果。对于固定大小的容器，我们可以使用background-position来实现，但是内容往往不是固定的？background-position的取值和padding一样，也可以实现，但是每次修改需要三个地方，代码不够DRY解决：background-origincalc()background-origin:指定指定背景图片的background-image属性的origin位置background是相对于区域的，关注sourcepointborder-box在background-position位置：背景会延伸到延伸到外边框的border，并且是“边框在上，背景在下”，这个可以直接用border-styleasdashed看得到边框中将没有背景。同样，背景会延伸到最外层边界的padding.content-box：背景绘制在内容区域内。试着自己敲一下。效果图如下：试了多边框你还在用多元素图层Layerwrapping来模拟多边框？不，我是用伪元素来做的，哈哈。但它们都需要我们添加额外的元素，或者大量的代码来污染我们的结构解决方案：box-shadow、outlinebox-shadow：给盒子添加一个或多个阴影；inset：默认阴影在边界外。使用inset后，阴影在边框内（即使是透明边框），背景在内容下方。offset-x,offset-y:这些是用来设置阴影偏移量的前两个长度值。offset-x设置水平偏移量，如果为负值，则阴影在元素的左侧。offset-y设置垂直偏移量，如果为负值，阴影将位于元素的顶部。查看可用单位的长度。如果两者都为0，则阴影在元素后面。这时候如果设置了blur-radius或者spread-radius，就会出现模糊的效果。blur-radius：这是第三个长度值。值越大，模糊区域越大，阴影越大越亮。不能为负。当阴影边缘清晰时，默认值为0。spread-radius：这是第四个长度值。取正值时，阴影扩大；当取负值时，阴影缩小。默认值为0，在这种情况下阴影与元素一样大。color边框的颜色。如果不指定，则由浏览器决定——通常是color的值，但目前Safari取透明。如果只需要两层，可以设置规则边框，加上outline（描边）属性生成内外边框；比如我们常见的：outline：是用来设置一个或多个单独的outlines的outline-style、outline-width、outline-color等属性的简写；outlines不占用空间，它们绘制在内容之上outline-offset：元素边缘或边框之间的间隙；tryaborder-innercircleCorners有时候我们需要一个容器，只有里面有圆角，border或者stroke的四个角在外面仍然保持直角形状解决方案：box-shadow和outline结合实现原理：轮廓（描边）不会跟随元素圆角（从而显示直角）；box-shadow将跟随元素；结合起来，box-shadow将填充笔画和容器圆角之间的空隙；尝试连续的图像边框当我们想将图案应用为边框而不是背景时？你可能会想到border-image，但它不起作用。border-image的原理基本上就是九方格拉伸法，将图片切割成九块，然后分别应用到元素边框对应的边角上。border-image的工作原理：效果图如上图：解决方法：CSS渐变和背景扩展，在背景图片之上添加纯色背景，两层背景指定不同的background-clips；渐变可以和背景图一起使用是的，背景图的预发布和平时一样。而且写在前面的优先级会高一些，后面会覆盖在图片上试试平行四边形。有没有办法只倾斜容器的形状而保持其内容不变？可能你会想到嵌套两层元素，外层skew()，对内容应用一个反倾斜变形来抵消变形的影响。但这意味着我们必须使用额外的HTML元素层来包装内容。一些繁琐的解决方案：伪元素，给伪元素应用样式，改造伪元素，然后把伪元素定位+层级放到容纳元素里，随便说说，不练。让我们试试梯形标签页。我们经常在网页中看到梯形标签页。常用的技术杂乱无章或难以维护。他们是如何意识到的？解决方案：在三维世界中旋转一个矩形。由于透视关系，我们可以在二维图像上看到一个梯形。结合平行四边形实现的方法，可以实现透视：观察者与z=0平面的距离；用于元素3D变形后，内部变形效果是“不可逆”的，这与2D变形不同（2D变形内部的反向变形可以抵消外部变形效果）；为了让他的尺寸更容易掌握，我们可以为他指定transform-origin:bottom;你也可以用scale()对他进行美学操作；尝试一个简单的饼图。饼图在网页中非常常见，例如简单的统计表和进度指示器。如果不使用图像处理浏览器，不使用JavaScript，如何练习呢？解决方案：伪元素、变形属性和css渐变实现1、设置这个元素为圆形；2.使用简单的线性渐变，将一半图片设置为其他颜色3.用伪元素覆盖这个元素到渐变区域上方（貌似这个元素和第一步效果一样），判断如何许多扇区因旋转而泄漏；如果我们想看到一个不同比例的静态饼图，怎么解决呢？？解决方法：很简单，我们只需要将上面使用的动画置于暂停状态即可animation-play-state:paused;动画延迟：设置为负；负动画延迟，让动画开始直接跳转到设定的时间点。即负、负为正；尝试自适应内部元素。如果你没有为元素指定特定的高度，它会自动适应其内容的高度。如果我们希望width具有类似的行为，我们该如何实现呢？？解决方法：css内外尺寸模型：min-contentmax-content,min-content,fit-contentmin-content:width不是说里面的宽度比width小，而是minimumwidth值最大的内部元素该元素的宽度成为最终容器的宽度。首先，我们需要了解这里的“最小宽度值”是什么意思。替换元素，比如图片的最小宽度值就是图片的宽度。对于文本元素，如果都是中文，则最小宽度值为中文宽度值；如果包含英文，因为默认的英文单词是不换行的，所以最小宽度可能是里面最长的英文单词的宽度。所以，大家都明白了。尝试全角背景和固定宽度的内容。我们在网页中经常会遇到类似的布局，通常是在页脚和导航中；如果我们只使用一个元素，我们怎么能达到这种效果呢？解决方案calc()函数margin:0auto;左右边距实际上等于视口宽度的一半减去内容宽度的一半；所以我们可以使用margin:0calc(50%-width/2);如果你还有疑惑：试试verticalcentering，让我们在页面布局中经常用到的css中的元素水平和垂直居中。我相信每个人都有自己的方法来实现它；介绍一下FlexBox显示的解决方案：flex;align-items:verticalalignment;justify-content：水平对齐；试试我推荐的计划！试试粘在底部的页脚。具有块级样式的页脚。当页面内容足够长时，一切正常，但是当页面内容很短时，就会出现问题；页脚不会像我们预期的那样紧。贴在viewport的底部，但是在content的下面解决方案：flex弹性布局flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。flex-grow：定义项目的缩放比例。默认为0，不放大。1平分剩余空间flex-shrink：项目默认缩小比例为1，如果空间不足，按比例缩小从a点到b点的物体往往不是完全均匀的，所以我们需要调整动画效果使其更逼真。解决方案：我们可以使用速度控制功能和反向版本的animation-timing-function来模拟现实世界中的速度变化。CSS变换仅对块级元素有用。如果是重复的循环函数，我们也可以用animation-direction来反转。周期的周期函数；动画方向：反转；反转每个循环；动画方向：交替；反转偶数循环；动画方向：交替反转；反转奇数循环；首先介绍一下animation-timing-functionanimation-timing-function：属性定义了CSS动画在每个动画周期中执行的节奏。可能的值是一个或多个；（缓入、缓出、缓入、线性、steps()、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)的简写；来看看效果吧！试试
