【面试】前端基础（一）

HTML5

---

什么是语义化

通过使用不同标签来编写网页。比如标题就使用h1标签，一段文字使用p标签等。

语义化可以使代码具有可读性，也对搜索引擎友好。

如何优化搜索引擎

• 使用语义化的代码。

• h1标签只用一次。

• title标签协商关键字

• meta name=“Keywords”

• meta name=“Description”

在默认情况下，哪些元素是块级元素，哪些元素是内联元素

块级:div p h ul ol table.即display为block/table

内联:img a span input button.即display为inline/inline-block

CSS

---

盒模型

什么是盒模型

标准盒模型

盒子总宽=width+左右padding+左右border

IE盒模型

盒子总宽=width

（相当于设置了border-box）

下列代码中，div的实际宽度是多少？可以通过什么属性获取？

<div style="width:100px;padding:10px;border:1px solid black;margin:10px">
    阿巴阿巴阿巴
</div>

dom.offsetWidth获取

122= width(100)+padding左右(20)+border左右(2)

如果想让实际宽度为100px 要怎么做？

box-sizing:border-box

margin

什么时候会纵向塌陷

• top和bottom都设置了的时候，取大的那个

• 没内容的元素设置margin也没用，不算

下列代码中，pA与pB的距离为？

p{margin-top:10px;margin-bottom:15px;}

<p>A</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>B</p>

15px

负值

top、left为负

元素自身向上，向左移

right、bottom为负

元素自身不动，相邻元素向左，向上移

BFC

是什么？怎么形成

是块级格式化上下文，一块独立渲染的区域。满足其一即可

• float不为none
• position为absolute或fixed
• overflow不为visible （清除浮动）
• display为flex或inline-block

下列代码如何清除浮动？

<div /*style="overflow:hidden;"*/>
    <img style="float:left;"/>
    <p /*style="overflow:hidden;"*/>aaa</p>
</div>

这样就行啦

float布局

一般考察三栏布局，就下面那两个，要求中间先渲染。左右宽固定，中间自适应。

两侧使用margin负值。

防止中间内容被覆盖：padding、margin

圣杯布局

container

• padding: 0 110px

left

• position:relative;

• width:110px;

• left:-110px;

• margin-left:-100%;

right

• position:relative;

• width:110px;

• right:-110px;margin-left:-110px; / margin-right:-110px

middle

• width:100%

双飞翼布局

container

啥都不干

left

• width:100px

• margin-left:-100%

right

• width:100px

• margin-left:-110px;

middle

• width:100%

(middle-inner)

清除浮动

.clearfix{

overflow:hiddle;(有一些场景，比如轮播图需要)

(*zoom:1;)

}

.clearfix::after{

content:'';

display:block/table;

clear:both;}