布局排查 vscode差错 字体图标使用＜i＞标签原因 字体图标声明（路径） 字体图标追加 浮动本质

图标使用＜i＞标签原因 字体图标声明（路径） 字体图标追加 浮动本质"/>

布局排查 vscode差错 字体图标使用＜i＞标签原因 字体图标声明（路径） 字体图标追加 浮动本质

2020/12/23

• 图片一像素问题 。

  使用display:block;

• 检查页面布局问题方法，可以在页面把元素一一删除，一一排除问题，找出问题所在。

• 可以使用margin负属性值重合盒子。

• 背景图片background的url属性可以不用加引号
  background:url(./img/images.png)

2020/12/24

• vscode检查错误

  • 点击左下角交叉按钮
  • 发现错误 找到有道词典 截屏翻译
  • 根据截屏翻译出来的内容找到错误

• 字体图标使用标签或者标签的原因

  • 使用span标签书写麻烦 span8个字母 i两个字母；
  • 页面中几乎不用倾斜字体；
  • i代表着iconfont；
  • 装饰性的小图标或者字体图标 都会使用i标签或em标签。

• 使用link外连接css文件 字体效果出不来

  • 字体声明 出现问题 （可能是路径出现问题 ）
    @font-face {
    font-family: ‘icomoon’;
    src: url(‘fonts/icomoon.eot?i38zgr’);
    src: url(‘fonts/icomoon.eot?i38zgr#iefix’) format(‘embedded-opentype’),
    url(‘fonts/icomoon.ttf?i38zgr’) format(‘truetype’),
    url(‘fonts/icomoon.woff?i38zgr’) format(‘woff’),
    url(‘fonts/icomoon.svg?i38zgr#icomoon’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    font-display: block;
    }

  • 解决办法 ： 改成正确的路径（与真实的路径相同）

• 字体图标的追加（之前已经下载了 现在想追加新的字体图标）【icomoon】

  1. 进入icomoon官网
  2. 进入图标选择页面 点击右上角的import icons 导入图标选项
  3. 上传icomoon文件夹的selection.json文件
  4. 导入成功后 再重新挑选文字图标并下载
  5. 之前的fonts文件夹不要了 使用新下载的fonts文件（替换掉）
  6. 修改 文字声明的路径

• 外轮廓线
  outline:1px solid #ccc; //属性设置跟border一样
  一般outline轮廓边框是黑色 很丑 （之前是蓝色）

  outline:none; //进行样式重置 把input标签的外轮廓边框取消
  

• 文本域textarea禁止用户拖拽
  原因：textarea拖拽给到用户，会造成页面结构混乱问题
  resize:none;

• 浮动的本质
  起因：浮动最早就是为了用来环绕文字使用的；
  后来越来越多人使用浮动进行页面布局；
  但是浮动是脱离了标准流 ，导致浮动的元素会压住其他的盒子 ；
  但浮动的元素不会压住文字。
  float:left|right|none|inherit; //inherit规定从父元素继承float属性；

• img图片下空白缝隙问题
  原因：行内块元素会和文字的基线对齐
  //推荐使用vertical-align
  vertical-align:middle; //方法1.给图片设置vertical-align 只要不是默认值就好

  display：block;          //方法2.给图片设置display属性 变成块级元素就不会有空白间隙发生
  

• 样式初始化 base.css

  1. 初始化样式不需要自己来写 直接拿来用就行
  2. 每一家公司都有自己的base.css
     1. 由于默认标签有很多自带的样式，这些样式作为开发者实际上是不需要的。
     2. 单独写一个独立的css文件，专门去清理默认的样式。
     3. 通常命名为base.css 或者 reset.css
        //常见的一些标签的默认样式的清除
        i{font-style:normal;}
        li{list-style:none;}
        a{text-decoration:none;}
        img{border:0;vertical-align:middle;}
        input,button{outline:none;}
        .claerfix::after{display:block;content:"";height:0;visibility:hidden;clear:both}