前端面试题答案整理之CSS

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

css盒子模型由4部分构成，margin、border、padding、content。标准盒子模型和IE盒子模型的主要区别是在于width的计算，标准盒子模型中，width = content的宽度，IE盒子模型中width包括content、padding、border。
CSS选择符有哪些？哪些属性可以继承？
ID选择器、类选择器、标签选择器、属性选择器、后代选择器等。优先级：ID > 类 = 伪类 = 属性 > 元素 = 伪元素。内联样式优先级比ID高，！important优先级最高。
可继承的属性：visibility. cursor
CSS3新增伪类有那些？
之前整理过h5、css3新增的一些属性。
如何居中div？如何居中div中的内容？
居中div

//适用于宽高已知的元素。
.item{width: 100px;height: 100px;border: 1px solid #000;position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;
}
<div class="item"></div>//利用flex布局，不限制宽高
.parent{display: flex;justify-content: center;align-items: center;height: 500px;width: 500px;background:red;
}
.item{width: 100px;height: 100px;border: 1px solid #000;
}
<div class="parent"><div class="item"></div>
</div>//
.item{width: 100px;height: 100px;border: 1px solid #000;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;
}
<div class="item"></div>

居中div中的内容

//缺点是如果div宽度设置不够，内容会自动换行超出容器。只有当div的宽度足够容纳文字时，才会达到想要的效果，适用于单行文字居中。
.item{width: 200px;height: 100px;border: 1px solid #000;line-height: 100px; //行高与div等高，实现垂直居中text-align: center; //实现水平居中
}
<div class="item">垂直水平我都居中了。</div>//利用table布局。适用于多行居中。
.parent{display: table;
}
.item{display: table-cell;width: 200px;height: 200px;border: 1px solid #000;text-align: center;vertical-align: middle;
}
<div class="parent"><div class="item">垂直水平我都居中了。</div></div>

用纯CSS创建一个三角形的原理是什么？
满屏品字布局 ?非满屏品字布局？三列布局，左右定宽，中间自适应？

<div class="content"><div class="top">p1</div><div class="left">p2</div><div class="right">p3</div></div>
//满屏品字布局
*{margin: 0;padding: 0;
}
.top{width: 100%;height: 100px;background: pink;
}
.left,.right{float: left;width: 50%;height: 100px;background: yellow;
}
.right{background:blue;
}//非满屏品字布局*{margin: 0;padding: 0;
}
.top{width: 100px;height: 100px;margin: 0 auto;background: pink;
}
.left,.right{float: left;width: 100px;height: 100px;
}
.left{margin-left: 50%;background:red;
}
.right{background:blue;margin-left: -200px;
}
//三列布局，左右定宽中间自适应。本文采用的方法注意center放在最后面一个div
<div class="content"><div class="left">p1</div><div class="right">p3</div><div class="center">p2</div>
</div>
*{margin: 0;padding: 0;
}.center{width: auto;background:pink;height: 100%;margin-left: 150px;margin-right: 200px;
}
.left{background: #E79F6D;width:150px;float:left;
}
.right{background: #77BBDD;width:200px;float:right;
}

//三列布局，利用flex布局
<div class="content"><div class="left">p1</div><div class="center">p2</div><div class="right">p3</div>
</div>
*{margin: 0;padding: 0;height: 100%}.content{display: flex;
}
.left,.right{width: 120px;height: 100%;background: green;
}
.center{height: 100%;background: pink;width: 100%;
}

常见兼容性问题？

1.不同浏览器的标签默认的margin和padding不同：*{margin：0；padding：0}
2.块级元素float后，又存在margin-left/right时，IE6中显示margin比设置的大：只要在float的标签样式中加入 display:inline;将其转化为行内属性即可
3.设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度：设置overflow：hidden或者是将line-height设置为更小的高度。
4.图片默认有间距：使用float属性为img布局。
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

