1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin， 宽高指的是 content 的宽高低版本IE盒子模型：内容（content+padding+border）+ 边界margin，宽高指的是 content+padding+border 部分的宽高问题的拓展：CSS 如何设置这两种模型？box-sizing : content-box box-sizing : border-box JS 如何设置获取盒模型对应的宽和高？dom.style.width/height;//设置获取的是内联样式 dom.currentStyle.width/height;//只有IE支持 window.getComputedStyle(dom).width/height;//兼容性好 dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置复制代码 实例题（根据盒模型解释边距重叠）？该例子是父子边距重叠，还有兄弟元素的边距重叠

BFC（边距重叠解决方案）？2. box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-boxcontext-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 content + border + padding 部分的高/宽3. 对 BFC 规范(块级格式化上下文：block formatting context)的理解？是什么？BFC是（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）为什么？一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。BFC 规定了内部的 Block Box 如何布局。怎么样？内部的 Box 会在垂直方向上一个接一个放置。Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。每个元素的 margin box 的左边，与包含块 border box 的左边相接触。BFC 的区域不会与 float box 重叠。BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。计算 BFC 的高度时，浮动元素也会参与计算。触发 BFC的条件？根元素，即 htmlfloat 的值不为none（默认）overflow 的值不为 visible（默认）display 的值为 inline-block、table-cell、table-captionposition 的值为 absolute 或 fixed4. CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？CSS选择符：id选择器（ # myid）类选择器（.myclassname）标签(元素)选择器（p, h1, p）相邻选择器（h1 + p）子选择器（ul > li）后代选择器（li a）通配符选择器（ * ）属性选择器（a[rel = “external”]）伪类选择器（a:hover, li:nth-child）伪元素选择器、分组选择器。继承性：可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd；不可继承的样式：border, padding, margin, width, height优先级（就近原则）：!important > [ id > class > tag ]：优先级算法计算：优先级就近原则，同权重情况下样式定义最近者为准!important 比内联优先级高!important>id >class>tagimportant比内联优先级高元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000!important声明的样式优先级最高，如果冲突再进行计算。如果优先级相同，则选择最后出现的样式。继承得到的样式的优先级最低。5. CSS3新增伪类有那些? p:first-of-type 选择属于其父元素的首个

元素的每个

元素。 p:last-of-type 选择属于其父元素的最后

元素的每个

元素。 p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。 p:only-child 选择属于其父元素的唯一子元素的每个

元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。 :enabled :disabled 控制表单控件的禁用状态。 :checked，单选框或复选框被选中。 :before在元素之前添加内容，也可以用来做清除浮动 :after在元素之后添加内容 6. 如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？如何居中一个img（position定位）水平居中p：border: 1px solid red; margin: 0 auto; height: 50px; width: 80px; 水平垂直居中一个浮动元素（position定位）第一种：未知元素宽高

我想居中显示

第二种：已知元素宽高的

我想居中显示

如何垂直居中一个img（display : table-cell 或者 position定位）

