web前端的日常更新7.11

   今天不在像之前一样了，今天上课了，但是只是复习了之前学习的内容，所以说今天我们的内容还是之前没有说完的面试题。

25:如何垂直居中一个浮动元素

方法一：.child{

  height: 100px;

position: absolute;//父元素相对定位

top:50%;

left:50%;

transform: translate(-50%,-50%);

}

方法二：.child{

width: 100px;

height: 100px;

position: absolute;

top:50%;

left:50%;

margin-top: -50px;

margin-left: -50px;

}

方法三：child {

width: 100px;

height: 100px;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto

}

26:如何垂直居中一个img ？

方法一：<img>的容器

.img-container{

display: table-cell;

vertical-align: middle;

text-align: center;

}

方法二：方法二

.img-container{

display: flex;

justify-content: center;

align-items: center;}

27. px 和 em 的区别。

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 相对于当前字体大小改变，若自身没有字体大小，则继承祖先元素的字体大小。

浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。

28:Sass、LESS 是什么？大家为什么要使用他们？

是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成

CSS。

优势：

结构清晰，便于扩展。

减少了重复代码的编写，增加了变量等的功能

可以方便的屏蔽浏览器私有语法差异。

可以轻松实现多重继承。

完全兼容CSS代码，可以方便地应用到老项目中。less只是在CSS语法上做了扩展，所以老的CSS代码也可以与less代码一同编译。

29:CSS 中 link 和@import 的区别是：

Link 属于 html 标签，而@import 是 CSS 中提供的

在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS ,@import 只有在 ie5 以上才可以被识别，

 link 是 html 标签，不存在浏览器兼容性问题

Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

30:简介盒子模型：

CSS 的盒子模型有两种：IE 盒子模型、标准的 W3C 盒子模型模型

盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

31:为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同

浏览器之间的显示差异

但是初始化 CSS 会对搜索引擎优化造成小影响

32. BFC 是什么?

BFC（块级格式化上下文），页面上的一个隔离的独立容器，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布

局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin

重叠的问题

创建BFC

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

33.HTML 与 XHTML——二者有什么区别？

1. 所有的标记都必须要有一个相应的结束标记

2. 所有标签的元素和属性的名字都必须使用小写

3. 所有的 XML 标记都必须合理嵌套

4. 所有的属性必须用引号 "" 括起来

5. 把所有 < 和 & 特殊符号用编码表示

6. 给所有属性赋一个值

7. 不要在注释内容中使用 "--"

8. 图片必须有说明文字

34.html 常见兼容性问题？

浏览器默认的margin和padding不同
解决方案：加一个全局的 *{margin:0;padding:0;} 来统一

35.对 WEB 标准以及 W3C 的理解与认识

(1).标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、

(2):使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、

(3):更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

36:常见行内元素有哪些?块级元素有哪些?CSS 的盒模型?

CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认

的 display 值

块级元素(默认值是‘block’) ： div  p  h1-h6 form ul hr table

行内元素(默认值是‘inline’) : a  b  br  i  span input img link select  small  strong

Css 盒模型:内容，border ,margin，padding

37:前端页面的基本构成，分别是?作用是?

结构层  Html

表示层  CSS

行为层 j s

38:列出 display 的值，并说明他们的作用

display：

none：取消样式

block：块级元素

inline：行内元素

inline-block：行内块元素

normal：默认样式

flex：弹性布局

39:列出position的值，注意他们的定位参照原点

*absolute

生成绝对定位的元素，相对于离最近的包含块元素进行定位。

*fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

* relative

生成相对定位的元素，相对于其正常位置进行定位。

* static 默认值。没有定位，元素出现在正常的流中

* inherit 规定从父元素继承 position 属性的值。