前端面试(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特性。

1.9 css规范化