扎实的基础-html&css

p6必备

html5语义化

语义化是指根据内容的结构，选择合适的标签来构建界面
1.增强代码可读性
2.让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重，有利于SEO，
3.在没有CSS的情况下也能呈现较好的内容结构与代码结构，

html5的新特性

canvas svg audio vedio 拖放api websocket sessionStorage localStorage

script 标签中 defer 和 async 的区别？

script: 会阻碍html的解析，等下载好并执行完脚本才继续解析html
async script：解析html的同时异步下载脚本，下载完成之后，立刻执行，有可能会阻断html的解析
defer script：解析html的同时异步下载脚本，等html解析完成之后，才执行脚本

8ea091aed8364b88a653a13c4845a824~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp未知大小

盒模型

盒模型由 content + padding + border + margin 构成

标准盒模型（默认值）：box-sizing: content-box
盒子宽度: content

IE盒模型：box-sizing: border-box
盒子宽度:content + padding + border

选择器与优先级

!important > style内联选择器 > id选择器 > class类选择器 > 标签选择器

优先级计算规则

https://juejin.cn/post/6844903709772611592

大意：
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;
B 的值等于 ID选择器 出现的次数;
C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
D 的值等于 标签选择器 和 伪元素 出现的总次数 。

算出的A 、B、C、D可以简记作：(a, b, c, d)。

比较规则：从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的

eg:

li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h1 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */

FC

https://segmentfault.com/a/1190000014886753

什么是FC

Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。

BFC

Block Formatting Context，块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，空间里的子元素不会影响到外面的布局。
换言之，拥有BFC特性的元素，他的子元素不管咋搞都不会影响外面的元素【只管子元素，本身管不了！！！】。

BFC特性

• 内部盒子垂直放置
• 内部元素margin重叠，两个BFC避免margin重叠
• 子元素不会超出它的包含块，包含浮动元素可清除浮动
• BFC的区域不会与浮动元素区域重叠，避免子元素被浮动元素覆盖
• 浮动子元素参与BFC的高度计算；避免因浮动元素导致的高度塌陷
• 子元素不会影响到外面的元素，也不被外面的元素影响

BFC触发

只要元素满足下面任一条件即可触发 BFC 特性：

• 根元素：body html
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position：absolute、fixed
• 行内块元素：display 为 inline-block、table-cells、flex
• overflow 的值不为 visible 即：(hidden、auto、scroll)

BFC应用

• 解决margin重叠
  

  两个元素只要分别属于 不同的 拥有BFC特性 的父级，margin就不会重叠;
  假如两个元素属于同一个父级，那margin一定会重叠，和元素本身是否拥有BFC特性没有任何关系，和父级是否拥有BFC特性也没有任何关系；

• 包含浮动元素可清除浮动
• 避免子元素被浮动元素覆盖
• 避免因浮动元素导致的高度塌陷

IFC

Inline Formatting Contexts：”行内格式化上下文，
（1）内部的盒子会在水平方向，一个个地放置；
（2）IFC的高度，由里面最高盒子的高度决定；
（3）当一行不够放置的时候会自动切换到下一行；

IFC的应用

• 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
• 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC

GridLayout Formatting Contexts:网格布局格式化上下文，display值为grid的元素

FFC

Flex Formatting Contexts:"自适应格式化上下文"，display值为flex或者inline-flex的元素

响应式布局

px、em、rem

px： 相对于显示器的屏幕分辨率
em： 相对于父级元素的字体大小，值不固定
rem：相对于根元素的字体大小【css3新特性】

移动端适配的方案，有什么新技术

flex

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

align-items 与 align-content 有什么区别

align-content属性定义了多根主轴线的对齐方式。如果只有一根轴线，该属性不起作用。

css问题汇总

css filter

blur 高斯模糊
brightness 亮度
contrast 对比度
grayscale 灰度
hue-rotate 色彩旋转
invert 反色
opacity 透明度
saturate 饱和度
sepia 褐色

@import和link引入样式文件的区别

1、从属关系：link是html的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等；@import是css的语法，只有导入样式表的作用。
2、加载顺序：link会和html同时被加载；@import引入的CSS将在页面加载完毕后被加载。
3、兼容性：@import是CSS2.1才有的语法，所以只能在IE5以上才能识别；而link是HTML标签，不存在兼容性问题。
4、DOM可控性：js只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。

清除浮动

1.拥有BFC特性的父元素包起来;
2.clear: left/right/both【哪边不允许有浮动元素，clear就是对应方向的值，两边都不允许就是both】
3.父元素结束标签之前插入块级元素
4.父元素加上伪元素

.clearfix:after {
    content: '.';
    height: 0;
    display: block;
    clear: both;
}

5.br标签： <br clear="all" />

垂直上下居中

1.IFC:【利用inline-block】 text-align:center; vertical-align: middle；
2.display：flex；
3.position： aboslute； 【calc(), transform: translate(-50%,-50%); 设定死top、left】
4.margin: 0 auto;结合1 或者 5
5.行内元素：line-height为设计高度

b 和 strong 的区别

<b>单纯样式加粗。
<strong> 内容重要，利于爬虫抓取