• 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
• 圆角 （border-radius:8px）
• 多列布局 （multi-column layout）
• 阴影和反射 （Shadoweflect）
• 文字特效 （text-shadow）
• 文字渲染 （Text-decoration）
• 线性渐变 （gradient）
• 旋转 （transform）
• 增加了旋转,缩放,定位,倾斜,动画,多背景

• 内容的外观不受页面上的CSS的影响：用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观需要类似appearance属性，或者浏览器自身暴露的一些样式接口。
• 有自己的尺寸：在Web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300像素×150像素，如
• 在很多CSS属性上有自己的一套表现规则：比较具有代表性的就是vertical-align属性，对于替换元素和非替换元素，vertical-align属性值的解释是不一样的。比方说vertical-align的默认值的baseline，很简单的属性值，基线之意，被定义为字符x的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。
• 所有的替换元素都是内联水平元素：也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是，替换元素默认的display值却是不一样的，有的是inline，有的是inline-block。

• 固有尺寸： 指的是替换内容原本的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。
• HTML尺寸： 只能通过HTML原生属性改变，这些HTML原生属性包括的width和height属性、的size属性。
• CSS尺寸： 特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的尺寸，对应盒尺寸中的content box。

• 在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
• 在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
• WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

• 利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点；
• CSS Sprites能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

• 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
• CSSSprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
• 维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

my-image { background: (low.png); } @media only screen and (min-device-pixel-ratio: 1.5) { #my-image { background: (high.png); } }

• 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin；
• 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding。

• line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
• 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
• 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
• 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
• line-height 和 height 都能撑开一个高度；

• 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
• 百分比：将计算后的值传递给后代

• 结构清晰， 便于扩展
• 可以很方便的屏蔽浏览器私有语法的差异
• 可以轻松实现多重继承
• 完美的兼容了CSS代码，可以应用到老项目中

• 有空格时会有间隙，可以删除空格解决；
• margin正值时，可以让margin使用负值解决；
• 使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

• 单行文本溢出

overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 white-space: nowrap; // 规定段落中的文本不进行换行

• 多行文本溢出

overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 display:-webkit-box; // 作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列 -webkit-line-clamp:3; // 显示的行数

• 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。
• 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

@media (max-width: 600px) { .facet_sidebar { display: none; } }

1. 宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？
2. 编码优化：怎样写出更好的 CSS？
3. 构建：如何处理我的 CSS，才能让它的打包结果最优？
4. 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

• 预处理器：Less、 Sass 等；
• 重要的工程化插件： PostCss；
• Webpack loader 等 。

1. 宏观设计上：我们希望能优化 CSS 文件的目录结构，对现有的 CSS 文件实现复用；
2. 编码优化上：我们希望能写出结构清晰、简明易懂的 CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性，这样我们可以少写一些无用的代码；
3. 可维护性上：更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点如果能做到，自然会带来更强的可维护性。

• 嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系 ；
• 支持定义 css 变量；
• 提供计算函数；
• 允许对代码片段进行 extend 和 mixin；
• 支持循环语句的使用；
• 支持将 CSS 文件模块化，实现复用。

• 提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作；
• 当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀；
• 允许我们编写面向未来的 CSS：PostCss 能够帮助我们编译 CSS next 代码；

• Webpack 在裸奔的状态下，是不能处理 CSS 的，Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具；
• Webpack 在 loader 的辅助下，是可以处理 CSS 的。

• Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader
  
• 注意，答出“用什么”有时候可能还不够，面试官会怀疑你是不是在背答案，所以你还需要了解每个 loader 都做了什么事情：
  
• • css-loader：导入 CSS 模块，对 CSS 代码进行编译处理；
  • style-loader：创建style标签，把 CSS 内容写入标签。

• window.innerHeight 是浏览器可视区的高度；
• document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
• imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
• 内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

• 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
• 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
• 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

• CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
• 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

• em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。
• rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。

• vw：相对于视窗的宽度，视窗宽度是100vw；
• vh：相对于视窗的高度，视窗高度是100vh；
• vmin：vw和vh中的较小值；
• vmax：vw和vh中的较大值；

• 百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
• vw/vm：相对于视窗的尺寸

• px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
• em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
• em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

• 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。
• 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

• 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

.outer { height: 100px; } .left { float: left; width: 200px; background: tomato; } .right { margin-left: 200px; width: auto; background: gold; }

• 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

.left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }

