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 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
2. 隐藏元素的方法有哪些
display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
- visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
- opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
- position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
- z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
- clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
3. link和@import的区别
两者都是外部引用CSS的方式，它们的区别如下：
link属于html标签，而@import是css提供的。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是HTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
4. 伪元素和伪类的区别和作用？
伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
p::before {content:"第一章：";}p::after {content:"Hot!";}p::first-line {background:red;}p::first-letter {font-size:30px;}
伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
a:hover {color: #FF00FF}p:first-child {color: red}
总结： 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。
5. CSS3中有哪些新特性
- 选择器CSS3增加了很多选择器，以供样式绑定使用，常用的主要有：
:nth-child(n)：匹配其父标签的第n个子元素，不论元素类型，n可以是数字、关键字、公式
:nth-of-type(n)：选择与之其匹配的父元素的第N个子元素
:first-child：相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应
:empty：选择没有子元素的每个元素[abc*=”def”]：选择adc属性值中包含子串”def”的所有元素
- 动画CSS3新增创建动画方法，通过@keyframes 规则创建动画，在规则中指定 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果，用百分比来规定变化发生的时间，或用”from” 和 “to”（等同于 0% 和 100%）利用animation属性将动画绑定到指定选择器上，至少绑定动画名称与时长。
- 形状变换CSS3新增了transform属性实现元素的旋转、缩放、倾斜平移等形状变换。主要有以下新方法：
translate()：元素从当前位置在x 坐标、y 坐标上移动
rotate()：元素顺时针旋转给定的角度（负值则逆时针旋转）
scale()：通过向量形式定义的缩放值来放大或缩小元素尺寸
skew()：元素按照一定的角度进行倾斜转换
- 文本CSS3新增text-shadow属性可实现文本阴影，text-overflow属性可规定当文本溢出盒子时呈现效果
- 边框CSS3新增边框属性，可呈现更多的边框效果，有以下3个边框属性：border-radius：创建圆角矩形、box-shadow：给盒子添加阴影效果、border-image：可利用图片创建边框
- 过渡CSS3提供transition 属性呈现元素由A样式过渡至B样式，常用两个值定义过渡效果：transition-property：过渡的属性列表，transition-duration：过渡持续的时间
- 盒模型定义CSS3增加了新的用户界面属性来调整标签尺寸、盒尺寸以及外部轮廓等，常用属性有：
resize：指定一个标签可由用户调整大小
outline-offset：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
box-sizing：允许以确切的方式定义适应某个区域的具体内容，可定义盒模型，有三个值：content-box：边框和padding不包含在元素的宽高之内、border-box：边框和padding包含在元素的宽高之内、inherit：从父标签继承 box-sizing 属性值
- Flex布局弹性布局，使页面布局更加方便与灵活，舍弃传统上下排列页面元素，采用双轴排列方式，水平主轴与垂直交叉轴，并按照比例对元素进行放大与缩小，可利用简洁语法实现自适应布局通过6个属性设置容器属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content，设置容器的轴线方向、元素对齐方向、换行通过6个属性设置元素属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self，设置元素的排列顺序、放大/缩小比例、多余空间分配方案、对齐方案。
6. 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中。7. 对BFC的理解，如何创建BFC
块级格式上下文（Block Formatting Context，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是独立的容器，容器内部元素不会影响外部元素
BFC的作用：
- 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
- 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
- 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。 ```css .left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }
左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。<a name="xyemd"></a>### 8. 对盒模型的理解CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型<br />是由四个部分组成的，分别是margin、border、padding和content。<br />标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：- 标准盒模型的width和height属性的范围只包含了content，- IE盒模型的width和height属性的范围包含了border、padding和content。可以通过修改元素的box-sizing属性来改变元素的盒模型：- box-sizing: content-box表示标准盒模型（默认值）- box-sizing: border-box表示IE盒模型（怪异盒模型）<a name="q99ZW"></a>### 9. 说说flexbox（弹性盒布局模型）,以及适用场景？Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局<br />采用Flex布局的元素，称为flex容器container<br />它的所有子元素自动成为容器成员，称为flex项目item<br /><br />容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向<br />每根轴都有起点和终点，这对于元素的对齐非常重要<br />关于flex常用的属性，我们可以划分为容器属性和容器成员属性<br />容器属性有：- flex-direction- flex-wrap- flex-flow- justify-content- align-items- align-content**flex-direction**<br />决定主轴的方向(即项目的排列方向)<br />.container { flex-direction: row | row-reverse | column | column-reverse; } <br />属性对应如下：- row（默认值）：主轴为水平方向，起点在左端- row-reverse：主轴为水平方向，起点在右端- column：主轴为垂直方向，起点在上沿。- column-reverse：主轴为垂直方向，起点在下沿如下图所示：<br /><br />**flex-wrap**<br />弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行<br />.container { flex-wrap: nowrap | wrap | wrap-reverse; } <br />属性对应如下：- nowrap（默认值）：不换行- wrap：换行，第一行在下方- wrap-reverse：换行，第一行在上方默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩<br />**flex-flow**<br />是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap<br />.box { flex-flow: <flex-direction> || <flex-wrap>; } <br />**justify-content**<br />定义了项目在主轴上的对齐方式<br />.box { justify-content: flex-start | flex-end | center | space-between | space-around; } <br />属性对应如下：- flex-start（默认值）：左对齐- flex-end：右对齐- center：居中- space-between：两端对齐，项目之间的间隔都相等- space-around：两个项目两侧间隔相等效果图如下：<br /><br />**align-items**<br />定义项目在交叉轴上如何对齐<br />.box { align-items: flex-start | flex-end | center | baseline | stretch; } <br />属性对应如下：- flex-start：交叉轴的起点对齐- flex-end：交叉轴的终点对齐- center：交叉轴的中点对齐- baseline: 项目的第一行文字的基线对齐- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度**align-content**<br />定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用<br />.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } <br />属性对应如吓：- flex-start：与交叉轴的起点对齐- flex-end：与交叉轴的终点对齐- center：与交叉轴的中点对齐- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍- stretch（默认值）：轴线占满整个交叉轴效果图如下：<br /><br />容器成员属性如下：- order- flex-grow- flex-shrink- flex-basis- flex- align-self**order**<br />定义项目的排列顺序。数值越小，排列越靠前，默认为0<br />.item { order: <integer>; } <br />**flex-grow**<br />上面讲到当容器设为flex-wrap: nowrap;不换行的时候，容器宽度有不够分的情况，弹性元素会根据flex-grow来决定<br />定义项目的放大比例（容器宽度>元素总宽度时如何伸展）<br />默认为0，即如果存在剩余空间，也不放大<br />.item { flex-grow: <number>; } <br />如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）<br /><br />如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍<br /><br />弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效<br />**flex-shrink**<br />定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小<br />.item { flex-shrink: <number>; /* default 1 */ } <br />如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小<br />如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小<br /><br />在容器宽度有剩余时，flex-shrink也是不会生效的<br />**flex-basis**<br />设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸<br />浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定<br />.item { flex-basis: <length> | auto; /* default auto */ } <br />当设置为0的是，会根据内容撑开<br />它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间<br />flex<br />flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，也是比较难懂的一个复合属性<br />.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } <br />一些属性有：- flex: 1 = flex: 1 1 0%- flex: 2 = flex: 2 1 0%- flex: auto = flex: 1 1 auto- flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩flex:1 和 flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别<br />当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸<br />当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑<br />注意：建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值<br />**align-self**<br />允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性<br />默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch<br />.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } <br />效果图如下：<br /><a name="zbBBf"></a>### 10. 回流和重绘在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：- 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置- 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制具体的浏览器解析渲染机制如下所示：<br />- 解析HTML，生成DOM树，解析CSS，生成CSSOM树- 将DOM树和CSSOM树结合，生成渲染树(Render Tree)- Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）- Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素- Display:将像素发送给GPU，展示在页面上在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变<br />当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来<br />当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘<br />**回流触发时机**<br />回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况：- 添加或删除可见的DOM元素- 元素的位置发生变化- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）- 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代- 页面一开始渲染的时候（这避免不了）- 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）还有一些容易被忽略的操作：获取一些特定属性的值<br />offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight<br />这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流。<br />**重绘触发时机**<br />触发回流一定会触发重绘<br />可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）<br />除此之外还有一些其他引起重绘行为：- 颜色的修改- 文本方向的修改- 阴影的修改** 浏览器优化机制**<br />由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列<br />当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据<br />因此浏览器不得不清空队列，触发回流重绘来返回正确的值<br />**三、如何减少**<br />我们了解了如何触发回流和重绘的场景，下面给出避免回流的经验：- 如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)- 避免设置多项内联样式- 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)- 避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算- 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响- 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘- 避免使用 CSS 的 JavaScript 表达式在使用 JavaScript 动态插入多个节点时, 可以使用DocumentFragment. 创建后一次插入. 就能避免多次的渲染性能<br />但有时候，我们会无可避免地进行回流或者重绘，我们可以更好使用它们<br />例如，多次修改一个把元素布局的时候，我们很可能会如下操作<a name="rgGBl"></a>### 11. 两栏布局的实现一般两栏布局指的是**左边一栏宽度固定，右边一栏宽度自适应**，两栏布局的具体实现：- 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。- 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。- 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。- 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。- 利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。<a name="SswPX"></a>### 12. 三栏布局的实现三栏布局一般指的是页面中一共有三栏，**左右两栏宽度固定，中间自适应的布局**，三栏布局的具体实现：- 利用**绝对定位**，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。- 利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。- 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后- 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。```css.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 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。 ```css .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; }
<a name="fBaCd"></a>### 13. 为什么需要清除浮动？清除浮动的方式**浮动的定义：** 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。<br />**浮动的工作原理：**- 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）- 浮动元素碰到包含它的边框或者其他浮动元素的边框停留浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。<br />**浮动元素引起的问题？**- 父元素的高度无法被撑开，影响与父元素同级的元素- 与浮动元素同级的非浮动元素会跟随其后- 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构**清除浮动的方式如下：**- 给父级div定义height属性- 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式- 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto- 使用 ::after 伪元素。```css.clearfix::after{content: "";display: block;clear: both;}
14. CSS3中的transform有哪些属性
CSS3转换，我们可以移动translate，比例化scale，旋转rotate，和倾斜转换skew元素。
transform-origin: 原点水平位置 原点垂直位置; 默认圆点是盒子中心点
Y轴向下，X轴向右。
使用translate实现绝对定位的元素居中：
position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
多重转换原理，中间用空格分开。
旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
15. CSS3 过渡 transition
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要添加多个样式的变换效果，添加的属性由逗号分隔。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
下表列出了所有的过渡属性:
- transition 简写属性，用于在一个属性中设置四个过渡属性。
- transition-property 规定应用过渡的 CSS 属性的名称。
- transition-duration 定义过渡效果花费的时间。默认是 0。
- transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
- transition-delay 规定过渡效果何时开始。默认是 0。 ```css div { width:100px; height:100px; background:red; transition:width 1s linear 2s; / Safari / -webkit-transition:width 1s linear 2s; }
div:hover { width:200px; }
<a name="gvYdt"></a>### 16. CSS3 动画当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。<br />指定至少这两个CSS3的动画属性绑定向一个选择器：- 规定动画的名称- 规定动画的时长```css<style>div {width:100px;height:100px;background:red;animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */}@keyframes myfirst {from {background:red;}to {background:yellow;}}</style>
您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
/*当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：*/@keyframes myfirst {0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}/*改变背景色和位置：*/@keyframes mysecond {0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0px;}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。step(数字)：逐帧动画 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。paused暂停 | 3 |
使用简写的动画 animation 属性：animation: myfirst 5s linear 2s infinite alternate;
17. 实现一个三角形
CSS绘制三角形主要用到的是border属性，也就是边框。
平时在给盒子设置边框时，往往都设置很窄，就可能误以为边框是由矩形组成的。实际上，border属性是右三角形组成的，下面看一个例子：
div {width: 0;height: 0;border: 100px solid;border-color: orange blue red green;}
将元素的长宽都设置为0，显示出来的效果是这样的：
所以可以根据border这个特性来绘制三角形：
div {width: 0;height: 0;border-bottom: 50px solid red;border-right: 50px solid transparent;border-left: 50px solid transparent;}
若有收获，就点个赞吧
0 人点赞
