css面试题

1、CSS3有哪些新特性？

圆角（border-redius: 8px）                 多列布局 （multi-column layout）

阴影和反射（shadow / reflect）          文字特效（text-shadow）

文字渲染（text-decoration）               线性渐变（gradient）

旋转（transform）

2、盒模型，W3C盒模型和IE盒模型，标准盒模型和怪异盒模型区别是什么？

盒模型：由四部分组成，分别是外边距（margin）、边框（border）、内边距（padding）、内容（content）。

盒模型的应用体现在布局上。

区别：W3C盒模型的content 是不包含 padding 和 border ；而IE盒模型 content 是包含的。

打个比方来说：写代码时，定义宽度 (width) 为200px。

对于W3C盒模型来说，盒子的实际宽度就是 200px + padding*2 + border*2       【实际所占的空间要加上 margin】

对IE盒模型来说，盒子的实际宽度就是 200px          【实际所占的空间要加上 margin】

延伸：CSS3新增属性 box-sizing ，用于改变CSS盒模型，从而改变元素宽高的计算方式。

它有三个属性值（box-sizing: content-box || border-box || inherit）

●属性值为 content-box，相当于W3C盒模型 。

●属性值为 border-box，相当于IE盒模型 。（可以用来设置自适应布局）

box-sizing作用：布局 和 统一form 表单风格（初始化表单）

参考：https://segmentfault.com/a/1190000013069516?utm_source=tag-newest

https://blog.csdn.net/michaelli918/article/details/79843704

3、前端的布局方式？

垂直居中、水平居中、垂直水平居中、静态布局、流式布局（百分比布局）、自适应布局、弹性布局 、响应式布局

（1）静态布局：按照固定的布局和尺寸来显示。

实现方法：

① Float布局：（float: left/right）应用：左右布局

② 绝对布局：（position:absolute/fixed ）应用：顶部固定的广告栏、瀑布流

（2）流式布局（百分比布局）：在不同大小的设备上满屏呈现同样的网页。

实现方法：

① 使用百分比、em、rem、vw、vh 等

② 使用 flex 弹性盒子（不要用 px 定尺寸）

（3）自适应布局：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

常用设计模板：

① 左侧固定+右侧自适应（应用：两列布局）

② 左右固定宽度+中间自适应（应用：三列布局，如圣杯布局和双飞翼布局）

【注意】：自适应布局页面里面元素位置会变化，解决流式布局中大屏空间利用率不高问题。

（4）弹性布局（Flex布局）：Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），能延伸到可用空间。

通俗来讲就是：根据窗口尺寸来调整布局，从而改变组件的尺寸和位置，以达到最佳的显示效果。

实现方法：display: flex   或者  display: inline-flex   （方向、主轴、缩放比例等）

适用场景：flex布局是基于 flex-flow 流可以很方便地用来做居中，能对不同屏幕大小自适应

（5）响应式布局：是自适应布局和流式布局的综合，为不同屏幕分辨率范围创建流式布局。

实现方法：

① 媒体查询（media）：语法：@media 媒体/设备类型 and (媒体/设备特性){ 样式 }

② 使用 meta 属性：<meta name="viewport" content="width=device-width, initial-scale=1"/>

③ bootstrap 框架

【注意】：响应式布局融合了流式布局和自适应布局的优势。

参考：http://elevenbeans.github.io/2018/01/12/front-end-layout-methods/

https://blog.csdn.net/qq_34648000/article/details/79115294

https://blog.csdn.net/weixin_43307658/article/details/86658046

4、提示框弹窗的水平居中有几种方法

① 水平居中。给div设置一个宽度，然后添加 margin: 0 auto;  属性    【最常用】

② 让绝对定位的div居中。position 设置为absolute;   top/left/bottom/right都设为0；margin设置为 auto 。

③ 利用 flex 弹性布局的属性。 设置 display: flex;  和  justify-content: center;

【注意】：图片、按钮、文字之类的居中。设置 text-align: center;    display: inline-block; 

参考：https://www.jianshu.com/p/3cadd57385f9

5、em 和 rem 的区别？

区别： em：对应的父元素的字体大小。        rem：对应根元素，即 html 元素的字体大小。

打个比方说，

parent{
  font-size: 14px;   /* 父元素为 14px */
};    
child{ 
  font-size: 1em;    /* 子元素为 1em, 就相当于继承了 1 个父元素字体大小，即 14px */
}

对上面的理解：em 这个元素会去查它父元素的字体大小是多少。

子元素为1em，就相当于它的1个父元素字体大小；子元素为 2em，即 2*14px = 28px

