教你快速理解前端基础知识体系

1. html

1. 如何理解html语义化

1. 让人更好的读懂 
2. 让搜索引擎更好的读懂 （有利于SEO)

2. 详细例举一些 html标签 中内联元素 和 块级元素

块级元素 display: block/table  （div h1 h2 ul ol p table 等）
内联元素 display: inline/inline-block （span button input select img 等）

2. css

1. flex布局

父元素上有什么属性 
    display: flex || inline-flex;
    justify-content: center || flex-start || flex-end || space-around || space-between
    align-items: center || flex-start || flex-end || stretch || baseline 
    flex-direction: row || row-reverse || columns || columns-reverse
    flex-wrap: wrap || nowrap || wrap-reverse
    flex-flow: flex-direction || flex-wrap 
    align-content: flex-start || flex-end || center || stretch
子元素上有什么属性
    order: <interger>
    align-self: flex-start || flex-end || center 
    flex-growth: <interger>
    flex-shrink: <interger>
    flex-basis: <interger>
    flex: flex-growth || flex-shrink || flex-basis 

2. css盒模型

// 下述代码 div的offsetWidth 为多少
.div {
    width:100px;
    padding:10px;
    border:1px solid black;
}

因为 box-sizing默认为content-box 
所以 offsetWidth = width + padding + border
offsetWidth = 100px + 20px + 2px

// 下述代码 div的offsetWidth 为多少
.div {
    width:100px;
    padding:10px;
    border:1px solid black;
    box-sizing:border-box;
}

因为 box-sizing设置为border-box 
所以 offsetWidth = width
offsetWidth = 100px 

3. margin纵向重叠问题

// 下述代码 相邻的 p 标签上下间距为多少？
<div>
    <p class='top'></p>
    <p class='bottom'></p>
</div>

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

因为当2个元素上下相邻的时候, 会发生重叠, 重叠的时候 取margin-bottom margin-top 最大的值 
所以上下间距值为15px

4. margin负值问题

margin负值问题

margin-top 和 margin-left 负值, 元素向上、向左移动
![60d584330989db2704010239.jpeg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb402c13193240388548c76a235fe17b~tplv-k3u1fbpfcp-watermark.image?)

margin-right负值, 右侧元素左移, 自身不受影响
margin-bottom负值, 下方元素上移, 自身不受影响

![60d58419099f292205000298.jpeg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cae31b55aae14d8eb8d7f73c45047183~tplv-k3u1fbpfcp-watermark.image?)

5. BFC

独立渲染区域，内部元素渲染不会影响外部元素

① 触发条件： 

float 不是 none 

position 是 absolute 或fixed

overflow 不是 visible

display 是 flex 或 inline-block

② 常见应用： 

清除浮动

为何要清除浮动？ 比如图片高度60，而所处的div高度才20，图片会 脱离文档流，跑到该div的外面。因此需要清除div的浮动，让图片正确地显示在div中。

BFC清除浮动原理？ BFC会渲染 独立区域，因此不会让内部元素跑到外头作乱。

6. float布局

考点:
1. 如何实现圣杯布局和双飞翼布局?

[](https://zhuanlan.zhihu.com/p/103774667)

实现圣杯布局和双飞翼布局目的
1. 三栏布局，中间一栏最先加载和渲染（内容最重要）
2. 两侧内容固定，中间内容随着宽度自适应
3. 一般用于PC网页

总结:
双飞翼布局其实和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布，不同的就是html结构，双飞翼是在center元素内部又设置了一层inner-center的元素并设置它的左右margin，而非圣杯布局的padding，来排除两边元素的覆盖。所以这两种布局原理基本一样，关键就是在于设置负margin的技巧，和元素浮动的相对定位技巧来实现。

7. relative 和 absolute 依据什么来定位？

relative 依据自身来进行定位
absolute 依据最近一层的定位元素来进行定位 
定位元素 absolute relative fixed
没有找到定位元素的话, 就会找到body

8. img中alt和title的区别

alt为图片加载不出来的时候,显示的文字
title为鼠标移到图片上面的时候，显示的文字

9.清除浮动的方法

清除浮动的方法

使用clear:both清除浮动
clear:both意思就是清除浮动；
.clear{
    clear:both;
}

overflow方法的使用
当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果
.bfc{
    overflow: hidden;
}

手写clearfix
.clearfix:after{
    content: '';     /*生成内容为空 */
    display: table;  /* 转为块级元素，使用display: block; 也可以*/
    clear: both;     /* 清除浮动*/
}

ps: 每日更新10道知识点,日更.