编写html注意事项

使用字体图标iconfont

1. 复制svg代码 放进span或a标签里 

        svg不对齐： display:flex ; margin：auto;

        改变颜色：手动删除svg标签中的fill属性，在css中设置fill和伪类hover的fill

缺点：一长串的代码 

svg：可缩放矢量图形

基于 XML 标记语言，用于描述二维的矢量图形。

2. 字体图标-Iconfont

字体图标展示的是图标，本质是字体。

使用方法：

在iconfont-阿里巴巴矢量图标库里选择图标，加入购物车，添加至项目——>下载到本地

➢ 使用字体图标 - Unicode编码：

• 引入样式表：iconfont.css 

        解压文件到项目相同目录下

        引用：

  <link rel="stylesheet" href="font_3668166_te0tw80tmes/iconfont.css">

• 复制粘贴图标对应的Unicode编码

<span class="iconfont">&#xe60e;</span>

• 设置文字字体

span{
    font-family: 'iconfont';
}

➢ 使用字体图标 - 类名：

<span class="iconfont icon-gouwuchekong"></span>

改变图标颜色用color

flex弹性盒子模型布局

display: flex;

作用：解决子元素盒子在父元素盒子中布局空间分布问题

常用属性：父元素属性

1. 公用属性 display:flex 将当前元素布局设置为flex弹性布局

2. 排列方向flex-direction: column;

3. 换行 flex-wrap: wrap;

4. 对齐justify-content: space-between;

5. 子元素在交叉轴上对齐方式 align-items 

   flex-start | flex-end | center | baseline | stretch;

     子元素属性：flex 比例分布

emmet语法

作用：通过简写语法，快速生成代码

+ 兄弟关系

div+p+bq 表现为 

<div></div>
<p></p>
<blockquote></blockquote>

#input:focus+div

伪类和伪元素

伪类	伪元素
单冒号(:)表示伪类	双冒号(::)表示伪元素
伪类用于定义元素的特殊状态。	伪元素用于创建一些不在文档树中的元素。​​​​​​​
伪类作用对象是整个元素。	​​​​​​​伪元素作用于元素的一部分。

伪类可以用于：

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

 伪元素可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

​​​​​​​

        用after、before给li标签添加不连起来的上边线和左边线 after和before是他的子元素，使用子绝父相的定位，给li设置postion:relative; 给伪元素设置position:absulote;

规范

全屏样式 网页横向不能超出范围

用 >  表示    > 

reset.css 初始化 link导入

通配符*{margin :0; padding :0; }

auto对左右有效 对上下无效 margin: 0 auto

font-size 最小12px

了解一门语言：从历史、局限性等方面了解

如： css 的局限性 ：不能写函数

        javaScript 节点获取 重新渲染 数据不能同步响应

        vue 双向数据绑定