前端CSS常见面试题

1.css中position定位都有哪些方式，分别是什么效果？
static,默认定位，静态定位，参与流式布局。
relative，相对定位，参与流式布局，可以使用left，right等在原有位置上进行微调。
absolute，绝对定位，脱离文档流，相对于另一个元素进行定位。
fixed，固定定位，脱离文档流，相对于浏览器窗口定位，不随页面滚动儿改变位置。

2.Absolute定位的元素相对于哪个元素进行定位？
相对于离自己最近的position为非static的祖先元素进行定位。

3.前端页面中动画都有哪些实现方式，各自分别适用于哪些场景？
transition：简单的动画，只需要在两个状态之间变化的动画。
keyframeAnimation：适合需要在多个状态连续进行的动画。
js动画：功能最强的动画，但是效率最低。

4.怎么隐藏页面中的某个元素？
display:none; 隐藏但不占用位置
visibility:hidden; 隐藏但保留位置\

5.什么是响应式布局？是依赖什么技术实现的？
响应式布局：能够根据不同的浏览器尺寸，显示不同的布局方式。
依赖媒体查询实现。

6.什么是元素盒模型？包含哪几部分？计算元素尺寸时从哪部分开始计算？
盒模型：元素从结构上分为4层：依次为内容、内间距、边框、外间距

计算：通过box-sizing设置计算方式，默认为content-box计算内容盒，可以设置box-sizing：border-box计算到边框盒。

7.如何让一个元素在另一个元素居中？
1.实现元素本身内容居中
(1)text-algin:center+line-height
(2)flex布局

2.实现子元素在父元素中居中：
（1）弹性布局

display:flex;
justify-content: center;
align-items: center;

（2）

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

（3）

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

8.布局
（1）流式布局：元素依次从左向右(行元素,块元素) 从上到下(块元素)的方式进行排列；html中所有的标签默认都为static定位,static采用的是流式布局。
（2）定位
static静态定位,元素的默认定位方式,进行流式布局;
relative相对定位,当需要将元素在原有的位置上进行微调时使用;
absolute绝对定位,当希望通过一个元素的坐标设置其位置时使用;
fixed固定定位,当需要一个元素不随页面的滚动而滚动时使用；
（3）浮动布局：float设置元素使用浮动布局，浮动有左浮动和右浮动。在浮动文档流中,块元素也横向排列,而且不在自动宽度为100%。
注：使用浮动布局必须在最后一个浮动元素结束的地方清除浮动,否则会影响后续的界面,也会导致父元素不能根据内容显示高度。

9.CSS长度单位与计算
px 表示像素,1px相当于屏幕上一个最小的显示单元。
% 所占父元素百分比
rem 表示根元素的字体大小，即相对html。
em 表示当前元素的父元素的字体大小。
vw/vh 1vw表示浏览器窗口宽度/高度的1%
calc() 具体计算
mm/cm，pt(磅)

10.CSS半透明/透明
大部分标签元素默认是背景透明的，但也有不透明的（如：button、iframe、图片等）。
transparent(透明)：background-color:transparent;
rgba()：只作用于元素的颜色或其背景色，子元素不用继承。
hsla():颜色的另一种表示法:色相,亮度,饱和度。
opacity:作用于元素以及元素内的所有内容透明度，子元素可以继承。

11.媒体查询与响应式页面
@media 设置媒体查询，设置一些样式仅在某些条件下生效；媒体查询是响应式式页面的基础。

@media(max-width:1000px){
.box{
   width:33.33%;
   }
main{
   width:600px;
    }
}

12.清除浮动的几种方式

（1）结尾处加空div标签，添加新元素 ，弊端增加了无意义的标签。

<div class="outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="clearfix"></div>

</div>

.clearfix {
    clear: both;
}

（2）为父元素增加样式

.clearfix {
   overflow: auto;
   zoom: 1; // 处理兼容性
   }

（3）为父元素添加伪类 :after（不使用新元素的情况下清除浮动）

.outer :after {
     content: “ ”;
     display: block;
     clear: both;
    }

13.解释CSS Sprites,如何使用？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，在利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。
CSS Sprites为一些大型网站节约了带宽，提高了用户的加载速度和用户体验。

14.形成BFC的几种方式
BFC全称“Block Formatting Context”,中文为“块级格式化上下文”。
BFC元素特性表现原则就是，内部子元素再怎么翻江倒海都不会影响外部的元素。
float 为 left | right
overflow 为 hidden | auto | scroll
display 为table-cell |table-caption | inline-block
position 为 absolute | fixed