html{
  font-size: 50px;     /* 根元素字体大小是50px */
};       
parent{
  font-size: 14px;     /* 父元素字体大小是14px */
};
child{
  font-size: 1rem;     /* 1rem 表示子元素继承根元素的字体大小,即 50px */
  font-size: .28rem;   /* .28rem 表示子元素继承父元素的字体大小,即 14px */
}
/* 注意：在写分数的时候，可以把前面的 0 省略掉。即上面的 0.28在代码中要写成 .28 */
/* 12像素就是 .24rem */
/* 15像素就是 .30rem */

参考：http://caibaojian.com/rem-vs-em.html

 6、解释一下为什么需要清除浮动？清除浮动的方式

浮动元素脱离文档流，不占据空间。

浮动溢出：非IE浏览器，当容器高度为auto，容器中的内容有浮动元素（float为left或right）。这种情况下，容器的高度不能自动伸长来适应内容的高度，此时内容会溢出容器外（父元素高度塌陷了）影响布局，所以需要清除浮动。

通俗来讲就是：浮动的元素，高度会塌陷，高度的塌陷会使我们的页面布局不能正常显示，所以需要清除浮动。

清除浮动方法：原理是围绕 clear:both闭合浮动 和 如何隐藏 content 来实现的。

① 使用 clear 属性。给浮动元素末尾添加 clear: both  【不符合语义化】② 使用 after 伪元素。即给浮动元素的容器添加 .clearfix:afer 类清除浮动  【推荐】

<style>
    .clearfix:after{
      content:'.';     /* 生成内容作为最后一个元素，content里边是 . 或者其他都可以; 不推荐空 ''  */
      height:0;        /* 避免生成内容破坏原有布局的高度 */
      display: block;  /* 使生成的元素以块级元素显示，占满剩余空间 */
      clear: both;     /* 闭合浮动 */
}
</style>

③ 使用 BFC 清除浮动。即给浮动元素的容器添加 overflow 属性，overflow: hidden;  或者 overflow: auto; （zoom:1 兼容IE6）

7、BFC是什么东西？怎么创建BFC？

BFC定义：块级格式化上下文，是web页面中盒模型布局的css渲染模式。它是一个独立的渲染区域，只有Block-level box（块级容器）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部无关。它的应用是：多列布局（自适应两栏布局）、清除浮动、防止垂直 margin 重叠、防止文字环绕 等

创建BFC：

① 根元素

② float 的值不为 none

③ overflow 的值不为 visible

④ position 的值为 absolute  或 fixed

⑤ display 的值为  table-cell ,  table-caption ,  inline-block ,  flex ,  inline-flex

参考：https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

8、CSS的选择器：伪类和伪元素的区别？

伪类和伪元素都是用于向选择器加特殊效果。

伪元素：由两个冒号 :: 开头，然后是伪元素的名称。

   伪元素 ::after可以清除浮动

伪类和伪元素的区别：

① 伪类与伪元素的本质区别是是否抽象创造了新元素

② 伪类只要不是互斥就可以叠加使用；伪元素在一个选择器中只能出现一次，并且只能出现在选择器语句最后

③ 伪类与类的优先级相同；伪元素与标签优先级相同。

参考：https://blog.csdn.net/q1056843325/article/details/53560588

9、用纯CSS创建一个三角形的原理是什么？

原理：采用的是均分原理。盒子都是一个矩形或者正方形，将对角线相连，就会分成四个三角形（☒），在这个基础上再进行设置所需要的三角形

写法一：将盒子的宽高设置为0，设置边框的宽度、样式（solid）；然后设置边框的颜色（将不需要显示的边框设置为reansparent）

<body>
  <div class="demo"></div>
</body>

<style>
  .demo{
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: red transparent transparent  transparent;   /* 上 右 下 左 */
  }
</style>

写法二：将盒子的宽高设置为0，设置边框的宽度、样式、颜色；之后再将下边框设置为 none（此时下边框就消失掉了），然后将左边框和右边框隐藏掉（将边框颜色设置为透明 transparent）

<body>
  <div class="square"></div>
</body>

<style>
  .square{
    width: 0;
    height: 0;
    border: 20px solid pink;
    border-bottom: none;       /* 将下边框设置为none，就没有下边框了 */
    border-left-color: transparent;   /* 将左边框颜色设置为透明 */
    border-right-color: transparent;  /* 将右边框颜色设置为透明 */
 }
</style>

 

参考：https://blog.csdn.net/lxcao/article/details/52689313

http://www.cnblogs.com/huangzhilong/p/5030659.html

10、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式设计：通过对导航、图片、按钮、文字内容的位置分别进行设计而实现页面布局的分割设计。响应式模式就是当终端设备发生变化时，页面布局如何响应。

响应式布局：（弹性网格布局、弹性图片、媒体查询）实现不同屏幕分辨率的终端浏览网页的不同展示方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

① 设置meta标签

② 通过媒体查询设置样式

③ 使用百分比实现响应式内容：将固定宽度布局转换成灵活的百分比布局，这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。