北京seo前端优化(seo搜索引擎优化实战)

1-1、HTML语义化的理解

HTML语义化是不需要知道HTML里面的内容就能知道这段话的含义，例如h1的标签表示标题，p标签表示段落，ul表示无序列表等等。这样有两个好处，一是利于代码理解和走查，二是利于机器理解做seo的优化。

1-2 HTML中哪些是标签是块级元素，哪些是内联元素

块级标签：h1 p div ul section等

内联标签：img span i input a 等等

2-1、盒模型宽度的计算

div1的offsetWidth = 内容宽度（width）+ 内边距（padding）+ 边框（border） 无外边距（margin） = 100 + 20 + 2 ==122px；如果加上box-sizing:border-box 那div1的offsetWidth就是100px，这个内容的宽度包含了padding和border宽度

2-2 margin纵向重叠问题

AAA到BBB的距离为15px，这是因为相邻元素的margin-top和margin-bottom会发生重叠，空白的p标签也会发生重叠（类似于被忽略掉的意思），所以实际AAA和BBB的距离就是15px

2-3 maring负值的问题

margin-top、margin-left设置负值，元素本身会向上，向左移动

margin-right 设置为负值，元素本身不受影响，它右侧的元素会向左移动

margin-bottom设置为负值，元素本身不受影响，它下方的元素会向上移动

2-4 BFC（block format context）块级格式化上下文的理解与应用

bfc表示一块独立的渲染区域，内部元素的渲染不会影响到边界以外的元素

形成bfc的条件，例如： float不为none；position为absolut或fixed； overflow不为visible；

display为flex或inline-block等。

bfc常用来清除浮动。

2-5 float布局

圣杯布局，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性。其核心是三个盒子都设置浮动，主体盒子设置宽度100%，左侧盒子设置margin：-100%，右侧盒子设置maring-right为负值，具体的值和右侧盒子宽度等同

上代码，直接可以copy代码在在html文件看看效果

2-6 手写clearfix

2-7 flex布局

flex布局主要有5个基础属性：

flex-direction属性，主轴的方向，可以是水平方向，也可以是垂直方向

justify-content属性，主轴对齐的方式，开始，居中，两端对齐等方式

flex-wrap属性，是否换行显示

align-items属性，与主轴垂直方向的显示方式，有开始，居中，末端对齐等方式

align-self，子元素在与主轴垂直方向的显示方式，有开始，居中，末端对齐等方式

应用场景：用flex布局画一个骰子的3

千里之行，始于足下，关于技术的沉淀，从今天开始，记录这么些年开发总结的点点滴滴~！

本文链接：https://www.24zzc.com/news/169824055452157.html