HTML&CSS面试题

• 1 如何理解html语义化
  有利于SEO，搜索引擎根据标签确定上下文和各个关键字的权重。
  利于用户阅读，样式文件未加载时页面结构清晰。
  利于屏幕阅读器解析，如盲人阅读器会根据语义渲染网页。
  利于开发和维护，代码更具可读性、更易于维护
• 2默认情况下,哪些标签是块级元素,哪些是内联元素
  块级h1 div table
  内联span img input button
• 3盒子模型的宽度如何计算
  offsetWidth = (内容宽度 + 内边距 + 边框)，无外边距 如果想让offsetwidth等于100 box-sizing:border-box;
• 4margin纵向重叠的问题

<p margin-top="10px">AAA</p>
<p></p>
<p margin-top="15px">CCC</p>

会偏向大的margin值

• 5margin负值的问题
  正常向上移动

• 6BFC理解的应用
  **block format context 块级格式化上下文
  一块独立的渲染区域 内部元素不会影响外界以外的元素

形成的条件 float不是none position不是absolute或fixed overflow不是visible display是flex或inline-block
**

• 7float布局的问题以及clearfix
  .clearfix::before, content: ''; display: table;
• 8flex画色子
  **利用align-self属性
• 9absolute和relative分别依据什么定位
  relative依据自身定位 absolute 依据最近一层定位元素
• 10 居中对齐的方式
  水平居中 inline元素:text-align:center block元素:margin:auto absolute:left% + margin-left 负值
  垂直居中 inline inline-height等于height值 absoulte top%+margin-top负值
• 11line-height的继承问题
  继承父元素的值
• 12rem是什么?
  是一个长度单位 相对于跟元素的,常用于响应式布局
• 13什么是vw vh?
  vw是整个视口宽度的百分之1 10vw 就是百分之10的宽度