前端基础面试题30道

样式的引入方式有哪几种？
1.内部样式
2.外部样式
3.内联样式

W3C标准盒模型包含哪些内容？
4个部分 内容区content 、内边距padding、边框border、外边距margin

怎么用css边框画箭头朝下的三角形？
思路：首先写一个标签，写4个方向的边框，上边框给颜色，其他3个方向边框颜色给透明，最后宽高为0；

什么是css样式层叠？（css权重问题）
对于标签的样式，很多时候，我们会针对标签添加多个样式，有时候是样式覆盖，有时候是样式继承；于是样式之间就有权重的问题。
!important > 内联样式1000 > id选择器100 > class选择器10 > 标签选择器1
CSS层叠性
指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
原则：
1、样式冲突，遵循的原则是就近原则，即CSS的书写位置。
2、样式不冲突，不会层叠

单行文本超出显示省略号效果怎么实现？
1.给元素添加 width
2.让文本一行显示 white-space:nowrap
3.让超出部分隐藏 overflow:hidden
4.添加省略号 text-overflow:ellopsis

什么是css的继承？请写出可以被继承的属性，至少10个
给父元素或者祖宗添加了样式，后代就会有对应的样式，这就是继承。
如：color、font-size、line-height、text-align、font-style、font-family、font-weight、text-decoration、letter-spacing、
text-transform、list-style

元素类型分为哪几种？分别有什么特点？
分为3种：
1.块状元素
特点：
1.竖着排列，独占一行或者一块区域；
2.可以添加宽高，添加margin和padding 上下左右都有效；
3.一般作为其他元素的父元素使用。

2.行内（内联）元素
特点：
1.挨着排列，有默认的间距；
2.添加宽高无效，margin和padding只有左右有效，上下不生效

3.行内块元素
特点：
1.就是块元素和行内元素的特点的综合
2.有一个自己的私有属性 vertical-align:top/middle/bottom;

4.可变元素（特殊）
特点：
根据某一些css属性的特点，可以改变元素的类型，比如：给行内元素添加了float，元素就会成为块元素。

图片向下撑大3像素怎么解决？
1.给图片添加display:block;
2.给图片本身添加vertical-align:top/middle/bottom;
3.给图片或者图片的父元素添加float;
4.给图片父元素或者body添加font-size:0;

未知大小的行内块元素怎么实现水平垂直居中效果？
思路：给外层的大盒子添加text-align:center;让行内块先水平居中；再给外层的大盒子添加line-height，且给行内块元素本身添加vertical-align:middle;同时实现行内块做垂直居中效果。

元素消失和出现的方法有哪些？
1.display:none;和display:block; 让元素彻底消失，一般不会结合transition做过渡效果；

2.opacity:0;和opacity:1; 让元素占位隐藏，一般会结合transition做过渡效果；

3.visibility:hidden;和visibility:visible;让元素占位隐藏,一般用于万能清除法里做兼容使用

4.height:0;overflow:hidden;和height:100px;overflow:auto;一般结合hover做一些鼠标滑过效果

定位的属性值有哪些？分别有什么特点？
1.绝对定位 position:absolute;
特点:
1.文档流 脱离文档流，不占位置了
2.参照物
2.1默认情况下，参照浏览器的第一屏做位置移动；
2.2参考有定位设置(最好是相对定位)的父元素做位置移动。
3.层级关系 z-index 值越大，元素就在最上层

2.相对定位 position:relative;
特点:
1.文档流 没有脱离文档流，占位置在
2.参照物 参照自己原来的位置做移动
3.层级关系 z-index 值越大，元素就在最上层

3.固定定位 position:fixed;
特点:
1.文档流 脱离文档流，不占位置了
2.参照物 参照整个浏览器的窗口
3.层级关系 z-index 值越大，元素就在最上层

4.粘性定位 position:sticky; 主要做吸顶效果
特点:
1.文档流 没有脱离文档流，占位置在
2.参照物 参照整个浏览器的窗口
3.层级关系 z-index 值越大，元素就在最上层

5.默认值 position:static;

一个宽高200200的小盒子在一个宽高为500500的大盒子里面做水平垂直居中，请问你有几种实现方案？(8种)
1.纯margin + overflow:hidden;

2.纯padding + box-sizing:border-box;

3.纯定位

4.display:inline-block; + text-align:center; + line-height + vertical-align:middle;

5.定位 left:50%;top:50%; + margin取负值

6.定位 left:0;top:0;right:0;bottom:0; + margin:auto;

7.定位 left:50%;top:50%; + transform:translate(-50%,-50%);

8.弹性盒 display:flex; + justify-content:center; + align-items:center;

高度塌陷问题怎么解决？(6个)
高度塌陷：子元素添加float,父元素或者祖先没有给高度的情况下，父元素会出现高度为0的情况。
1.给父元素添加height; 只适合高度固定的布局，比如导航

2.给父元素添加overflow:hidden/auto/scroll; 遇到有定位的时候尽量不要用

3.给浮动元素的下方添加一个空的块元素，并且给这个空的块元素添加clear:both;此方法会造成代码的冗余

4.万能清除法。取一个公共类名，将这个公共类名给到浮动元素的父元素添加即可；
.clear:after{
content:“”;
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear{
zoom:1;
}

5.给父元素添加float;会造成新的浮动问题，不推荐使用，做了解；

6.给元素添加display:table; 会造成未知bug,不推荐使用，做了解。

margin-top的bug怎么解决？
bug的产生，给子元素添加margin-top之后，会造成父元素整个下移；
1.给父元素添加overflow:hidden;
2.给父元素添加border-top:1px solid transprent;
3.给父元素或者子元素本身添加float;
4.改margin为padding
5.给父元素设置浮动
6.给父元素设置position

五大浏览器对应内核是什么？
IE浏览器 Trident
火狐浏览器 Gecko
苹果、谷歌浏览器 webkit
欧朋浏览器 前内核 presto 现内核 blink

opacity是什么？它的兼容写法是什么样子的？
opacity:0.3;filter:alpha(opacity=30);

什么是BFC？BFC触发条件有哪些？
BFC直译意思是"块级格式化上下文"，可以理解为它是页面中一块独立的渲染区域，这块区域里面的元素有自己的排列规则，不会影响外部的元素，而且不是所有的元素都能成为BFC区域的元素，需要满足一定的条件才可以；
BFC触发条件：
1.html本身；
2.给元素添加float:left/right;
3.给元素添加了position:absolute/fixed;
4.给元素添加了display:inline-block/table-cell/table-caption/flex/inline-flex;
5.给元素添加了overflow:hidden/auto/scroll;

BFC有哪些特性？这些特性给页面带来了什么好处？
1.bfc区域上下排列的盒子如果都给了margin值，会发生margin的重叠问题。
margin的重叠问题：给任何一个盒子添加一个父元素，让父元素触发BFC即可；
2.BFC区域不与float的盒子发生重叠；由此引出了两栏布局
3.解决了高度塌陷问题。