• 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

.outer { display: flex; height: 100px; } .left { width: 200px; background: tomato; } .right { flex: 1; background: gold; }

• 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

.outer { position: relative; height: 100px; } .left { position: absolute; width: 200px; height: 100px; background: tomato; } .right { margin-left: 200px; background: gold; }

• 利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

.outer { position: relative; height: 100px; } .left { width: 200px; background: tomato; } .right { position: absolute; top: 0; right: 0; bottom: 0; left: 200px; background: gold; }

• 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

.outer { position: relative; height: 100px; }.left { position: absolute; width: 100px; height: 100px; background: tomato; }.right { position: absolute; top: 0; right: 0; width: 200px; height: 100px; background: gold; }.center { margin-left: 100px; margin-right: 200px; height: 100px; background: lightgreen; }

• 利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。

.outer { display: flex; height: 100px; }.left { width: 100px; background: tomato; }.right { width: 100px; background: gold; }.center { flex: 1; background: lightgreen; }

• 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式**，中间一栏必须放到最后：**

.outer { height: 100px; }.left { float: left; width: 100px; height: 100px; background: tomato; }.right { float: right; width: 200px; height: 100px; background: gold; }.center { height: 100px; margin-left: 100px; margin-right: 200px; background: lightgreen; }

• 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

.outer { height: 100px; padding-left: 100px; padding-right: 200px; }.left { position: relative; left: -100px; float: left; margin-left: -100%; width: 100px; height: 100px; background: tomato; }.right { position: relative; left: 200px; float: right; margin-left: -200px; width: 200px; height: 100px; background: gold; }.center { float: left; width: 100%; height: 100px; background: lightgreen; }

• 双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

.outer { height: 100px; }.left { float: left; margin-left: -100%; width: 100px; height: 100px; background: tomato; }.right { float: left; margin-left: -200px; width: 200px; height: 100px; background: gold; }.wrapper { float: left; width: 100%; height: 100px; background: lightgreen; }.center { margin-left: 100px; margin-right: 200px; height: 100px; }

• 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

• 利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

.parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

• 利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况

.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 自身 height 的一半 */ margin-left: -50px; /* 自身 width 的一半 */ }

• 使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

.parent { display: flex; justify-content:center; align-items:center; }

• **适配不同像素密度，**针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；
• **适配不同屏幕大小，**由于不同的屏幕有着不同的逻辑像素大小，所以如果直接使用 px 作为开发单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。

• flex-direction属性决定主轴的方向（即项目的排列方向）。
• flex-wrap属性定义，如果一条轴线排不下，如何换行。
• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content属性定义了项目在主轴上的对齐方式。
• align-items属性定义项目在交叉轴上如何对齐。
• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

• 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
• 浮动元素碰到包含它的边框或者其他浮动元素的边框停留

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会跟随其后
• 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

• 给父级div定义height属性
• 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
• 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
• 使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

.clearfix:after{ content: "\200B"; display: table; height: 0; clear: both; } .clearfix{ *zoom: 1; }

clear:none|left|right|both

.clear::after{ content:''; display: block; clear:both; }

• Box: Box 是 CSS 布局的对象和基本单位，?个??是由很多个 Box 组成的，这个Box就是我们所说的盒模型。
• Formatting context：块级上下?格式化，它是??中的?块渲染区域，并且有?套渲染规则，它决定了其?元素将如何定位，以及和其他元素的关系和相互作?。

• 根元素：body；
• 元素设置浮动：float 除 none 以外的值；
• 元素设置绝对定位：position (absolute、fixed)；
• display 值为：inline-block、table-cell、table-caption、flex等；
• overflow 值为：hidden、auto、scroll；

