1. CSS选择器及其优先级
| 选择器 | 格式 | 优先级权重 |
|---|---|---|
| id选择器 | #id | 100 |
| 类选择器 | #classname | 10 |
| 属性选择器 | a[ref=“eee”] | 10 |
| 伪类选择器 | li:last-child | 10 |
| 标签选择器 | div | 1 |
| 伪元素选择器 | li:after | 1 |
| 相邻兄弟选择器 | h1+p | 0 |
| 子选择器 | ul>li | 0 |
| 后代选择器 | li a | 0 |
| 通配符选择器 | * | 0 |
对于选择器的优先级：
- 标签选择器、伪元素选择器：1
- 类选择器、伪类选择器、属性选择器：10
- id 选择器：100
- 内联样式：1000
需要注意的是：
- !important声明的样式的优先级最高
- 如果优先级相同，则最后出现的样式生效
- 继承得到的样式的优先级最低
- 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0
样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
5. 隐藏元素的方法有哪些
display:none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
- visibility:hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
- opacity:0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
- position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
- z-index 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
- clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
transform:scale(0,0)：将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
6. link和@import的区别
两者都是外部引用CSS的方式，它们的区别如下：
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
7. transition和animation的区别
transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。他也类似于flash的补间动画，但是他可以设置多个关键帧（用@keyframe定义）完成动画。
8. display:none与visibility:hidden的区别
这两个属性都是让元素隐藏，不可见。区别：（1）在渲染树中
display:none会让元素完全中渲染树中消失，渲染的时候不会占据任何空间；visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见
（2）继承
display:none是非继承属性，他的子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示。
（3）修改常规文档流中的元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘 （4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。visibility:hidden
10. 对requestAnimationframe的理解
实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，HTML5 中的 canvas 也可以实现。除此之外，HTML5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。 先看一下MDN对该方法的描述：
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
语法： window.requestAnimationFrame(callback);其中，callback是下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数，它表示requestAnimationFrame() 开始去执行回调函数的时刻。该方法属于宏任务，所以会在执行完微任务之后再去执行。
取消动画： 使用cancelAnimationFrame()来取消执行动画，该方法接收一个参数——requestAnimationFrame默认返回的id，cancelAnimationFrame只需要传入这个id就可以取消动画了。
优势：
- CPU节能：使用SetTinterval 实现的动画，当页面被隐藏或最小化时，SetTinterval 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而RequestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的RequestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
- 函数节流：在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。
- 减少DOM操作： requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
setTimeout执行动画的缺点： 它通过设定间隔时间来不断改变图像位置，达到动画效果。但是容易出现卡顿、抖动的现象；原因是：
- settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；
settimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧。
11. 对盒模型的理解
CSS3中的盒模型有以下两种：标准盒模型、IE盒模型
盒模型都是由四个部分组成的，分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：标准盒模型的width和height属性的范围只包含了content，
- IE盒模型的width和height属性的范围包含了border、padding和content。
一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。
box-sizeing:content-box表示标准盒模型（默认值）box-sizeing:border-box表示IE盒模型（也就是怪异盒模型）22. CSS 优化、提高性能的方法有哪些？
加载性能：
（1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。
（2）css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top 0 bottom 0;但margin-bottom:bottom;margin-left:left;执行的效率更高。
（3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。
选择器性能：
（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
（3）避免使用通配规则，如{}计算次数惊人！只对需要用到的元素进行选择。
（4）尽量少的去对标签进行选择，而是用class。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
渲染性能：
（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
（4）属性值为0时，不加单位。
（5）属性值为浮动小数0.，可以省略小数点之前的0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import前缀，它会影响css的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
可维护性、健壮性：*
（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
（2）样式与内容分离：将css代码定义到外部css中。二、页面布局
1. 常见的CSS布局单位
常用的布局单位包括像素（
px），百分比（%），em，rem，vw/vh。
（1）像素（px）是页面布局汇总的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素。两者区别如下：CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
- 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。
（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般我们的直观理解都会认为子元素的百分比完全相对于直接父元素。
（3）em和rem相对于px更具灵活性，它们都是相对长度单位，而它们之间的区别可以用一句话来概括：em相对于父元素，rem相对于根元素。
- em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)
- rem： rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数只相对于根元素的大小。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化。
（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
- vw：相对于视窗的宽度，视窗宽度是100vw
- vh：相对于视窗的高度，视窗高度是100vh
- vmin：vw和vh中的较小值
- vmax：vw和vh中的较大值
vw/vh 和百分比很类似，但是还是有区别的：
- 百分比（
%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等) -
2. px、em、rem的区别及使用场景
三者的区别：
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
- em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是固定的，更适用于响应式布局。
- em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。
使用场景：
- 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
3. 两栏布局的实现
一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：
利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。
.outer {height: 100px;}.left {float: left;height: 100px;width: 200px;background: tomato;}.right {margin-left: 200px;width: auto;height: 100px;background: gold;}复制代码
利用flex布局，将左边元素的放大和缩小比例设置为0，基础大小设置为200px。将右边的元素的放大比例设置为1，缩小比例设置为1，基础大小设置为auto。
.outer {display: flex;height: 100px;}.left {flex-shrink: 0;flex-grow: 0;flex-basis: 200px;background: tomato;}.right {flex: auto;/*11auto*/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;height: 100px;background: gold;}复制代码
利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。
.outer {position: relative;height: 100px;}.left {width: 200px;height: 100px;background: tomato;}.right {position: absolute;top: 0;right: 0;bottom: 0;left: 200px;background: gold;}复制代码
4. 三栏布局的实现
三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：
利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的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布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto
.outer {display: flex;height: 100px;}.left {flex: 00100px;background: tomato;}.right {flex: 00200px;background: gold;}.center {flex: auto;background: lightgreen;}复制代码
-
5. 水平垂直居中的实现
水平垂直居中的具体实现：
利用绝对定位，先将元素的左上角通过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; } 复制代码
<a name="e7e6S"></a>### 7. 对Flex布局的理解及其使用场景Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。<br />任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、cl ear和vertical-align属性将失效。<br />采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex 项目（flex item），简称"项目"。<br />容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿主轴排列。<br />以下6个属性设置在**容器上**：- flex-direction属性决定主轴的方向（即项目的排列方向）。- flex-wrap属性定义，如果一条轴线排不下，如何换行。- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。- justify-content属性定义了项目在主轴上的对齐方式。- align-items属性定义项目在交叉轴上如何对齐。- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。以下6个属性设置在**项目上**：- 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。**简单来说：**<br />flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex 容器，它的所有子元素都会成为它的项目。<br />一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。 我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还 可以使用flex-wrap来规定当一行排列不下时的换行方式。<br />对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。<a name="hOowt"></a>## 三、定位与浮动<a name="f12QO"></a>### 3. 对BFC的理解，如何创建BFC块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。<br />通俗来讲：- **BFC是一个独立的布局环境**，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。- 如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。**创建BFC的条件：**- 根元素：body- 元素设置浮动：float 除 none 以外的值- 元素设置绝对定位：position (absolute、fixed)- display 值为：inline-block、table-cell、table-caption、flex等- overflow 值为：hidden、auto、scroll**BFC的特点：**- 垂直方向上，自上而下排列，和文档流的排列方式一致。- 在BFC中上下相邻的两个容器的margin会重叠（也就是上面第六题提到的问题）- 计算BFC的高度时，需要计算浮动元素的高度- BFC区域不会与浮动的容器发生重叠- BFC是独立的容器，容器内部元素不会影响外部元素- 每个元素的左margin值和容器的左border相接触**BFC的作用：**- **解决margin的重叠问题**：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。<br />- **解决高度塌陷的问题**：我们在 对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC就行了。常用的办法是给父元素设置`overflow:hidden`。<br />- **创建自适应两栏布局**：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。<br />
.left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }
复制代码
左侧设置`float:left`，右侧设置ve`rflow: hidden`。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。<a name="vz8RH"></a>### 4. 什么是margin重叠问题？如何解决？**问题描述：**两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，**浮动的元素和绝对定位**这种脱离文档流的元素的外边距不会折叠。重叠只会出现在**垂直方向**。<br />**计算原则：**折叠合并后外边距的计算原则如下：- 如果两者都是正数，那么就去最大者- 如果是一正一负，就会正值减去负值的绝对值- 两个都是负值时，用0减去两个中绝对值大的那个**解决办法：**<br />对于折叠的情况，主要有两种：**兄弟之间重叠**和**父子之间重叠**<br />（1）兄弟之间重叠- 底部元素变为行内盒子：`display: inline-block`- 底部元素设置浮动：`float`- 底部元素的position的值为`absolute/fixed`（2）父子之间重叠- 父元素加入：`overflow: hidden`- 父元素添加透明边框：`border:1px solid transparent`- 子元素变为行内盒子：`display: inline-block`- 子元素加入浮动属性或定位<a name="CU5ut"></a>### 5. 元素的层叠顺序层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。下面是盒模型的层叠规则：<br /><br />对于上图，由上到下分别是：<br />（1）背景和边框：建立当前层叠上下文元素的背景和边框。<br />（2）负的z-index：当前层叠上下文中，z-index属性值为负的元素。<br />（3）块级盒：文档流内非行内级非定位后代元素。<br />（4）浮动盒：非定位浮动元素。<br />（5）行内盒：文档流内行内级非定位后代元素。<br />（6）z-index:0：层叠级数为0的定位元素。<br />（7）正z-index：z-index属性值为正的定位元素。 **<br />**特别说明:** 当定位元素z-index:auto，生成盒在当前层叠上下文中的层级为 0，不会建立新的层叠上下文，除非是根元素。<a name="rvhBz"></a>### 6. position的属性有哪些，区别是什么- **relative**元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。<br />- **fixed**元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。<br /><a name="u1uGY"></a>### 7. **display、float、position的关系**（1）首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。<br />（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值。<br />（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位。<br />（4）如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，则保持指定的display属性值不变。<br />总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display'的值也需要调整；其次，元素的'float'特性的值不是"none"的时候或者它是根元素的时候，调整'display'的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display'特性值同设置值。<a name="6WepM"></a>## 四、场景应用<a name="Oz4Pp"></a>### 3. 实现一个宽高自适应的正方形- 利用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%; } 复制代码
<a name="RNtlq"></a>### 4. 画一条0.5px的线- **采用transform: scale()的方式**，该方法用来定义元素的2D 缩放转换：
transform: scale(0.5,0.5); 复制代码
- **采用meta viewport的方式**
复制代码 ``` 这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果
5. 设置小于12px的字体
在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。
解决办法：
- 使用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文字内容切出做图片，这样不影响兼容也不影响美观。
五、Grid布局
若有收获，就点个赞吧
0 人点赞
