Web前端笔试、面试题及答案———CSS篇(1)

1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现

.test{
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: lawngreen;
        transform: translate(-50%,-50%);
      }

2. 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：

方法1、使用绝对定位

<head>
  <style>
      html,body{
        margin: 0;
        width: 100%;
        height: 100%;
       }
      .left,.right{
        width: 200px;
        height: 100%;
        background-color: lightblue;
        position: absolute;
        top:0;
      }
      .left{
        left: 0;
      }
      .right{
        right: 0;
      }
      .center{
        height: 100%;
        background-color: lightcoral;
      }
    </style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>

方法2、使用浮动

<head>
  <style>
      html,body{
        margin: 0;
        width: 100%;
        height: 100%;
      }
      .left,.right{
        width: 200px;
        height: 100%;
        background-color: lightblue;
      }
      .left{
        float: left;
      }
      .right{
        float: right;
      }
      .center{
        height: 100%;
        background-color: lightcoral;
      }
    </style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>

方法3、绝对定位+浮动

<head>
    <style>
      html,body{
         margin: 0;
         width: 100%;
         height: 100%;
      }
      .left,.right{
        width: 200px;
        height: 100%;
        background-color: lightblue;
      }
      .left{
        float: left;
      }
      .right{
        float: right;
      }
      .center{
        height: 100%;
        position: absolute; 
        top:0;
        left: 200px;
        right: 200px;
        background-color: lightcoral;
      }
    </style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>

方法4、flex弹性布局

<head>
   <style>
      html,body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
       }
      .container{
        display: flex;
        display: -webkit-flex;
        width: 100%;
        height: 100%;
      }
      .left,.right{
        width: 200px;
        background-color: lightblue;
      }
      .center{
        flex: 1;
        background-color: lightcoral;
      }
    </style>
</head>
<body>
<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
</body>

3、什么是浮动？为什么需要闭合浮动？闭合浮动的方式？

（1）浮动：浮动可以使得多个块级元素可以放置在同一行上，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。
（2）浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
（3）

通过在浮动元素末尾添加一个空的标签例如 <div class=”clear”></div>，.clear{clear:both}
优点：通俗易懂，容易掌握
缺点：会添加无意义的空标签，有违结构与表现的分离，不利于后期维护。
通过在浮动元素末尾添加一个<br clear="all">标签，br 属性 clear有all 、left 、right 、none四个属性值。
优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用
通过设置父元素overflow值设置为hidden或者auto；在IE6中还需要触发hasLayout.

.clear{
  overflow:hidden;
  *zoom:1;
}

优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素，不推荐使用.

父元素设置display:table
优点：结构语义化完全正确，代码量极少。
缺点：盒模型属性已经改变，不推荐使用
给父容器添加clearfix的class，用伪类clearfix:after；来这个样式。
方法一、

.clearfix{
    *zoom:1;//触发IE hasLayout
}
.clear:after{
    content:'.';//生成内容作为最后一个元素,content里面是点还是其他都是可以的
    height:0;//避免生成内容破坏原有布局的高度
    clear:both;
    display:block;//使生成的元素以块级元素显示，占满剩余空间
    visibility:hidden;///使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互；
}

方法二、

.clearfix{
    *zoom:1;//触发IE hasLayout
}
.clear:after{
    content:'200B';//Unicode 字符里有一个“零宽度空格”，也就是U+200B，
    //这个字符本身是不可见的，可以省略掉 visibility:hidden了
    height:0;//避免生成内容破坏原有布局的高度
    clear:both;
    display:block;//使生成的元素以块级元素显示，占满剩余空间
}

方法三、

.cf{
  *zoom:1;//触发IE hasLayout
}
.cf:before,.cf:after{
  content:" ";
  display:table;
}
.cf:after{
  clear:both;
}

:before伪元素，其实它是用来处理margin边距重叠的，由于内部元素float创建了BFC，导致内部元素的margin-top和上一个盒子的margin-bottom 发生叠加。

4、什么是盒子模型？

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。
标准的css的盒子模型与低版本IE的盒子模型的不同：

标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin宽高指的是 content 的宽高
低版本IE盒子模型：内容（content+padding+border）+ 边界margin，宽高指的是 content+padding+border 部分的宽高

5、什么是块级格式化上下文（BFC）？什么样的元素会生成BFC？ BFC的布局规则是怎样的？

（1）是一个独立的渲染区域，与这个区域外部毫不相干。功能上可以将其看作是隔离了的独立容器，容器里面的元素布局不会影响到外面的元素（如浮动、首元素的margin-top加到了父元素上等），并且BFC容器具有普通容器没有的一些特点，如包含浮动元素解决内容塌陷等。
（2）
a、根元素（html、body）
b、float不为none（left、right）
c、position属性值为absolute、fixed
d、display设置为inline-block、table-cell、table-caption、flex、inline-flex
e、overflow不为visible可看见的（hidden、scroll、auto）
（3）
a、内部的Box会在垂直方向，一个接一个地放置。
b、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
c、每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
d、BFC的区域不会与float box重叠。
e、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
f、计算BFC的高度时，浮动元素也参与计算。

6、 position属性有几个值？分别相对谁定位？哪些值会脱离文档流？

absolute ：相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
fixed：生成绝对的元素，相对于浏览器窗口进行定位。
relative ：生成相对定位的元素，相对于其正常位置进行定位。
static ：默认值，即没有定位，遵循正常的文档流对象。
inherit：规定应该从父元素继承 position 属性的值。
sticky：基于用户的滚动位置来定位。（Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
其中fixe、absolute、sticky会脱离文档流。

7、什么是伪类，什么是伪元素，他们的区别？

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
区别：
1、伪类的受体是文档树中已有的元素，而伪元素则创建了一个DOM外的元素
2、伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容
3、伪类使用的一个冒号，伪元素使用两个冒号
4、伪类更常用一些简单的动画或者交互的样式，例如滑入滑出，而为伪元素更常用语字体图标，清除浮动等。

8、CSS选择器有哪些？优先级如何？

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）
元素(类型)选择器(div,h1,p)：权值 1
类选择器(.myclassName)：权值10
属性选择器(a[rel="external"])
伪类(a:hover,li:nth-child)
id选择器(#myid)：权值 100
内联样式：权值最高 1000

9、position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

display 属性规定元素应该生成的框的类型；
position属性规定元素的定位类型；
float属性是一种布局方式，定义元素在哪个方向浮动。
三者之间的关系：

首先判断display的属性值是否为"none"，若是此时元素不产生框，position和float属性不起作用；若不为"none"值，再判断position的属性值是否为"fixed"和"absolute"，若是float的属性值将设置为"none"，display的属性值也会被重新设置；若position的属性值不是为"fixed"和"absolute"，判断float的属性值是否为"none"，若是display的属性值会被重新设置，若不是判断元素是否是根元素，最后指定display的值。

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

响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局，无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。
响应式设计的基本原理是通过媒体查询（@media）检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

兼容IE可以使用JS辅助一下来解决