绝对定位的p水平垂直居中：border: 1px solid black; position: absolute; width: 200px; height: 100px; margin: auto; left: 0; right: 0; top:0; bottom:0; 7. display 有哪些值？说明他们的作用?1、display的值有：none，inline，block，list-item，inline-block，table，inline-table，table-caption，table-cell，table-row，table-row-group，table-column，table-column-group，table-footer-group，table-header-group，run-in，box，inline-box，flexbox，inline-flexbox，flex，inline-flex2、作用：none： 表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间 ，然visibility：hidden就保留inline（默认值）：表示指定对象为内联元素block： 指定对象为块元素。list-item： 指定对象为列表项目inline-block： 指定对象为内联块元素。（这是CSS2中的属性）table： 指定对象作为块元素级的表格。类同于html标签table（CSS2）inline-table： 指定对象作为内联元素级的表格。类同于html标签table（CSS2）table-caption： 指定对象作为表格标题。类同于html标签caption（CSS2）table-cell： 指定对象作为表格单元格。类同于html标签td（CSS2）table-row： 指定对象作为表格行。类同于html标签tr（CSS2）table-row-group： 指定对象作为表格行组。类同于html标签tbody（CSS2）table-column： 指定对象作为表格列。类同于html标签col（CSS2）table-column-group： 指定对象作为表格列组显示。类同于html标签colgroup（CSS2）table-header-group： 指定对象作为表格标题组。类同于html标签thead（CSS2）table-footer-group： 指定对象作为表格脚注组。类同于html标签tfoot（CSS2）run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）box： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）flex： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）8. position 的值？ absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持）元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。 static默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。 css 定位还有一个新增属性，粘性定位 sticky，它主要用在对 scroll 事件的监听上；粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如： one { position: sticky; top: 10px; } 在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。更多关于 sticky 的介绍，请点击查看 粘性定位介绍9. CSS3有哪些新特性？新增各种 CSS 选择器 :not( p) 选择每个非p的元素；p:empty 选择每个没有任何子级的p元素（包括文本节点）边框（Borders）：p{ border:2px solid; border-radius:25px; //用于设置圆角 box-shadow: 10px 10px 5px #888888; //水平阴影 垂直阴影 模糊距离 阴影颜色 border-image:url(border.png) 30 30 round;// 设置所有边框图像的速记属性。 } 背景 background-clip（规定背景图的绘制区域），background-origin，background-sizep{ background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; //规定背景图的尺寸 background-origin:content-box;//规定背景图的定位区域 } // 多背景 body{ background-image:url(img_flwr.gif),url(img_tree.gif); } 线性渐变 （Linear Gradients） 向下/向上/向左/向右/对角方向background: linear-gradient(direction, color-stop1, color-stop2, ...); 文本效果 阴影text-shadow，textwrap，word-break，word-wrap；2D 转换 transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg) rotate()3D转换 perspective()；transform是向元素应用 2D 或者 3D 转换；过渡 transition动画多列布局 （multi-column layout）盒模型flex 布局多媒体查询 定义两套css，当浏览器的尺寸变化时会采用不同的属性10. 请解释一下 CSS3 的 flexbox（弹性盒布局模型）,以及适用场景？解释：该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。11. 用纯CSS创建一个三角形的原理是什么？1.采用的是均分原理盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部分首先，需要把元素的宽度、高度设为0。然后设置边框样式。width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000; 12. 一个满屏 品 字布局如何设计?第一种真正的品字：三块高宽是确定的上面那块用margin: 0 auto;居中；下面两块用float或者inline-block不换行；用margin调整位置使他们居中。第二种全屏的品字布局:上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。13. 常见的兼容性问题？不同浏览器的标签默认的margin和padding不一样。解决办法是加一个全局的*{margin:0;padding:0;} 来统一；IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline; 将其转化为行内属性。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/} 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。超链接访问过后hover样式就不出现了，因为被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A :a:link {} a:visited {} a:hover {} a:active {} IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.14. 写出几种IE6 BUG的解决方法 双边距BUG float引起的 使用display 3像素问题 使用float引起的 使用dislpay:inline -3px 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active Ie z-index问题 给父级添加position:relative Png 透明 使用js代码 改 Min-height 最小高度 !Important 解决’ select 在ie6下遮盖 使用iframe嵌套 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px) ie 6 不支持!important 15. 为什么要初始化 CSS 样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。16. absolute 的 containing block(容器块)计算方式跟正常流有什么不同？无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；否则,则由这个祖先元素的 padding box 构成。如果都找不到，则为 initial containing block。补充： static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分） absolute: 向上找最近的定位为absolute/relative的元素 fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block 17. CSS里的 visibility 属性有个 collapse 属性值是干吗用的？在不同浏览器下以后什么区别？用处：当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟 display: none 一样，也就是说，它们占用的空间也会释放。在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别。在火狐浏览器、Opera和IE11里，使用 collapse 值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。18. display:none 与 visibility:hidden 的区别是什么？display : none 隐藏对应的元素，在文档布局中不再分配空间（回流+重绘）visibility:hideen 隐藏对应的元素，在文档布局中仍保留原来的空间（重绘）使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。19. position 跟 display、overflow、float 这些特性相互叠加后会怎么样？display 属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。20. 为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？优缺点是什么？你认为最好的是哪一种？为什么？出现浮动的原因：浮动元素碰到包含它的边框或者浮动元素的边框停留。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。清除浮动的方式：父级p定义height最后一个浮动元素后加空 p 标签 并添加样式 clear:both。（理论上能清除任何标签，增加无意义的标签）包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。父级 p 定义 zoom（空标签元素清除浮动而不得不增加无意义代码的弊端，使用zoom:1用于兼容IE）用after伪元素清除浮动（用于非IE浏览器）清除浮动的方式1、父级p定义height原理：父级p手动定义height，就解决了父级p无法自动获取到高度的问题优点：简单，代码少，容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级p不一样时，会产生问题建议：不推荐使用，只建议高度固定的布局时使用2、结尾处加空 p 标签 clear:both原理：添加一个空p，利用css提高的clear:both清除浮动，让父级p能自动获取到高度优点：简单，代码少，浏览器支持好，不容易出现怪问题缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空p，让人感觉很不爽建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法3、父级 p 定义 overflow:hidden原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度优点：简单，代码少，浏览器支持好缺点：不能和position配合使用，因为超出的尺寸的会被隐藏建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用4、父级p定义伪类 :after 和 zoom原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持建议：推荐使用，建议定义公共类，以减少CSS代码(1) 在子元素后添加一个空p p{clear:both;}(2) 在父元素中{overflow:hidden|auto;zoom:1}(3) :after伪选择符，在父容器的尾部自动创建一个子元素.clearfix:after { content: "\\0020";display: block;height: 0;clear: both; } .clearfix { zoom: 1; } "clearfix"是父容器的class名称，"content:“020”;"是在父容器的结尾处放一个空白符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。:after选择符IE 6不支持,添加一条IE 6的独有命令"zoom:1;"就行了.21. 上下 margin 重合的问题在重合元素外包裹一层容器，并触发该容器生成一个BFC。例子：

22. 设置元素浮动后，该元素的 display 值是多少？自动变成display:block23. 移动端的布局用过媒体查询吗？通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。html:里边 CSS :@media only screen and (max-device-width:480px) { /css样式/} 24. 什么是CSS 预处理器 / 后处理器？大家为什么要使用他们？ 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。 CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。 其它 CSS 预处理器语言：Sass（SCSS）LESSStylusTurbineSwithch CSSCSS CacheerDT CSS 为什么要使用它们？25. CSS优化、提高性能的方法有哪些？优化主要还是朝网络传输方面和减少不必要的渲染考虑1.发布前压缩CSS，减少数据传输量。2.合并属性，如margine-left:5px;margine-top:10px 这个就可以合并成一条的。3.合理设计CSS 布局，注意复用样式，减少渲染上花的时间。class和ID的选择，少用*这种全局匹配，合理设置基本样式（如设置table{}）提高复用。4.减少低效代码的使用，如滤镜，express表达式，!import引入。5.其它技术，如CSS SPRITE等。ps:CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。26. 浏览器是怎样解析CSS选择器的？CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。27. 在网页中的应该使用奇数还是偶数的字体？为什么呢？使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。28. margin 和 padding 分别适合什么场景使用？何时应当使用margin需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。何时应当时用padding需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。浏览器兼容性问题在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。29. 元素竖向的百分比设定是相对于容器的高度吗？当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。30. 全屏滚动的原理是什么？用到了CSS的哪些属性？原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现overflow：hidden；transition：all 1000ms ease；31. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？ 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。 页面头部必须有meta声明的viewport。 32. 视差滚动效果？视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。CSS3实现优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器jQuery实现通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。优点：能兼容到各个版本的，效果可控性好缺点：开发起来对制作者要求高插件实现方式例如：parallax-scrolling，兼容性十分好33. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。 :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after 注意:对于IE6/7/8仅支持单冒号表示法，而现代浏览器同时支持这两种表示法。另外，在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。 34. 你对line-height是如何理解的？行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。多行文本垂直居中：需要设置display属性为inline-block。35. 怎么让Chrome支持小于12px 的文字？p{ font-size:10px; -webkit-transform:scale(0.8);//0.8是缩放比例 } 36. 让页面里的字体变清晰，变细用CSS怎么做？-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用-webkit-font-smoothing：antialiased 是最佳的，灰度平滑。37. position:fixed; 在 android 下无效怎么处理 ？复制代码38. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。39. li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？原因：行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。解决方法：解决：可以将

代码全部写在一排浮动li中float：left在ul中用font-size：0（谷歌不支持）；可以将 ul{letter-spacing: -4px;};li{letter-spacing: normal;}40. display:inline-block 什么时候会显示间隙？什么时候有?元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。解决方法：解决元素之间的空白符缺点：代码的可读性变差。

child1

child2

child1

child2

为父元素中设置font-size: 0，在子元素上重置正确的font-size缺点：inline-block元素必须设定字体，不然行内元素中的字体不会显示。 增加了代码量。

child1

child2

为inline-block元素添加样式float:left缺点：float布局会有高度塌陷问题设置子元素margin值为负数缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用。注意：当marigin-right使用相对单位em来表示时，Chrome下可以正常去除间距,而Firefox下元素之间有重叠。.parent .child + .child { margin-left: -2px } 最优解在这，设置父元素，display:table和word-spacing.parent{ display: table; word-spacing:-1em; /*兼容其他浏览器，题主还未验证*/ } 41. 有一个高度自适应的p，里面有两个p，一个高度100px，希望另一个填满剩下的高度外层p使用position：relative；高度要求自适应的p使用position: absolute; top: 100px; bottom: 0; left: 042. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式优点是：压缩比高，色彩好。 大多数地方都可以用。jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。43. style 标签写在 body 后与 body前有什么区别？页面加载自上而下 当然是先加载样式。写在 body 标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）44. CSS属性overflow属性定义溢出元素内容区的内容会如何处理?参数是 scroll 时候，必会出现滚动条。参数是 auto 时候，子元素内容大于父元素时出现滚动条。参数是 visible 时候，溢出的内容出现在父元素之外。参数是 hidden 时候，溢出隐藏。45. CSS Sprites是什么？它的优势和劣势？CSS Sprites小图片背景共享技术。它把一堆小的图片整合到一张大的图片上。然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。优势：1.很好的减少网页的请求，大大提高页面的性能；2.减少图片的字节；3.解决了网页设计师在图片命名上的困扰；4.更换风格方便，维护方便。劣势：1.图片合并时需预留好足够空间，宽屏、高分辨率的屏幕下易出现背景断裂；2.开发较麻烦，测量繁琐；（可使用样式生成器）3.维护麻烦，背景少许改动有可能影响整张图片，使得字节增加还要改动css。46. CSS 伪类和伪元素的区别？第一种回答：伪类： :focus、:hover、:active伪元素：:before、:after伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；伪元素本质上是创建了一个有内容的虚拟容器；CSS3中伪类和伪元素的语法不同；可以同时使用多个伪类，而只能同时使用一个伪元素；第二种回答：伪类：伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。:first-child :link :visitive :hover :active :focus :lang伪元素：与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。:first-line:first-letter:before:after47.有哪项方式可以对一个 DOM 设置它的CSS样式？外部样式表，引入一个外部css文件内部样式表，将css代码放在 标签内部内联样式，将css样式直接定义在 HTML 元素内部48. CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？最基本的：设置 display 属性为 none，或者设置 visibility 属性为 hidden技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在 -100049. 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？答案：解决各浏览器对 CSS 解释不同所采取的，区别不同浏览器制作不同CSS样式的设置就叫作 CSS Hack。50. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？块级元素( block )特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；内联元素(inline)特性：和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的）。那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？答案： 、 、 、。51. 什么是外边距重叠？重叠的结果是什么？52. rgba() 和 opacity 的透明效果有什么不同？53. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？那么问题来了，关于letter-spacing的妙用知道有哪些么？答案:可以用于消除inline-block元素间的换行符空格间隙问题。54. px 和 em 的区别。px和em都是长度单位，区别是：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。55. 描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？不同的浏览器对一些元素有不同的默认样式，如果不处理，在不同的浏览器下会存在必要的风险。你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。56. 问:translate()方法能移动一个元素在z轴上的位置？不能。它只能移动x,y轴的位置。translate3d可以。57. CSS3有哪些新特性？ CSS3实现圆角（border-radius），阴影（box-shadow）， 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是 ::selection. 媒体查询，多栏布局 border-image 58. xhtml 和 html 有什么区别功能上的差别：HTML是一种基本的WEB网页设计语言；XHTML是一个基于XML的置标语言，XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。书写习惯上：(1) XHTML 所在标签都必须小写(2) XHTML 标签必须成双成对(3) XHTML 标签顺序必须正确(4) XHTML 所有属性都必须使用双引号(5) 不XHTML 允许使用target=”_blank”(6) XHTML 文档必须拥有根元素。(7) XHTML 元素必须被正确地嵌套。59. 前端页面有哪三层构成，分别是什么?结构层 Html 表示层 CSS 行为层 js60. css的基本语句构成是?选择器{属性1:值1;属性2:值2;……}61. 与 HTML4 比较，HTML5 废弃了哪些元素？废弃的元素包括：· frame· frameset· noframe· applet· big· center· basefront62. CSS引入的方式有哪些？使用Link和@import有什么区别？答：内联，内嵌，外链，导入（1）link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；（2）页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；（3）import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。63. 介绍一下你对浏览器内核的理解主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。（1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。（2）JS引擎则：解析和执行JavaScript 来实现网页的动态效果；最开始渲染引擎和 JS 并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎。64. 常见的浏览器内核有哪计算些？Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]Webkit内核：Safari,Chrome等。[ Chrome的：Blink（WebKit的分支）]EdgeHTML内核：Microsoft Edge。[此内核其实是从MSHTML fork而来，删掉了几乎所有的IE私有特性]65. 对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;66. 为什么HTML5里面我们不需要DTD（Document Type Definition文档类型定义）？HTML5没有使用SGML或者XHTML，他是一个全新的东西，因此你不需要参考DTD，对于HTML5，你仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档67. 如果我不放入，HTML5还会工作么？不会，浏览器将不能识别他是HTML文档，同时HTML5的标签将不能正常工作68. HTML5 中的 datalist 是什么？HTML5中的Datalist元素有助于提供文本框自动完成特性，如下图所示：69. CSS中使用列布局是什么？CSS列布局帮助你分割文本变为列，例如考虑下面的杂志新闻在一个大的文本中，但是我们需要在他们之间使用边界划分为3列，这里HTML5的列布局就有所帮助了70. 如何水平并且垂直居中一张背景图设置 background-position:center;71. font-style属性可以让它赋值为“oblique”是什么意思让一种字体标识为斜体(oblique)，如果没有这种格式，就使用italic字体72. 如何理解 CSS 的继承和重用？继承：在一个属性应用于一个特定标签之后，该标签的子标签也应该应用该属性。这一行为称为继承。但并不是所有的属性都会被继承。如文字样式一般都继承，盒图的宽高一般不 继承，总之该继承的都会继承，不该继承的都不继承。重用：一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有用的。73. 制作一个访问量很高的大型网站，你会如何来管理所有CSS文件,js 与图片？答案：涉及到人手、分工、同步（1） 先期团队必须确定好全局样式，编码模式等（2） 编写习惯必须一致（3） 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）（4） 页面进行标注（5） Css与html分文件夹并行存放，命名都要统一（6） Js分文件夹存放，命名以该JS功能为准英文翻译（7） 图片采用整合的.png格式文件使用，尽量整合在一起，方便将来的管理。74. 强制换行的css是什么？Word-break:break-all;75. 简述<!DOCTYPE>的作用。 声明位于文档中的最前面的位置，处于 标签之前。 它不是一个 HTML 标签，它是用来告知（声明） Web 浏览器页面使用了哪种 HTML 版本76. 行内元素和块级元素的区别是是什么。行内元素：（1）行内元素不换行（2）行内元素不可以设置大小（3）行内元素大小由内容决定块元素：（1）块元素独立成行（2）块元素可以设置大小（3）块元素如果不设置宽度，宽度会自适应其父级的宽度77. 列举常用行内元素和块元素，并解释其作用行元素：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select（下拉列表）、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）从浏览器的显示结果可以看出，相邻的行内元素不换行，宽度即为内容的宽度、padding的4个方向都有效（从span标签可以看出，对于行内非替换元素，不会影响其行高，不会撑开父元素；而对于替换元素，则会撑开父元素）、margin只有水平方向有效（其中垂直方向的margin对行内替换元素（比如img元素）有效，对行内非替换元素无效）、不可以设置width和height属性。行内块元素表现其实和行内元素一样，只是其可以设置width和height属性。块元素：p、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等从浏览器的显示结果可以看出，块级元素新开启一行（即使是设置了width属性也是独占一行）、尽可能撑满父级元素的宽度，可以设置width和height属性；table元素浏览器默认的display属性为table。78. 让行内元素水平居中的两种方法(1) 找到对应其标签的父级，给其父级设置 text-align : center；(2) 将元素转化成块元素，设置margin : 0 auto，（必须是块元素，而且有宽度）79. 如何实现一个标题文字居中？text-align : center80. 使块元素在一行显示。float : left81. 文字加粗，以及文字字体倾斜加粗：//css cssfont-weight : bold //HTML <b></b>， <strong></strong> 斜体：//css font-style : italic oblique，font-style : normal（正常的字体） //HTML <i></i> ，<em></em> 82. 解决 img 图片自带边距的问题谷歌中这样是解释的：图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。解决办法：最优的解决办是定义vertical-align，注：定义vertical-align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零，font-size:0（1）转化成（行级）块元素display : block （2）浮动，浮动后的元素默认可以转化为块元素（可以随意设置宽高属性）float ： left; （3）给 img 定义 vertical-align（消除底部边距）img{ border: 0; vertical-align: bottom; } （4）将其父容器的font-size 设为 0；（5）给父标签设置与图片相同的高度} </div> <div id="post_6067142"> display常用值参考链接英文参考链接中文// 常用值 none：元素不显示 inline：将元素变为内联元素，默认 block：将元素变为块级元素 inline-block：将元素变为内联块级元素 list-item：inline：将元素变为列表显示（一般不用） table：将元素变为块级表格元素，前后带有换行符 inline-table：将元素变为内联表格元素，前后不带换行符 table-row：将元素变为表格行，类似tr table-cell：将元素变为表格列，类似td grid：将产生一个块级网格布局 inline-grid：将产生一个内联块级网格布局 flex：将产生一个块级弹性盒子进行布局 inline-flex：将产生一个内联弹性盒子进行布局 position定位CSS中的定位相当于PS中的新建图层，即在原有文档流上新开一层用于元素显示。（1）position属性值static：元素默认值，即没有定位，遵循正常的文档流对象 relative：相对定位 absolute：绝对定位，相对于static以外的第一个父元素进行定位，搭配元素：left/right top/bottom fixed：固定布定位，相对于浏览器窗口定位：搭配元素：left/right top/bottom inherit：规定应该从父元素继承 position 属性的值 sticky：css3新增，相当于relative和fixed结合，即滑动到一定程度就固定布局 参考链接：https://jsbin.com/moxetad/edit?html,css,output （2）定位相对性相对于最近的有定位的父元素，绝对定位，如果向上级找，如果都没找到定位元素，则相对与html定位。定位机制控制元素布局的定位方案 1、普通流（normal flow） HTML默认布局。 以HTML文档为基础，元素按照在HTML中出现的先后位置自上而下布局，内联元素水平排列，直到当行被沾满然后换行。 块级元素则会被渲染为完整的一个新行，除非另外制定，否则所有元素默认都是普通流定位。 也可以说，普通流中元素的位置由该元素在HTML文档中的位置决定。 2、浮动流（float flow） 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能地向左边或右边偏移， 其效果与印刷排版中的文本环绕相似。 3、定位（positioning） （1）绝对定位：absolute positioning 在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响， 而元素具体的位置由绝对定位的坐标决定。这种定位通过设置top、right、bottom、left这些偏移值， 相对于 static 定位以外的第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用）， 在没有父元素的条件下，它的参照为body，该方式脱离文档流； （2）静态定位（static positioning） 当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方， 这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流； （3）相对定位（relative positioning） 该定位是一种相对的定位，可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流 （4）固定定位（fixed positioning） 生成绝对定位的元素，相对于浏览器窗口进行定位。这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值， 就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流； （5）inherit定位 这种方式规定该元素继承父元素的position属性值。 注意： float，absolute，fixed，脱离文档流，即将元素从普通的布局排版中拿走， 其他盒子在定位的时候，会当没看到它，两者位置重叠就会发生重叠 布局（1）table布局（2）绝对定位布局// 绝对定位中的两栏设计 <div class="left"></div> <div class="right"></div> <style type="text/css"> html, body { height: 100%; margin: 0; overflow-y: hidden; background: #000; } div { width: 100%; } .left { position: absolute; left: 0; top: 0; width: 200px; background-color: green; } .right { margin-left: 200px; background-color: orange; } </style> （3）浮动布局（4）flex布局Flex布局语法Flex布局示例（5）网格布局网格布局参考链接盒子模型1、英文：box model 2、组成要素： （1）、content：宽高所划分的区域 （2）、border：边框 （3）、padding：内边距 （4）、margin：外边距 3、盒子分类： W3C标准盒子模型 IE盒子模型 4、标准盒子与IE盒子区别： 盒子宽高的计算方式不一样 （1）标准盒子模型// 元素宽高度计算 一个元素的宽度 = content 盒子总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right 盒子总高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom （2）IE盒子模型// 元素宽高度计算 一个元素的宽度 = content + padding + border 盒子总宽度 = margin-left + width + margin-right 盒子总高度 = margin-top + height + margin-bottom （3）box-sizing设置两种模型box-sizing取值： content-box：W3C标准模型，浏览器默认设置 border-box：IE模型 padding-box：针对firefox，在Firefox 50中已被删除 具体可以参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing （4）JS获取盒模型的宽高取出前提浏览器渲染完毕之后 // 1、只能获取行内样式的宽高 dom.style.width/height // 2、内联样式和外联样式的宽高都能取到，但只有 IE 支持 dom.currentStyle.width/height // 3、内联样式和外联样式的宽高都能取到，几乎所有主流浏览器都支持 window.getComputedStyle(dom).width/height // 4、内联样式和外联样式的宽高都能取到，几乎所有主流浏览器都支持， // 取到的是盒模型距离viewport左上角的距离（绝对位置） dom.getBoundingClientRect().width/height/left/top 示例如下： // 获取dom let dom = ocument.getElementById('box'); console.log('style:' + box.style.width); console.log('currentStyle:' + box.currentStyle.width) ; console.log('getComputedStyle:' + getComputedStyle(box).width) console.log('getBoundingClientRect:' + box.getBoundingClientRect().width); BFC定义：边距重叠解决方案 中文：块级格式化上下文 英文：Block Formatting Context BFC原理（渲染规则）（1）BFC 里面的元素，在垂直方向，边距会发生重叠 （2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然 （3）计算BFC的高度时，浮动的子元素也参与计算 （4）BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响） 元素创建BFC方式1、body本身为BFC元素 2、float：值不为none，如：left right 3、position：值不为static或relative，如：absolute fixed 4、display：inline-block table-cell inline-table table flex grid 5、overflow：值不为visible，如：hidden auto scroll BFC作用1、解决margin重叠/合并问题（兄弟元素） - 一般不需要解决 2、解决margin塌陷（父子元素） 3、解决浮动流造成父级元素高度坍塌 - 一般用清除浮动解决 4、解决浮动元素覆盖问题 BFC应用举例（1）解决margin重叠/合并问题标准文档流中，竖直方向的margin不叠加，会重叠合并，只取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。// 通常发生在兄弟元素之间 // 现象解释：对应原理第一条：BFC 里面的元素，在垂直方向，边距会发生重叠 <div class="box box1"></div> <div class="box box2"></div> <style type="text/css"> .box { width: 100px; height: 100px; } .box1 { background-color: lightblue; margin-bottom: 100px; } .box2 { background-color: orange; margin-top: 50px; } </style> 解决方案：分别将两个元素放置到BFC容器中<div class="container"> <div class="box box1"></div> </div> <div class="container"> <div class="box box2"></div> </div> <style type="text/css"> .container { overflow: hidden; } .box { width: 100px; height: 100px; } .box1 { background-color: lightblue; margin-bottom: 100px; } .box2 { background-color: orange; margin-top: 50px; } </style> （2）解决margin塌陷<div class="box1"> <div class="box2"></div> </div> <style type="text/css"> .box1 { width: 300px; height: 300px; background-color: #000; } .box2 { width: 50px; height: 50px; margin: 0 auto; margin-top: 100px; background-color: orange; } </style> 解决方案：给box1加一个透明边框：border-top: 1px solid transparent;将父级变为BFC// box1变为BFC .box1 { width: 300px; height: 300px; background-color: #000; overflow: hidden; } 解决原理对应第二条： BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然 （3）解决浮动流造成父级元素高度坍塌<div class="box"> <div class="box1"></div> <div class="box2"></div> </div> <style type="text/css"> .box { width: 200px; border: 10px solid #000; } .box1 { float: left; width: 100px; height: 100px; background-color: green; } .box2 { float: left; width: 100px; height: 100px; background-color: orange; } </style> 解决方案：给父元素设置高度使用清除浮动的方法（开发常用）父元素变为BFC，以下为BFC解决方案// 父级加一行代码变为BFC即可 .box { width: 200px; border: 10px solid #000; overflow: hidden; } 为什么父元素变为BFC之后就有高度了呢？ 对应原理第三条：计算BFC的高度时，浮动的子元素也参与计算 （4）解决浮动元素覆盖问题<div class="box1">浮动元素box</div> <div class="box2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div> <style type="text/css"> .box1 { float: left; width: 100px; height: 100px; background-color: lightblue; } .box2 { width: 200px; height: 200px; background-color: orange; } </style> 解决方案：右侧浮动元素变为BFC// box2加一行代码变为BFC即可 .box2 { width: 200px; height: 200px; background-color: orange; overflow: hidden; } 对应原理第四条：BFC区域不与旁边的float box区域重叠 BFC、IFC、GFC、FFC定义BFC：Block Formatting Contexts - 块级格式化上下文 IFC：Inline Formatting Contexts - 内联格式化上下文 GFC：GridLayout Formatting Contexts - 网格布局格式化上下文 FFC：Flex Formatting Contexts - 自适应格式化上下文} </div> <div class="clear"></div> <div id="gg_article_content_2"> </div> <div class="clear"></div> </div> </div> </div> <div class="height6"></div> <div class="article_body"> <h4>我要回帖</h4> <div style="text-align:right"> <form method="post"> <textarea id="post_content" name="post_content" style="border:1px solid #999999;height:100px;width:98%;padding:5px;font-size:12px">说的太好了，我顶！