前端css面试题总结

一、盒模型

盒模型组成：

1. margin(外边距) ：边框外的区域，外边距是透明的。
2. border(边框) ：围绕在内边距和内容外的边框。
3. padding(内边距) ：内容周围的区域，内边距是透明的。
4. content(内容) - 盒子的内容，显示文本和图像。

1、标准盒模型（一般使用的）

在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
宽度=内容的宽度（content）+ border + padding + margin

2、IE盒模型

在IE盒模型中，width表示content+padding+border这三个部分的宽度
宽度=内容宽度（content+border+padding）+ margin### 3、css3指定盒子模型种类（box-sizing属性）

1. box-sizing: content-box
   IE盒模型的组成模式，border|padding|content {element width=border+padding+content}
   宽度和高度分别应用到元素的内容框。
   在宽度和高度之外绘制元素的内边距和边框。
2. box-sizing: border-box
   标准盒模型组成模式，content|border|padding {element width=content}
3. inherit

二、CSS选择器有哪些？哪些属性可以继承？

选择器：

• id选择器(#myid)
• 类选择器(.myclassname)
• 标签选择器(div, h1, p)
• 相邻选择器(h1 + p)
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（*）
• 属性选择器（a[rel=”external”]）
• 伪类选择器（a:hover, li:nth-child）

可继承的属性：

• font-size
• font-family
• color

不可继承的样式：

• border
• padding
• margin
• width
• height

三、优先级如何计算？

优先级（就近原则）：!important > [ id > class > tag ]

元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

四、CSS3新增伪类有那些?

• p:first-of-type 选择属于其父元素的首个元素
• p:last-of-type 选择属于其父元素的最后元素
• p:only-of-type 选择属于其父元素唯一的元素
• p:only-child 选择属于其父元素的唯一子元素
• p:nth-child(2) 选择属于其父元素的第二个子元素
• :enabled :disabled 表单控件的禁用状态。
• :checked 单选框或复选框被选中

五、元素居中的方式？

1、水平居中

水平居中

在margin属性中，auto有两种作用：

• 占据可用的空间（take up the available space）
• 等同于0px

由于width 相关计算依赖于其包含块，最初能确定值，故使用auto会达到居中效果。而 height 相关计算依赖于其自身内容高度，自身内容高度是不能最初确定值的，故使用auto等同于设置上外边距为0。

注意：auto不适用于浮动和内联元素，并且它本身也不能用于绝对和固定定位元素。

2、绝对定位水平垂直居中

position属性规定元素的定位类型：

• absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
• static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• inherit：规定应该从父元素继承 position 属性的值。

绝对定位元素的布局由元素的三个因素决定：位置（top、bottom、left、right）、元素尺寸和margin。绝对定位元素在布局上呈现自适应的特点——位置和尺寸固定，则自适应margin值；位置和margin固定，则自适应尺寸。

1. 位置和尺寸固定,margin:auto;

<div id='wrap'>
  <div id='item1'>div>
div>
<style>
#wrap {
     width: 500px;
     height: 500px;
     border: 1px dotted black;
     margin: 0 auto;
     position: relative; 
   }
#item1 {
	width: 100px;
	height: 100px;
	background-color: purple;
	/* 核心代码 */
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
  }
 <style>

计算样式：

水平方向：
width(wrap)=margin(item)+width(item)+padding(item)+left(item)+right(item)

由于位置设置为 top: 0;bottom: 0;left: 0;right: 0; ，尺寸固定为 width: 100px;height: 100px;，margin:auto;自适应，实际水平方向margin值为500-100 =400px,平均分配左右两侧，即为margin-left:200px;margin-right:200px;。垂直方向同理可得。可以看到在绝对定位元素中，若水平方向位置left与right值相等，那么margin-left: auto;margin-right:auto;可以让其相对于定位的祖先元素水平居中。

2. 位置和margin固定

<div id='wrap'>
   <div id='item1'>div>
div>
<style>
#wrap {
   width: 500px;
   height: 500px;
   border: 1px dotted black;
   margin: 0 auto;
   position: relative;   
 }
  
 #item1 {
   background-color: purple;
   /* 核心代码 */
   position: absolute;
   margin: 20px;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;
 }
 <style>

计算样式：

在水平方向，由于right:0;left:0;并且margin-left:20px;margin-right:20px;各项相加和等于定位的祖先元素宽度，因此width的值为460px。

3. left：50%；right：50%

position:absolute;
left:50%; // 针对元素的左侧水平居中
top:50%; // 针对元素的上侧水平居中
margin-left:-50px; //元素左移一半宽度
margin-top:-50px; //元素上移一半高度

3、transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜：

• none 定义不进行转换
• matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵
• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵
• translate(x,y) 定义 2D 转换
• translate3d(x,y,z) 定义 3D 转换
• translateX(x) 定义转换，只是用 X 轴的值
• translateY(y) 定义转换，只是用 Y 轴的值
• translateZ(z) 定义 3D 转换，只是用 Z 轴的值
• scale(x,y) 定义 2D 缩放转换
• scale3d(x,y,z) 定义 3D 缩放转换
• scaleX(x) 通过设置 X 轴的值来定义缩放转换
• scaleY(y) 通过设置 Y 轴的值来定义缩放转换
• scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换
• rotate(angle) 定义 2D 旋转，在参数中规定角度
• rotate3d(x,y,z,angle) 定义 3D 旋转
• rotateX(angle) 定义沿着 X 轴的 3D 旋转
• rotateY(angle) 定义沿着 Y 轴的 3D 旋转
• rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
• skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
• skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
• skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换
• perspective(n) 为 3D 转换元素定义透视视图。

