2021-03-14

前端知识小课堂开课了
html语义化
左侧就是html语义化

总结：增加代码可读性，让搜索引擎更容易懂（SEO）

块级元素&内联元素
display: block/table; 有div、h1、h2、table、ul、ol、p等等
特点：标签在不设置宽的时候也会独占一行
display: inline/inline-block; 有span、img、input、button等等
特点：标签不会独占一行，会一直往后排，知道浏览器宽度不够，然后自动换行
盒模型宽度计算

offsetWidth的定义
定义：offsetWidth =（内容宽度 + 内边距 + 边框），无内边框
由offsetWidth的定义等到，offsetWidth = 122px
如果让offsetWidth等于100px如何实现
实现方法，在样式中添加box-sizing: border-box;,将盒子变为怪异盒子，使内边距和边框不会再盒子元宽度的基础上添加新的宽度
margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠
直接忽略空的p标签，将其重叠
上图答案为15px
对margin的left、top、right、bottom设置负值，有何效果
设置 margin-top和margin-left为负值，元素分别会向上和向左移动
设置margin-right为负值，右侧元素左移，自身不会影响
设置margin-rbottom为负值，下侧元素上移，自身不会影响
什么是BFC？如何应用？
BFC全名为Block Format context,块级格式化上下文，它有独立的渲染区域，内部的渲染区域不会影响外部渲染区域
当是一下情况时BFC模式
position 的值是absolute和fixed时
overflow的值buvisible时
float不是none时
display是flex inline-block等时
如何实现圣杯布局和双飞翼布局
为何使用如此方式布局
三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
总结
使用float布局
两侧使用margin复制，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个是padding，一个是margin
flex布局
flex的布局方式的一部分

实现一个三点的色子

css定位
absolute 和 relative相对于谁定位
absolute 依据最近一层的定位元素
定位元素有absolute relative fixed
body
relative 依据自身定位
居中对齐的实现方式
水平居中
inline元素 ： text-algin：fenter；
block元素：margin：auto；
垂直居中
inline元素：line-height：当前元素父盒子的高；
图文样式
line-height如何继承