作文导读：以下题目是根据网上多份面经收集而来的，题目相同意味着被问的频率比较高，有问题欢迎留言讨论，喜欢可以点赞关注。
哪些操作会引起页面回流（Reflow）
谈谈重绘(repaint)和回流(reflow)
比如我们增删DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树结构发生变化，那么肯定要重新构建DOM树，而DOM树与渲染树是紧密相连的，DOM树构建完，渲染树也会随之对页面进行再次渲染，这个过程就叫回流。当你给一个元素更换颜色，这样的行为是不会影响页面布局的，DOM树不会变化，但颜色变了，渲染树得重新渲染页面，这就是重汇
你应该能感觉到，回流的代价要远大于重绘。且回流必然会造成重绘，但重绘不一定会造成回流。
1.由于display为none的元素在页面不需要渲染，渲染树构建不会包括这些节点；但visibility为hidden的元素会在渲染树中。因为display为none会脱离文档流，visibility为hidden虽然看不到，但类似与透明度为0，其实还在文档流中，还是有渲染的过程。
2.尽量避免使用表格布局，当我们不为表格td添加固定宽度时，一列的td的宽度会以最宽td的宽作为渲染标准，假设前几行td在渲染时都渲染好了，结果下面某行的一个td特别宽，table为了统一宽，前几行的td会回流重新计算宽度，这是个很耗时的事情。
结合上面的解释，引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。只是样式的变化，不会引起DOM树变化，页面布局变化的行为叫重绘，且重绘不一定会便随回流。
documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。documentFragment用来批量更新。
image.png
标准盒模型和怪异盒模型，怎么控制x2
只要在文档首部加了doctype申明，即使用了标准盒模型，而不加，则会由浏览器自己决定，比如，ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签，不定义DOCTYPE，会触发怪异模式
box-sizing: content-box || border-box || inherit || initial
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
盒子模型，以及标准情况和IE下的区别
而标准盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border
css3触发怪异盒子模型
absolute的containing block计算方式跟正常流有什么不同？
image.png
CSS里的visibility属性有个collapse属性值？
在通常情况下，使用visibility: collapse;和使用visibility:hidden值没有什么区别。
在非谷歌且是在table的tr上使用collapse，效果同display:none;
在ie低版本（如7）下使用visibility: collapse;没有效果。
`
对于CSS里的visibility属性，相信你用过不下几百次。大多时候，你会把它的值设置成visible(这是所有页面元素的缺省值)，或者是hidden。后者相当于display: none，但仍然占用页面空间。其实visibility可以有第三种值，就是collapse。当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。
display哪些取值
display的取值有很多种，下面列出比较常用的几种取值，还有其它的少用的值没有列出来：
1、none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。
2、inline 行内元素 元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
示例元素：span,b,i,a,u,sub,sup,strong,em
3、block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
示例元素：div,h1-h6,ul,ol,dl,p
4、inline-block 行内块元素 与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding。
示例元素：input,button,img
5、list-item 列表元素
示例元素：li
6、table 会作为块级表格来显示(类似于
)，表格前后带有换行符。
7、inline-table 会作为内联表格来显示(类似于)，表格前后没有换行符。
8、flex 多栏多列布局，火狐可以直接使用，谷歌和opera需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。
设置元素浮动后，该元素的display值是多少？
都是block
display:none与visibility：hidden的区别？
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
3.在css3的transition中支持visibility属性，但是不支持display，因为transition可以延迟执行，因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验
display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘
position跟display、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
1如果元素的display为none,那么元素不被渲染,position,float不起作用,
2如果元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起作用.
3如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.
4有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
display:inline-block 什么时候会显示间隙？
CSS属性overflow属性定义溢出元素内容区的内容会如何处理?#####阐述一下CSS Sprites
一行或多行文本超出隐藏
position有那些，各自效果
以下只是常用的属性值
inherit 规定应该从父元素继承 position 属性的值。
static：默认值；
不脱离文档流，top，right，bottom，left等属性不生效。
绝对定位：absolute
绝对定位的关键是找对参照物，要成为绝对定位元素的参照物必须满足以下两个条件：
1.参照物和绝对定位元素必须是包含与被包含关系；
2.该参照物必须具有定位属性；
如果找不到满足以上两个条件的父包含块，那么相对于浏览器窗口进行定位。
注：设置了position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右margin为auto将会失效；我们通过 left、top、bottom、right来决定元素位置。
相对定位：relative
参照物：元素偏移前位置
注：设置了相对定位，左右 margin为auto仍然有效、并且不会脱离文档流。
固定定位：fixed
参照物：浏览器窗口；
注：固定定位会脱离文档流；
当绝对定位和固定定位参照物都是浏览器窗口时的区别： 当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动。
sticky粘性定位:该定位基于用户滚动的位置
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。也就是说是relative和fixed的合体。
button {
position: sticky;
top: 10px;
}
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效
介绍position属性包括CSS3新增
sticky粘性定位:该定位基于用户滚动的位置
position:fixed;在android下无效怎么处理？
发现原来使用isscroll.js滚动库以及在移动端设置-webkit-overflow-scrolling属性时也会出现同样的问题。
前两种情况下，fixed失效的原因是使用的插件时给该元素的父级元素设置了transform： translate（0, 0）属性，该属性设置之后，子元素固定定位失效。
失效的解决办法是：对父级元素设置transform: none; 或者display：inline,后一种方法规避这种设置
介绍css3中position:sticky
对BFC规范(块级格式化上下文：block formatting context)的理解？
https://www.jianshu.com/p/7f82ab2542bd
image.png
什么是BFC，如何触发
image.png
image.png
上下margin重合的问题
https://www.jianshu.com/p/58a6edeff0f2
a、全部都为正值，取最大者；
b、在 margin中有正值有负值的时候,要从所有负值中选出绝对值最大的,所有正值中选择绝对值最大的,二者相加,此例的结果即为: 100px + (-50)px =50px;
c、没有正值，取绝对值最大的。
总而言之 取绝对值最大的相加
有哪些DOM接口可以获取一个元素的尺寸（宽度和高度）
clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距大小，不包括边框（IE下实际包括）、外边距、滚动条部分
offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分
clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null
image.png
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。包括滚动条
为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
为什么出现浮动？
浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。问题出现了，父元素高度塌陷了。一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。
清除浮动的两大基本方法：
方法1：脚底插入clear:both;
方法2：父元素BFC(ie8+)或haslayout(ie6/ie7)
在父元素的最后加一个冗余元素并为其设置clear:both
此方法的缺点是，必要在页面中添加很多没有意义的冗余元素，太麻烦，而且不符合语义
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
2.采用伪元素，这里我们使用:after。添加一个类clearfix： （推荐）
.clearfix:after {
content:"";
display:table; /*采用此方法可以有效避免浏览器兼容问题*/
clear:both;
}
image.png
右边宽度固定，左边自适应
position布局 flex布局 BFC原理 calc
css如何实现高度自适应
用padding撑开
js
calc
css垂直居中
https://www.cnblogs.com/clj2017/p/9293363.html
这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
通过verticle-align:middle实现CSS垂直居中。vertical生效的前提是元素的display：inline-block。
flex align-items
line-height
position absolute
居中方式
水平垂直居中
https://www.jianshu.com/p/907f99004c3e
flex
postion
calc
居中为什么要使用transform（为什么不使用marginLeft/Top）
https://blog.csdn.net/callmeCassie/article/details/89290945
transform 属于合成属性（composite property），对合成属性进行 transition/animation 动画将会创建一个合成层（composite layer），这使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理（texture）上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘（repaint），浏览器会通过重新复合（recomposite）来形成一个新的帧。
top/left属于布局属性，该属性的变化会导致重排（reflow/relayout），所谓重排即指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销
对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到 GPU 中
对合成属性进行动画，浏览器会为元素创建一个独立的复合层，当元素内容没有发生改变，该层就不会被重绘，浏览器会通过重新复合来创建动画帧
两个元素块，一左一右，中间相距10像素
上下固定，中间滚动布局如何实现
fixed
sticky
flex
meta viewport 移动端适配
CSS实现宽度自适应100%，宽高16:9的比例的矩形
padding-bottom
position absolute
calc
js
元素竖向的百分比设定是相对于容器的高度吗？
对于竖直方向的margin和padding，参照父元素的宽度。
对于水平方向的margin和padding，也是参照父元素的宽度。
一般而言，子元素的百分比设定都是以父元素为依据，子元素的宽度百分比依赖父元素的宽度百分比，子元素的高度百分比依赖父元素的高度百分比。那么margin ，padding这些属性也是如此
什么是响应式设计？响应式设计的基本原理是什么？如何兼容
响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及 使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们 的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。
响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式, 如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种 设计方案满足所有情况？
基本原理: 媒体查询 @media，页面头部必须有meta声明viewport：
image.png
css3新特性
2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码
3.动画 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码
4.形状转换 transform:适用于2D或3D转换的元素
rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);
5.选择器
6.阴影 box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;复制代码
7.边框 border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;
8.背景 background-clip 制定背景绘制（显示）区域 background-origin background-size
1.（background-clip: border-box;）默认情况（从边框开始绘制）
2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！
3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！
9.反射 -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
10.文字换行 语法：word-break: normal|break-all|keep-all;、语法：word-wrap: normal|break-word; 超出省略号 text-overflow:clip|ellipsis|string 文字阴影 语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
11.颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码
12.渐变
13.Filter（滤镜）：黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)
14.弹性布局 Flex
15.栅格布局 grid
16.多列布局
17.盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图
18.媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！
选择器优先级
image.png
谈谈css预处理器机制
image.png
贝塞尔曲线
贝塞尔曲线在线取值
image.png
使用css实现一个持续的动画效果
animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}
网页的渲染
image.png
改变placeholder的字体颜色
***只适用于pc端
input::-webkit-input-placeholder {
/* WebKit browsers */
font-size:14px;
color: #333;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size:14px;
color: #333;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
font-size:14px;
color: #333;
}
如何写一个CSS库,要注意哪些东西?
总是类名优先
组件代码放在一起
使用一致的类命名空间
维护命名空间和文件名之间的严格映射
避免组件外的样式泄露
避免组件内的样式泄露
遵守组件边界
松散地整合外部样式
移动端的边框0.5px,你有几种方式实现？
建议自己百度; 伪类缩放：
devicePixelRatio:它是window对象中有一个devicePixelRatio属性，设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素;
box-shadow:网上看到说使用box-shadow模拟边框，box-shadow: inset 0px -1px 1px -1px #06c;
Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #fff;//设置成元素原本的颜色
background-image: none;
color: rgb(0, 0, 0);
}
//方法2：由掘金大神 (licongwen )补充
input:-webkit-autofill {
-webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色
}
以下题目是根据网上多份面经收集而来的，题目相同意味着被问的频率比较高，有问题欢迎留言讨论，喜欢可以点赞关注。
哪些操作会引起页面回流（Reflow）
谈谈重绘(repaint)和回流(reflow)
比如我们增删DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树结构发生变化，那么肯定要重新构建DOM树，而DOM树与渲染树是紧密相连的，DOM树构建完，渲染树也会随之对页面进行再次渲染，这个过程就叫回流。当你给一个元素更换颜色，这样的行为是不会影响页面布局的，DOM树不会变化，但颜色变了，渲染树得重新渲染页面，这就是重汇
你应该能感觉到，回流的代价要远大于重绘。且回流必然会造成重绘，但重绘不一定会造成回流。
1.由于display为none的元素在页面不需要渲染，渲染树构建不会包括这些节点；但visibility为hidden的元素会在渲染树中。因为display为none会脱离文档流，visibility为hidden虽然看不到，但类似与透明度为0，其实还在文档流中，还是有渲染的过程。
2.尽量避免使用表格布局，当我们不为表格td添加固定宽度时，一列的td的宽度会以最宽td的宽作为渲染标准，假设前几行td在渲染时都渲染好了，结果下面某行的一个td特别宽，table为了统一宽，前几行的td会回流重新计算宽度，这是个很耗时的事情。
结合上面的解释，引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。只是样式的变化，不会引起DOM树变化，页面布局变化的行为叫重绘，且重绘不一定会便随回流。
documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。documentFragment用来批量更新。
image.png
标准盒模型和怪异盒模型，怎么控制x2
只要在文档首部加了doctype申明，即使用了标准盒模型，而不加，则会由浏览器自己决定，比如，ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签，不定义DOCTYPE，会触发怪异模式
box-sizing: content-box || border-box || inherit || initial
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
盒子模型，以及标准情况和IE下的区别
而标准盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border
css3触发怪异盒子模型
absolute的containing block计算方式跟正常流有什么不同？
image.png
CSS里的visibility属性有个collapse属性值？
在通常情况下，使用visibility: collapse;和使用visibility:hidden值没有什么区别。
在非谷歌且是在table的tr上使用collapse，效果同display:none;
在ie低版本（如7）下使用visibility: collapse;没有效果。
`
对于CSS里的visibility属性，相信你用过不下几百次。大多时候，你会把它的值设置成visible(这是所有页面元素的缺省值)，或者是hidden。后者相当于display: none，但仍然占用页面空间。其实visibility可以有第三种值，就是collapse。当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。
display哪些取值
display的取值有很多种，下面列出比较常用的几种取值，还有其它的少用的值没有列出来：
1、none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。
2、inline 行内元素 元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
示例元素：span,b,i,a,u,sub,sup,strong,em
3、block 块级元素 会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。
示例元素：div,h1-h6,ul,ol,dl,p
4、inline-block 行内块元素 与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding。
示例元素：input,button,img
5、list-item 列表元素
示例元素：li
6、table 会作为块级表格来显示(类似于
)，表格前后带有换行符。
7、inline-table 会作为内联表格来显示(类似于)，表格前后没有换行符。
8、flex 多栏多列布局，火狐可以直接使用，谷歌和opera需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。
设置元素浮动后，该元素的display值是多少？
都是block
display:none与visibility：hidden的区别？
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
3.在css3的transition中支持visibility属性，但是不支持display，因为transition可以延迟执行，因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验
display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘
position跟display、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
1如果元素的display为none,那么元素不被渲染,position,float不起作用,
2如果元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起作用.
3如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.
4有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
display:inline-block 什么时候会显示间隙？
CSS属性overflow属性定义溢出元素内容区的内容会如何处理?#####阐述一下CSS Sprites
一行或多行文本超出隐藏
position有那些，各自效果
以下只是常用的属性值
inherit 规定应该从父元素继承 position 属性的值。
static：默认值；
不脱离文档流，top，right，bottom，left等属性不生效。
绝对定位：absolute
绝对定位的关键是找对参照物，要成为绝对定位元素的参照物必须满足以下两个条件：
1.参照物和绝对定位元素必须是包含与被包含关系；
2.该参照物必须具有定位属性；
如果找不到满足以上两个条件的父包含块，那么相对于浏览器窗口进行定位。
注：设置了position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右margin为auto将会失效；我们通过 left、top、bottom、right来决定元素位置。
相对定位：relative
参照物：元素偏移前位置
注：设置了相对定位，左右 margin为auto仍然有效、并且不会脱离文档流。
固定定位：fixed
参照物：浏览器窗口；
注：固定定位会脱离文档流；
当绝对定位和固定定位参照物都是浏览器窗口时的区别： 当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动。
sticky粘性定位:该定位基于用户滚动的位置
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。也就是说是relative和fixed的合体。
button {
position: sticky;
top: 10px;
}
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效
介绍position属性包括CSS3新增
sticky粘性定位:该定位基于用户滚动的位置
position:fixed;在android下无效怎么处理？
发现原来使用isscroll.js滚动库以及在移动端设置-webkit-overflow-scrolling属性时也会出现同样的问题。
前两种情况下，fixed失效的原因是使用的插件时给该元素的父级元素设置了transform： translate（0, 0）属性，该属性设置之后，子元素固定定位失效。
失效的解决办法是：对父级元素设置transform: none; 或者display：inline,后一种方法规避这种设置
介绍css3中position:sticky
对BFC规范(块级格式化上下文：block formatting context)的理解？
https://www.jianshu.com/p/7f82ab2542bd
image.png
什么是BFC，如何触发
image.png
image.png
上下margin重合的问题
https://www.jianshu.com/p/58a6edeff0f2
a、全部都为正值，取最大者；
b、在 margin中有正值有负值的时候,要从所有负值中选出绝对值最大的,所有正值中选择绝对值最大的,二者相加,此例的结果即为: 100px + (-50)px =50px;
c、没有正值，取绝对值最大的。
总而言之 取绝对值最大的相加
有哪些DOM接口可以获取一个元素的尺寸（宽度和高度）
clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距大小，不包括边框（IE下实际包括）、外边距、滚动条部分
offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分
clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null
image.png
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。包括滚动条
为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
为什么出现浮动？
浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。问题出现了，父元素高度塌陷了。一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。
清除浮动的两大基本方法：
方法1：脚底插入clear:both;
方法2：父元素BFC(ie8+)或haslayout(ie6/ie7)
在父元素的最后加一个冗余元素并为其设置clear:both
此方法的缺点是，必要在页面中添加很多没有意义的冗余元素，太麻烦，而且不符合语义
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
2.采用伪元素，这里我们使用:after。添加一个类clearfix： （推荐）
.clearfix:after {
content:"";
display:table; /*采用此方法可以有效避免浏览器兼容问题*/
clear:both;
}
image.png
右边宽度固定，左边自适应
position布局 flex布局 BFC原理 calc
css如何实现高度自适应
用padding撑开
js
calc
css垂直居中
https://www.cnblogs.com/clj2017/p/9293363.html
这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。
通过verticle-align:middle实现CSS垂直居中。vertical生效的前提是元素的display：inline-block。
flex align-items
line-height
position absolute
居中方式
水平垂直居中
https://www.jianshu.com/p/907f99004c3e
flex
postion
calc
居中为什么要使用transform（为什么不使用marginLeft/Top）
https://blog.csdn.net/callmeCassie/article/details/89290945
transform 属于合成属性（composite property），对合成属性进行 transition/animation 动画将会创建一个合成层（composite layer），这使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理（texture）上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘（repaint），浏览器会通过重新复合（recomposite）来形成一个新的帧。
top/left属于布局属性，该属性的变化会导致重排（reflow/relayout），所谓重排即指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销
对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到 GPU 中
对合成属性进行动画，浏览器会为元素创建一个独立的复合层，当元素内容没有发生改变，该层就不会被重绘，浏览器会通过重新复合来创建动画帧
两个元素块，一左一右，中间相距10像素
上下固定，中间滚动布局如何实现
fixed
sticky
flex
meta viewport 移动端适配
CSS实现宽度自适应100%，宽高16:9的比例的矩形
padding-bottom
position absolute
calc
js
元素竖向的百分比设定是相对于容器的高度吗？
对于竖直方向的margin和padding，参照父元素的宽度。
对于水平方向的margin和padding，也是参照父元素的宽度。
一般而言，子元素的百分比设定都是以父元素为依据，子元素的宽度百分比依赖父元素的宽度百分比，子元素的高度百分比依赖父元素的高度百分比。那么margin ，padding这些属性也是如此
什么是响应式设计？响应式设计的基本原理是什么？如何兼容
响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及 使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们 的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。
响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式, 如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种 设计方案满足所有情况？
基本原理: 媒体查询 @media，页面头部必须有meta声明viewport：
我最喜欢的水果一文由杰瑞文章网免费提供，本站为公益性作文网站，此作文为网上收集或网友提供，版权归原作者所有，如果侵犯了您的权益，请及时与我们联系，我们会立即删除！
杰瑞文章网友情提示：请不要直接抄作文用来交作业。你可以学习、借鉴、期待你写出更好的作文。
说说你对这篇作文的看法吧