position: absolute;
     width:300px;
     height:200px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: blue;">水平垂直居中

left和top都是50%，在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了。

4、flex

"display: flex;align-items: center;justify-content: center;">
    
"width: 100px;height: 100px;background-color: gray;">flex 布局				   
    

// 设置为弹性盒子，主轴和交叉轴居中，实现水平垂直居中

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

display:flex属性：

• flex-direction：容器内项目的排列方向(默认横向排列)
  • 属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。

主元素的六个属性：

• flex-wrap：容器内项目换行方式

  • 属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse

• flex-flow：以上两个属性的简写方式

  • 写法属性中，将上述两种方法的值用||连接即可

• justify-content：项目在主轴上的对齐方式

  • flex-start：在主轴上由左或者上开始排列
  • flex-end：在主轴上由右或者下开始排列
  • center：在主轴上居中排列
  • space-between：在主轴上左右两端或者上下两端开始排列
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

• align-items：项目在交叉轴上如何对齐

  • flex-start：在交叉轴与上对齐排列
  • flex-end：在交叉轴与下对齐排列
  • center：在交叉轴居中排列
  • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐
  • stretch ：填充满交叉轴的长度

• align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  • flex-start：主轴上
  • flex-end：主轴下
  • center：主轴居中
  • space-between：两端对齐，中间等分，子元素之间有间隙
  • space-around：完美的平均分配
  • stretch：元素位于容器的中心，各行向弹性盒容器的中间位置堆叠

子元素的属性：

• order：项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink“项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

六、CSS3有哪些新特性？

1. RGBA和透明度
2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
3. word-wrap（对长的不可分割单词换行）word-wrap：break-word
4. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
5. font-face属性：定义自己的字体
6. 圆角（边框半径）：border-radius 属性用于创建圆角
7. 边框图片：border-image: url(border.png) 30 30 round
8. 盒阴影：box-shadow: 10px 10px 5px #888888
9. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

七、用纯CSS创建一个三角形

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

1、元素的宽度、高度设为0。
然后设置边框样式。

盒子可以看作是一个矩形，从中心向四条边延伸。

transparent：用来指定全透明色彩

• transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
• 在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
• 在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook™ Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
• 在CSS3中，transparent被延伸到任何一个有color值的属性上。

参考：https://blog.csdn.net/weixin_38091374/article/details/79298773

八、一个满屏品字布局如何设计?

1、真正的品字

box{
	width: 100px;
	height:100px;
}
//设置统一大小

box1 {
	margin:0 auto;
}
//上面的居中

box2 {
	display: inline-block;
	// 下面两个div设置并排
	margin: 100px auto;
	// 居中
}

2、全屏品字

	

	

	



box1 {
	width: 100%
}
box2 {
	display: inline-block;
	width: 50%;
}

九、常见浏览器兼容性问题？

1. 不同浏览器的标签默认的margin和padding不一样。
   解决方案： *{margin:0;padding:0;}

2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。
   解决方案： hack：display:inline;将其转化为行内属性。

3. 样式设置：渐进识别的方式，从总体中逐渐排除局部。

   解决方案：

   • 使用“9”标记，将IE浏览器从所有情况中分离出来
   • 使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别
   • 使用“-”将IE7分离出来

{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

4. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。
   解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
5. IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。
   解决方法:统一通过getAttribute()获取自定义属性。
6. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
   解决方案：加入 CSS 属性 -webkit-text-size-adjust: none;
7. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。
   解决方法：改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
8. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
   解决方案：在display:block;后面加入display:inline;display:table;
9. 图片默认间距：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
   解决方案：使用float属性为img布局（margin可以解决，但可能出现其他问题）
10. 标签最低高度设置min-height不兼容
    解决方案： 如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
    相关推荐：https://www.cnblogs.com/angel648/p/11392262.html
11. 透明度的兼容CSS设置

.transparent_class {  
      filter:alpha(opacity=50);  
      -moz-opacity:0.5;  
      -khtml-opacity: 0.5;  
      opacity: 0.5;  
} 

12. IE9以下浏览器不能使用opacity
    解决方案：

opacity: 0.5; // 在ie9/ie10/ff/chrome/opera/safari显示正常。
filter: alpha(opacity = 50); // ie8以下支持filter
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); // 加上这句话才有用

13. 边距重叠问题：当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
    解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；
14. 两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
    解决方案：父级元素设置position:relative
15. E6 背景闪烁的问题：链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载
    解决：可以用 JavaScript 设置 ie6 缓存这些图片：

document.execCommand("BackgroundImageCache", false, true);

16. 让 IE7 IE8 支持 CSS3 background-size属性：由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url('img/37.png');
  background-repeat: no-repeat;
  background-size: cover;
  -ms-behavior: url('css/backgroundsize.min.htc');
  behavior: url('css/backgroundsize.min.htc');
}