这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

HTML

1.HTML页面基本结构标签

<html>
<head>
- <meta>
- <title>
<body>

2.DTD（文档声明类型）

用途：用来规定浏览器解析HTML语法的版本（规范）
基本写法：<!DOCTYPE html>

3.字符集

通过修改<meta>中的charset属性进行配置
1. UTF-8：1个汉字3个字节
2. GBK：1个汉字2个字节

4.HTML的注释

5.标签分类与用途

行内元素：<a>（锚点）、<b>（加粗）、<span>（容器）、<img>（图片）、<input>（输入框）、<button>（按钮）、<small>（小字体）、<strong>（粗体）、<lable>（表格）、<textarea>（文本框）
块级元素：<div>（块级容器）、<dl>（定义列表）、<ol>（有序列表）、<ul>（无序列表）、<li>（列表项）、<form>（表单）、<h1>-<h6>（标题）、<hr>（分隔线）、<p>（段落）、<table>（表格）
空元素（使用闭标签无效，如<input></input>无效）：<input>（输入框）、<br>（换行）、<hr>（分隔线）、<img>（图片）、<link>（链接）、<meta>（描述）

CSS

1.盒模型

分为标准盒模型(content-box)与IE盒模型(border-box)

- `标准盒模型`宽度：`width`
- `IE盒模型`宽度：`width+padding+border`

2.Flex

基本用法：display:flex

基本属性：flex-grow、flex-shrink、flex-basis，默认值为0 1 auto，表示默认搜索，元素大小则为原本的大小

flex-grwo:默认为0，值为一个单位的正整数，表示元素伸缩长度，元素会按照比例伸长填补剩余空间
flex-shrink:默认为1，当空间不足则元素自动缩小
flex-basis:默认为auto，当未设置值时，则元素大小默认为基础大小

常用方法：flex:1，即1 1 auto，表示自动伸缩、收缩，可用于进行宽高适应

Flex常见容器属性：

flex-direction(元素排列方式，行row或列column)
flex-wrap(默认nowrap,所有元素单行排列、wrap多行从上到下排列、wrap-reverse多行从下到上排列)
flex-flow(即flex-direction与flex-wrap的组合)`
justify-content(默认flex-start从起点顺序排列、flex-end相对终点线排列、center居中排列、space-between首元素在起点，尾元素在终点，按比例均匀分布、space-around元素均匀分布，两侧均有空白，两元素之间距离是空白的两倍、space-evenly元素均匀分布，两侧与各元素之间距离相等)
align-item(center按轴居中排列，默认strech按轴拉伸排列，flex-start按轴起点排列，flex-end按轴终点排列，baseline按第一行文字基线排列) - align-content(同justify-content，但没有space-evenly，且默认为strech拉伸显示)

3.伪类和伪元素

实现方法：

伪类：:
伪元素：::

区别：

伪类表示被选中元素的状态
伪元素更像是表示被选中元素的某个独立的部分（在文档流之外）

4.实现三角形

利用透明、边框的特性可以实现三角形的显示

. main{
    width:0;
    height:0;
    border:30px solid transparent;
    border-left-color:blue;
}

5.BFC

BFC又称块级格式化上下文，脱离于文档流，其有以下特点：

内部元素垂直排列
不受外部标签影响
同一BFC中两个元素之间的margin会发生重叠
浮动元素的高度计入BFC高度

触发条件：

display:flex
display:table-cell
display:inline-block
overflow-hidden
position:fixed
position:absolute

6.优先级

!important> 内联 > ID > 类 > 标签

7.rem和em

rem:相对于根元素字体大小 em:相对于父元素字体大小

8.垂直居中

.main1{
    display:flex;
    justify-content:center;
    align-item:center;
}

.main2{
    position:absolute:
    top:50%; left:50% ;
    transform:translate(-50%,-50%);
}

.main3{
    position:absolute;
    top:0; left:0; bottom:0; right:0;
    margin:auto;
}

9.清除浮动

.main1{
    clear:both;
}

.main2{
    overflow:hidden;
}

.main3:after{
    content:"";
    display:flex;
    clear:both;
}

10.display:none、opacity:0、visibility:hidden区别

display:none:使元素消失在DOM树上，触发重排 visibility:hidden:隐藏元素，触发重绘，但元素还在DOM树上，不能够触发事件，但能够继承——子元素可以显示，相当于让元素选择性不可用 opacity:0:隐藏元素，不继承，子元素不能显示，但可以触发事件，相当于让元素彻底隐身

【回炉重造系列】HTML+CSS

HTML

CSS