• 垂直方向上，自上而下排列，和文档流的排列方式一致。
• 在BFC中上下相邻的两个容器的margin会重叠
• 计算BFC的高度时，需要计算浮动元素的高度
• BFC区域不会与浮动的容器发生重叠
• BFC是独立的容器，容器内部元素不会影响外部元素
• 每个元素的左margin值和容器的左border相接触

• 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
• 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
• 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

.left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }

• 如果两者都是正数，那么就去最大者
• 如果是一正一负，就会正值减去负值的绝对值
• 两个都是负值时，用0减去两个中绝对值大的那个

• 底部元素变为行内盒子：display: inline-block
• 底部元素设置浮动：float
• 底部元素的position的值为absolute/fixed

• 父元素加入：overflow: hidden
• 父元素添加透明边框：border:1px solid transparent
• 子元素变为行内盒子：display: inline-block
• 子元素加入浮动属性或定位

• **relative：**元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

• 改变行内元素的呈现方式，将display置为inline-block
• 使元素脱离普通文档流，不再占据文档物理空间
• 覆盖非定位文档元素

• abuselute与fixed的根元素不同，abuselute的根元素可以设置，fixed根元素是浏览器。
• 在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置。

div { width: 0; height: 0; border: 100px solid; border-color: orange blue red green; }

div { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; }

div { width: 0; height: 0; border-bottom: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; }

div { width: 0; height: 0; border-left: 50px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }

div { width: 0; height: 0; border-right: 50px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }

div { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }

div{ border: 100px solid transparent; width: 0; heigt: 0; border-radius: 100px; border-top-color: red; }

• 利用vw来实现：

.square { width: 10%; height: 10vw; background: tomato; }

• 利用元素的margin/padding百分比是相对父元素width的性质来实现：

.square { width: 20%; height: 0; padding-top: 20%; background: orange; }

• 利用子元素的margin-top的值来实现：

.square { width: 30%; overflow: hidden; background: yellow; } .square::after { content: ''; display: block; margin-top: 100%; }

• 采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：

transform: scale(0.5,0.5);

• 采用meta viewport的方式

• 使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none; 字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
• 使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75); 收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/…；
• 使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

window.devicePixelRatio = 设备的物理像素 / CSS像素。

border:1px solid #333

#container[data-device="2"] { border:0.5px solid #333 }

#container[data-device="2"] { position: relative; } #container[data-device="2"]::after{ position:absolute; top: 0; left: 0; width: 200%; height: 200%; content:""; transform: scale(0.5); transform-origin: left top; box-sizing: border-box; border: 1px solid #333; } }

const scale = 1 / window.devicePixelRatio; // 这里 metaEl 指的是 meta 标签对应的 Dom metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);

推荐阅读

• 

  莲子带芯的好还是不带芯的好
• 

  安卓手机wifi破解软件,安卓手机怎么破解?一晚可以破解
• 

  广州市东升医院2023年春节期间门诊安排
• 

  内关的作用与好处
• 

  静脉曲张吃药可以吃好吗?
• 

  感慨万端是什么意思 感慨万端的解释
• 

  plc培训班出来能工作吗，武汉plc培训后好找工作吗
• 

  妮维雅男士保湿啫喱 妮维雅男士保湿系列
• 

  立冬和冬至是一天吗
• 

  防诈骗简笔画教程防诈骗简笔画步骤
• 

  京东各行业数据分析,京东物流成本数据分析
• 

  二十四节气芒种的内涵寓意 芒种的内涵寓意为什么煮梅
• 

  algorand（可扩展的拜占庭协议）
• 

  口罩买什么样的好
• 

  Go|Go 语言 JSON 标准库的使用
• 

  月经期可以吃当归吗
• 

  遇到庆东锅炉指示面板不亮怎么办？3个处理方法帮助你
• 

  20180916v4.0目标和周检视第六周???吴文平
• 

  外貌协会的女生特点 外貌协会
• 

  给妈妈的礼物可以怎么做用纸