li标签之间的空白间隔是由于换行符导致的。所以最简单的办法是写li标签的时候不换行，但是不美观。
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
当在表格元素中使用时，设置visibility：collapse可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
1.首先看display、position、float之间的关系。
display：none，则positon/float不起作用。
display不为none，看position是否是absolute/fixed，如果是的话，float不起作用，display按照block/table展示；如果不是的话，再看float的值，如果float为none，display同设置值。如果float不是none或者元素为根元素的时候，调整diaplay的值。
2.再看margin-collapse：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠
对BFC规范(块级格式化上下文：block formatting context)的理解？
* BFC主要有这样3个特性：*
1.属于不同BFC的元素不会发生margin-collapse
2.BFC相当于一个隔离的盒子，不影响外部元素的布局，外部元素也不会影响内部盒子的布局。
3.块级格式化上下文不会重叠浮动元素，
触发BFC的条件：
1.float不为none
2.position为absolute/fixed的元素
3.display为table/table-cell/table-caption/inline-block
4.overflow不为visible
清除浮动的方式
1.在浮动元素末尾添加一个空的标签，设置 clear:both
2.父元素设置overflow：hidden/auto
3.利用after伪元素：这里我们使用::after。添加一个类clear，在需要清除浮动时，只需要给父元素追加clear类即可

.clear::after { content:""; display:table; clear:both;
}

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。
双冒号表示伪元素，单冒号表示伪类。
：:before将会在内容之前“添加”一个元素，而:：after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性
如果需要手动写动画，你认为最小时间间隔是多久，为什么？
**多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
**
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。


<div class="content"><div class="top"></div><div class="bottom"></div>
</div>
//绝对布局
*{margin: 0;padding: 0;
}
.content{width: auto;height: 200px;//演示方便，所以设置了一个高度border: 5px solid #000;position: relative;
}
.top{height: 100px;background: red;
}
.bottom{position: absolute;top: 100px;right: 0px;left: 0px;bottom: 0px;background: green;
}
//flex.content{display: flex;flex-flow: column wrap;border: 1px solid blue;}.top{height: 100px;background: red;}.bottom{background: green;}

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据
style标签写在body后与body前有什么区别？
写在body后面会重新渲染

前端面试题答案整理之CSS相关推荐

前端面试题全面整理-带解析涵盖CSS、JS、浏览器、Vue、React、移动web、前端性能、算法、Node...
来源 | https://www.html.cn/interview/13950.html 本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一 ...
前端面试题全面整理-带解析
本篇文章整理总结这些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上: css相关 1. 万能居中 1.margin ...
web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。
本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上: css相关更多教程:https://su ...
WEB前端面试题汇总整理01
1.JS找字符串中出现最多的字符例如:求字符串'nininihaoa'中出现次数最多字符 var str = "nininihaoa"; var o = {}; for (var ...
大前端面试题总结（html+css+js）
先从我们最熟悉的html+css开始 1.请简述css盒子模型一个css盒子从外到内可以分成四个部分:margin(外边距),border(边框),padding(内边距),content(内容) ...
前端面试题+答案（JS篇）
目录 1.前端如何优化网站性能? 2.网页从输入网址到渲染完成经历了哪些过程? 3.浏览器缓存:memory cache.disk cache.强缓存协商缓存等概念 4.JS中常见的内存泄漏 5.如何 ...
前端面试题+答案（Vue篇）
目录 1.说说你对 SPA 单页面的理解,它的优缺点分别是什么? 2.v-show 与 v-if 有什么区别? 3.怎样理解 Vue 的单向数据流? 4.computed 和 watch 的区别和运用 ...
web前端面试题之肉（css）
CSS复习 HTML 复习 HTML版本 HTML4/4.01(SGML) 超级xml(可扩展标记语言) XHTML(XML) 要求严格,所有的标签.属性小写,属性必须要有值 HTML5 HTML4 ...
大厂高级前端面试题答案
阿里使用过的koa2中间件 https://www.jianshu.com/p/c1e... koa-body原理 https://blog.csdn.net/sinat_1... 有没有涉及到Cl ...

前端面试题答案整理之CSS

前端面试题答案整理之CSS相关推荐

最新文章

热门文章