前端面试问题---HTML、CSS

前端面试问题----html、css

常见浏览器内核？

• IE: IE内核（Trident内核）
• safari：webkit内核
• -谷歌：Blink内核
• 欧鹏：Blink内核
• 火狐: Firefox内核

如何理解HTML语义化？

• 让人更容易读懂代码（增加代码的可读性）；
• 让搜索引擎更容易读懂（SEO）

常用的块级元素和行内（内联）元素？

块级元素：div、h1-h6、p、ul、ol、li、table等
行内元素：a、span、i、b、input、img、button等

css中选择器有哪些？

通配符选择器：*
标签选择器：p
类选择器：.desc
id选择器：#box
后代选择器：ul li
直接后代选择器：ul > li
兄弟选择器：p~p p+p
群组选择器：.desc,#box,ul
属性选择器：input[type=“text”]
伪类选择器：:last-child

盒子模型

• 标准盒模型：width = contentWidth + paddingLeftRight+ borderLeftRight + marginLeftRight
• IE盒模型：width = contentWidth + paddingLeftRight + borderLeftRight
• 补充：
  offsetWidth = contentWidth + paddingLeftRight + borderLeftRight（没有外边距）；
  控制offsetWidth宽度始终为100px:box-sizing:border-box;

margin纵向重叠问题

• margin-top和margin-bottom会发生重叠
• 中间空的标签元素会被忽略

// AAA和BBB之间的距离是多少？
<style>
   p{
   	font-size:16px;
   	line-height:1;
   	margin-top:10px;
   	margin-bottom:15px;
   }
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

答案：15px

margin负值

• margin-top和margin-left设置负值：元素会向上和向左移动；
• margin-right设置负值：自身元素不受影响，右侧元素会向左移；
• margin-bottom设置负值：自身元素不受影响，下方元素会向上移

什么BFC？BFC的应用？

• BFC：一块区域内部区域如何渲染都不会影响外界的元素
• 形成BFC常见场景：
  1. float不是none
  2. overflow不是visible
  3. position是absolute或fixed
  4. display是flex inline-block
• 形成BFC常见场景：
  清除浮动（overflow:hidden）

float布局，清除浮动（clearfix）

• 清除浮动
  1. 空元素加 clear:both;
  2. 给父元素加 overflow:hidden;
  3. afert伪类
  4. 父级元素同时浮动
  5. 父级元素固定高度

// 手写clearfix
.clearfix:after{
   content:"";
   height:0;
   display:block;
   clear:both;
}
.clearfix{
   zoom:1;  /*兼容IE*/
}

flex画色子？？

??后期补充

CSS的定位position

• relative：相对于自身定位
• absolute：相对于最近一层的父元素定位
• fixed: 相对于浏览器本身
• static: 不定位
• sticky：磁贴定位（目前兼容不好）

水平垂直居中对齐？

水平对齐

inline元素：text-align:center;

block元素：margin:auto;

absolute元素：left50% + margin-left的负值

居中对齐

inline元素：line-height = height;

absolute元素：top和margin-top的负值

absolute元素：transform:translate(-50%,-50%)

absolute元素：top、left、right、bottom=0 + margin:auto;

line-height的继承问题？

• 如果是px：例如30px，继承30px
• 如果是数字的倍数：例如2，继承2
• 如果是相对单位（%和em）:继承计算出来的数值

rem是什么？

• 相对长度单位，相对于根元素

如何实现响应式？