CSS（下）历史CSS于1994年首次提出；它于1996年首次被浏览器支持；W3C于1996年正式推出CSS1；在这个版本中，字体已经包含了颜色和背景的相关属性、文本的相关属性、框的相关属性1998年，W3C正式推出CSS2；开始使用目前W3C推荐的样式表结构CSS2.1（2004年2月）；在CSS2的基础上做了细微的改动，删除了很多浏览器不支持的属性，比如text-shadow。CSS3仍在开发中；现在使用的CSS基本上都是在CSS2的基础上发展起来的。2010年推出的新版本css3CSS3在包含所有CSS2支持的基础上进行了改进，不用担心兼容性问题。CSS支持手机、电视、打印机、幻灯片等多种设备，但CSS在浏览器上得到更好的推广。复习用到的知识点双栏布局【CSS布局】左边固定宽度，右边自适应进度条实现取色器https://codepen.io/AlexZ33/pen/PowGpGjCSS其他重要知识BFCBFC全称:BlockFormattingContext,BFC翻译过来就是块级格式化上下文。BFC是网页可视化CSS渲染的一部分，是块盒布局过程发生的区域，也是浮动元素与其他元素交互的区域。说白了，他就是一个规矩。具体戳这篇文章：什么是BFC？IFC(row-levelformattingcontext)GFC(gridlayoutformattingcontext)FFC(adaptiveformattingcontext)堆叠上下文和堆叠顺序z-index思考：什么是z-index底层不会生效。z-index为-1。两个div竖排，最下面的div上移。两者的堆叠顺序是什么？为什么？大小单位和使用场景长度单位：相对和绝对。CSSMargin中的尺寸单位CollapseMarginCollapseRedraw&ReflowRenderingMechanismandRedrawandReflowRenderingEngine解析HTML结构生成DOM树解析CSS生成CSS规则树遍历DOM树，逆向分析每一个样式规则，为每一个应用合适的规则DOMTree中的节点，生成RenderTree，计算每个元素在RenderTree中的位置，触发reflow，repaint，调用NativeGUIAPI绘制好用的花哨工具borderradiusgeneratoranimate.cssCSSTransformFunctionsVisualizerhttps://imgbin.com/形状正方形https://codepen.io/AlexZ33/pen/rNaWJrL矩形https://codepen.io/AlexZ33/pen/wvBoyXN圆形https://codepen.io/AlexZ33/pen/JjobpBJ三角形https://codepen.io/AlexZ33/pen/qBEqEvZ曲线箭头符号https://codepen.io/AlexZ33/pen/jOEVZQN椭圆原理：使用border-radius:50%实现https://codepen.io/AlexZ33/pen/WNbGZMe半椭圆原理：利用border-radius来使用/分隔圆角val利用水平和垂直方向的特性，以不同方式设置圆角半径https://codepen.io/AlexZ33/pen/vYEXeQQ1/4椭圆原理：border-radius只在一个角设置圆弧https://codepen.io/AlexZ33/pen/GRgjMPe平行四边形原理：transform:skew()变形。（注：内联元素无效）https://codepen.io/AlexZ33/pen/yLyazrV平行四边形伪元素方案原理：利用伪元素变形，以免影响元素内部的正常内容（里面的内容变形的元素也会变形）https://codepen.io/AlexZ33/pen/OJPRxKL菱形图像裁剪原理：嵌套元素，内外反转，内部图像宽度和对角线。（内部反向旋转是为了拉直图像）https://codepen.io/AlexZ33/pen/MWYjOwm菱形切割方案原理二：利用clip-path切割路径属性，设置其值为polygon()多边形实现https://codepen.io/AlexZ33/pen/mdyrqVZ元素切角原理：使用渐变（透明转纯色）实现角度，使用background-size控制多个渐变互不影响实现多个切角https：//codepen.io/AlexZ33/pen/QWwKOKG元素圆弧切角原理：使用径向渐变实现，多个圆角同上https://codepen.io/AlexZ33/pen/ZEYpaBXborder-image实现切角原理：使用border-image结合svg图片实现切角边框，通过background-clip限制背景色https://codepen.io/AlexZ33/pen/KKwgyaW剪切路径实现切角原理：使用clip-path:polygon()实现，有限兼容ity不好，裁剪会忽略内部文本内容。优点：任意内容均可裁剪，不受背景图片限制https://codepen.io/AlexZ33/pen/RwNGjKX梯形导航标签效果原理：利用transform:perspective()实现穿透变形https://codepen.io/AlexZ33/pen/abzmVJj静态饼图https://codepen.io/AlexZ33/pen/abzmVwa动态饼图原理：伪元素覆盖旋转https://codepen.io/AlexZ33/pen/jOEMamBsvg实现饼图https：//codepen.io/AlexZ33/pen/povEdrr视觉效果单边投影原理：除了box-shadow的三个尺寸值外，第四个长度参数（展开半径）可以在展开半径时实现是负的模糊半径单边投影https://codepen.io/AlexZ33/pen/YzPpwGy邻边投影原理：设置双边位移，设置扩展半径为模糊半径值的一半https://codepen.io/AlexZ33/pen/gObLPLg在反面投影原理：叠加两个单面投影ionshttps://codepen.io/AlexZ33/pen/rNaWxmP字体排版连字符换行效果不理想（兼容性差）hyphens:none//隐藏连字符hyphens:manual//显示连字符hyphens:auto//自动https://codepen.io/AlexZ33/pen/YzPwMWE插入换行符原则：使用unicode中的换行符0x000A，也就是CSS中的\000A（简写为\A）作为伪元素的内容值，同时注意保留换行符和blankswhite-space:pre传统做法：使用
标签换行新思路：可以将:before或:after伪类选择器中的内容设置为“A”换行，因为Unicode字符代表一个换行符是“0x000A”，在CSS中可以写成“000A”或者简化成“A”div::after{content:"\A";空白：pre；//源代码中的空格和换行符可以保留，否则内容中的换行符会被忽略。}https://codepen.io/AlexZ33/pen/povgBEM文本行斑马条纹原理：利用条纹背景实现条纹，然后用背景em值作为条纹大小https://codepen.io/AlexZ33/pen/KKwVYWO调整标签宽度tab-size属性原理：通过CSS3新增文本属性tab-size:2;设置每个tab占用2个字符宽度在网页上需要显示代码时，可以通过设置tab-size属性几个字符来指定tab缩进。https://codepen.io/AlexZ33/pen/BayjEZv为某些字符（华丽和符号）单独设置字体。传统做法：为需要单独设置的字符设置类，通过类为其设置唯一的字体。新思路：@font-face中的unicode-range属性可以设置字体适合哪些字符。@font-face{字体系列：demoFont；src:local('Baskerville-Italic'),local('GoudyOldStyleT-Italic');/*应用于指定字符的字体*/unicode-range:U+26;/*设置有效字符，'&'的Unicode码位，可以通过'&'.chatCodeAt(0).toString(16)得到'&'的十六进制码位'26'，然后加上'U+'在前缀*/}p{font-family:demoFont,Helvetica;/*demoFont字体只应用于'&'字符，其他字符将应用于后续字体'Helvetica'*/}自定义文本下划线传统方法：通过text-decoration:underline;新思路：1.通过background和background-size在自定义格式中设置下划线；2、通过text-shadow，可以在字符周围出现一圈白边，使其看起来像下划线遇到字母的下降部分自动断开连接避免。3、文字最好放在行内元素中，这样下划线也可以和文字的换行符一起换行。span{背景：线性渐变（灰色，灰色）不重复；背景大小：100%1px；背景位置：01.2em；text-shadow:.05em0white,-.05em0white;}wavyunderlineLetterpressprintingeffect镂空字符效果/文字外发光效果/文字凸起效果可以通过text-shadow给文字添加效果来实现。文本发光效果环形文本1.通过SVG路径绘制一个圆圈。2、通过text和textPath添加文字，通过xlink:href属性将文字链接到路径。
