2020.6.28：HTML流程、iconfont、sprite、css文字溢出省略号、nth-child、vertical-aligh、li-border、BFC

今日学习内容：

# 网页制作流程

## 创建本地化文件

1. css文件，2. images文件，3. js文件，4. upload文件

## H5创建

## link reset.css、common.css、js、meta tdk(优化SEO)

## shortcut、header、nav、main、container、footer

# iconfont 的使用

1. css文件里面导入 @font-face........

2. 

<i class="iconfont>&#xe608</i>

# 雪碧图 (sprite) 的使用

1. 加一个伪类 (.icon_sprite)

2.

.icon_sprite{
background-image: url(../images/icons.png);

background-repeat: no-repeat;
}
3. 再加一个伪类(.icon_sprite_a)
4. 
.icon_sprite_a{
background-position: -252px -3px;
}
5.再把这两个伪类加入到 元素中。

# CSS文字溢出隐藏省略号

.container {
    overflow: hidden;    
    text-overflow:ellipsis;
    white-space: nowrap;
}

# 通过伪元素选择 第 n 个元素后面的伪元素

li:nth-chile(-n+8)::after{}

# 通过伪元素加 竖向 |

li:nth-child(-n+8)::after {
    content: "";
    width: 1px;
    border-right: 1px solid black;
}

# 首页 logo <h1> 元素隐藏

<div class="logo">
      <h1>
          <a href="index.html" title="xxxx">xxxx</a>
      </h1>
</div>

.logo a {
    display: block;
    width: 175px;
    height: 56px;
    background: url(../images/logo.png) no-repeat;
    /* font-size: 0; */        --------- 京东做法
    text-indent: -9999px;
    overflow: hidden;      ------------ 淘宝做法
}

# vertical-align 属性设置元素的垂直对齐方式。

垂直对齐一幅图像：
img{
    vertical-aligh : text-top;
}

文字大小不同的垂直对齐:
h1,h2{
    display : inline-block;
    vertical-aligh : super/unset;
}

# li 元素的 border 属性

1. li 元素自身就有一个 border 属性，当设置的 border 属性与之重叠时，可以将其设置为 transparent

# BFC (Block Formatting Context) 块级格式化上下文

## 它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。
1. 不同的 BFC 区域，它们进行渲染时互不干扰
2. 创建 BFC 的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
## 这个区域由某个 HTML 元素创建，以下元素会在其内部创建 BFC 区域：
1. 根元素 （HTML）
2. 浮动 (float) 和 绝对定位 (position) 元素
3. overflow 不等于 visibled 的块盒