HTML+CSS

第二周周报

                 汇报人：阿伟

• 本周学习内容：

1. 学习相对定位、绝对定位、固定定位、粘滯定位.
2. 绝对定位元素的位置，元素的层级，
3. 京东轮播图的练习
4. 字体族、图标字体简介、图标字体的其他应用.
5. 学习iconfont、行高、字体的简写属性、文本的水平和垂直对齐、其他文本样式.
6. 京东顶部导航条的练习.

• 本周知识点总结：

1. 相对定位：

   定位（position）是一种更加高级的布局手段.可以通过定位将元素摆放到页面的任意位置，使用position属性来设置定位.

  可选值：

Static 默认值，元素是静止的没有开启定位

Relative 开启元素的相对定位，

Absolute 开启元素的绝对定位

Fixde  开启元素的固定定位

Sticky 开启元素的粘滯定位

当元素的position 属性设置为relative时则开启了元素的相对定位.

相对定位的特点：

• 元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化.
• 相对定位是参照于元素在文档流中的位置进行定位的。
• 相对定位会提升元素的层级.
• 相对定位不会使元素脱离文档流.
• 相对定位不会改变元素的性质，块还是块，行内还是行内.

偏移量(offset):

 当元素开启了定位以后，可以通过偏移量来设置元素的位置.

Top:定位元素和定位位置上边的距离

Bottom:定位元素和定位位置下边的距离

Left:定位元素和定位位置左边的距离

Right: 定位元素和定位位置右边的距离

定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下，我们只会使用其中之一.

 top值越大，定位元素越向下移动

Bottom值越大,定位元素越向上移动

定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用一个.

left越大元素越靠右

Right越大元素越靠左

1. 绝对定位（absolute）:

当元素的position属性值设置为absolute时，开启了元素的绝对定位.

绝对定位的特点：

• 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化.
• 开启绝对定位后，元素会从文档流中脱离.
• 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开.
• 绝对定位会使元素提升一个层次.
• 绝对定位元素是相对于其他包含块进行定位的.

包含块（containing block）：

 正常情况下：

包含块就是离当前元素最近的祖先块元素.

<div><div></div></div>

<div><span><em>hello</em></span></div>

绝对定位的包含块：

包含块就是离他最近的开启定位的祖先元素.

如果所有的祖先元素都没有开启定位则根元素就是他的包含块.

Html(根元素，初始包含块)

1. 固定定位：

将元素的position属性设置为fixde则开启了元素的固定定位.

固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样.

唯一不同的是固定定位永远参照于浏览器的视口进行定位.

固定定位的元素不会随网页的滚动条滚动.

1. 粘滯定位：

Position：sticky；

当元素的position属性设置为sticky时则开启了元素的粘滯定位.

粘滯定位和相对定位的特点基本一致：不同的是粘滯定位可以在元素到达某个位置时将其固定.

1. 绝对定位元素的位置：

      水平布局：

Left+margin+left+border-left+padding-left+width+padding-right+border-right+margin-right+right

当我们开启了绝对定位以后：

水平方向的布局等式就需要添加left和right两个值，此时规则和之前一样，只是多添加了两个值.

当发生过度约束：

如果9个值中没有auto 则自动调整为right值以使等式满足，如果有auto，则自动调整auto，则则自动调整auto的值以使等式成立.

可设置的auto的值：margin  width left  right

因为letf和right的默认值是auto，所以

如果不知道left 和right则等式不满足时，会自动调整这两个值.

垂直方向的布局也要满足等式：

 Top+margin-top|bottom+padding-top|bottom+border-top|bottom+bottom

1. 元素的层级：

  对于开启了定位元素，可以通过z-index属性来指定元素的层级，z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示.

   如果元素的层级一样，则优先显示靠下的元素

祖先的元素的层级在高也不会盖住后代元素.

1. 字体族：

  字体相关的样式

color  用来设置字体颜色

font-size 字体的大小

em相当于当前元素的一个font-size

rem相当于根元素的一个font-size

font-family  字体族（字体的格式）

例如：font-family

 可选值：

Serif：衬线字体

Sans-serif:非衬线字体

Monospace：等宽字体

指定字体的类别，浏览器会自动使用该类别下的字体；

 font-family可以同时指定多个字体，多个字体间使用（逗号），隔开，字体生效时优先使用第一个，第一个无法使用时，则使用第二个，一次类推.

问题：

• 加载速度，
• 版权
• 字体格式

例如;

Font-family:’myfont’;

Src:url(‘./font/zcoolkuaile-regular.ttf’)format(“truetype”);

1. 图标字体简介：

图标字体（iconfont）

  在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常不灵活.

  所以在使用图标时，我们还可以将图标直接设置为字体.

然后通过font-face的形式来对字体进行引入.

这样我们就可以通过使用字体的形式来使用图标.

Fontawesome 使用步骤：

• 下载 Font Awesome
• 解压
• 将css 和webfonts移动到项目中
• 将all.css引入网页中
• 使用图标字体，直接通过类名来使用图标字体

图标字体的其他使用方式：

通过伪元素 设置图标字体：

• 找到要设置图标的元素通过before或after选中
• 在content中设置字体的编码
• 设置字体样式

通过实体来使用图标字体：

&#x图标的编码；

例如：<span class=”fas”>of3;

      </span>

搜索 iconfont（阿里巴巴矢量图标库）

1. 行高（line height）

行高是指文字占有的实际高度，可以通过line-height 来设置行高，行高可以直接指定一个大小（px  em）,也可以为行高设置一个整数，如果是一个整数的话，行高将会使字体的指定的倍数.

字体框;

字体框就是字体存在的格子，设置font-size 实际上就是设置字体框的高度：

行高会在字体框的上下平均分配：

 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中.

行高经常还用来设置文字的行间距：

  行间距=行高+字体大小

字体的简写属性:

例如;font:bold(加粗) italic（倾斜） sopx/2

文本的水平和垂直对齐：

Text-align  文本的水平对齐.

可选值：left 左侧对齐

        Right 右侧对齐

        Center 居中对齐

        Justify 两端对齐

Vertical-align:设置元素垂直对其：

   可选值：

        Baseline 默认值，基线对齐

        Top   顶部对齐

        Bottom 底部对齐

        Middle 居中对齐  

设置边框

P{ border: 1px red solid;}  

img {vertical-align:bottom;}

1. 其他的文本样式;

Text-decoration 设置文本修饰

可选值;

 Nome 什么都没有

Underline 下划线

Line-through 删除线

Overline 上划线

White-space 设置网页如何处理空白;

可选值：

Normal  正常

Nowrap   不换行

Pre    保留空白

Overflow:hidden;

Text-overflow:ellipsis;

• 下周学习计划：

    1、ps的安装，学习背景，背景练习。

    2、学习雪碧图，线性渐变，径向渐变，电影卡片练习。

3、学习表格的简介，长表格，表格的样式。

4、表单简介，表单补充。

5、项目搭建，导航条结构的搭建。

6、导航条基本样式。

web前端工作室

                        2021年11月12日