前端面试(css部分)html语义化是html5之后提出来的，在之前的html版本中，页面是通过一大堆的div+css堆

1.1 如何理解html语义化？

1.1.1 为什么需要html语义化

html语义化是html5之后提出来的，在之前的html版本中，页面是通过一大堆的div+css堆砌起来的。当css加载失败后，页面非常丑陋，而且没有所谓的权重。比如文字强调，css加载失败后，和一般的文字没有任何区别，而且对于搜索引擎也不友好，搜索引擎无法得知页面的具体什么内容是重要的,等等。

1.1.2 那什么才是html语义化

主要是针对两方面，内容语义化，代码语义化。

主要围绕几个主要的标签，比如说 p(代表段落) li(代表列表) h1-h6(标题，搜索引擎会以这些标题对页面进行建议的分析) strong em(强调) header footer aside article(这写html5新增标签，可帮助我们代码更加语义化)

1.13 语义化的好处？

在css加载失败，页面可以呈现更好的内容结构(比如li strong h1等标签的使用，可帮助更好的理解页面结构)
用户体验(比如title alt 用于解释名词和当图片加载失败后显示的文字，label可帮助聚集焦点)
seo(搜索引擎可以更好的抓取重要有用的信息)
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）意义的方式来渲染网页；
便于开发团队的维护

1.2 如何理解viewport？

1.3 盒模型

1.3.1 标准模型‘

标准模型实际盒子宽 = css盒子宽度+padding-left+padding-right+border-left-width+border-right-width

标准模型实际盒子高 = css盒子高度+padding-top+padding-bottom+border-top-width+border-bottom-width

说白了，盒子是在固有宽度的范围内往外撑

1.3.2 ie模型

ie模型真实盒子宽 = css盒子宽度- padding-left - padding-right - border-left-width - border-right-width

ie模型真实盒子高 = css盒子高度 - padding-top - padding-bottom - border-top-width - border-bottom-width

说白了，盒子是在固有宽度的范围内往内缩

1.3.3 应用场景

一般而言，pc页面用标准模型比较合适，移动端页面受制于屏幕，用ie模型更加合适

box-sizing:border-box ：将盒子模型转化为ie模型

box-sizing:content-box ：将盒子模型转化为标准模型

这两个css属性都在ie9以上才可支持

1.4 如何居中？

1.5 Flex和bfc

详情可查看我的另一篇文章

1.6 选择器优先级

如果有很多css用于同一个元素上面，选择器的优先级就会很重要。如果存在相同的css属性，优先级高的会覆盖掉之前的css属性。

那选择器的优先级如何计算呢？

只要记住一下几点：

!important : 无敌！！(不用考虑后面了)
行内样式：1000
id :100
属性选择器 class : 10
元素名：1

如果存在多个css应用在同一个元素，就使用上面的规则。

比如 #app .content p{} 它的权重:100+10 +1 = 111

1.7 vertical-align如何理解？

1.8 左边固定宽度，右边自适应布局

1.8.1 flex

如果没有兼容要求，尽情使用flex吧。习惯了flex，就会发现float什么的都是浮云。

// 代码示意
// html
<div id="app">
   <div id="left"><?div>
   <div id="right"></div>
</div>
// css
#app{
  width:100%;
  display:flex;
}
#left{
  width:100px
}
#right{
  flex:1
}

看一下flex的兼容性

1.8.2 float+margin（左侧设置固定宽并且左浮动，右侧加个margin-left）

// 代码示意
// html
<div id="app">
   <div id="left"><?div>
   <div id="right"></div>
</div>
// css
#app{
  width:100%;
}
#left{
  width:100px；
  float: left;
}
#right{
  margin-left: 100px
}

1.8.3 absolute+margin（左侧设置固定宽并且绝对定位，右侧加margin-left）

// 代码示意
// html
<div id="app">
   <div id="left"><?div>
   <div id="right"></div>
</div>
// css
#app{
  width:100%;
  position:relative;
}
#left{
  width:100px；
  position: absolute;
}
#right{
  margin-left: 100px
}

1.8.4 overflow(左侧设置固定宽并且左浮动，右侧加overflow：hidden)

// html
<div id="app">
   <div id="left"><?div>
   <div id="right"></div>
</div>
// css
#app{
  width:100%;

}
#left{
  width:100px；
  float:left
}
#right{
 overflow: hidden;
}

1.8.5.calc()计算属性(设置固定宽并且左浮动，右侧宽度为calc(100% - 宽度px)且float)

// html
<div id="app">
   <div id="left"><?div>
   <div id="right"></div>
</div>
// css
#app{
  width:100%;

}
#left{
  width:100px；
  float:left
}
#right{
  float:left;
  width: calc(100% - 100px);
}

calc的兼容性：

1.8.6 总结

其实1.8.2 1.8.3 1.8.4 都是使用bfc特性。

前端面试(css部分)