学习前端的第八天

今天讲些比较细的东西

一、文本在网页中的显示

网页中文本分为英文和中文，文本在网页中是如何显示的或者叫做如何解析划分的呢？

1. 顶线（top line）：中文汉字的的上端沿；
2. 中线（middle line）：横过英文字母"n"上端沿中间的线；
3. 基线（base line） ：不是汉字文字的下端沿，而是以英文字母"n"的下端沿，图片默认以基线排列的；
4. 底线（bottom line）：中文汉字的下端沿，准确来说应该是英文字母"g"的下端沿；
5. 行高（line-height）：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高。一般情况下，也可以认为是相邻文本行基线间的距离。
6. 行距：指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离。当然，我更愿意认为是（上文本行行高-内容区高度）/2 +（下文本行行高-内容区高度）/2。

vertical-align 和 table的valign属性是一样的功能：

1. vertical-align也是垂直对齐方式
2. 常用属性值：top、middle、bottom、baseline
3. 只对内联块和内联元素起作用，且不能继承

作用：

• 可以解决当容器没有设置高度的时候，图片会默认把容器底部撑大几像素（大概3px）的问题，直接给图片设置vertical-align:top;
• 可以给table表格标记使用，功能和html属性valign是一样的

二、定位POSITION

定位介绍：

1. 标准流，就是正常的网页排版顺序（块级、行内、行内块元素）
2. 浮动流，脱离标准流成为浮动流（让自上而下排列的元素横向排列，还可以给不能设置宽和高的元素设置宽和高）
3. 定位流，一个标记设置了position属性后成为定位流，可以让元素进行叠加（层级关系）
4. 定位，元素位置发生改变或者移动。定位元素的位置进行移动需要一个参照物
5. 定位属性必须配合这几个属性一起使用left、right、top、bottom

定位属性：

• static 默认值，或者叫做静态定位，遵循的是正常的网页排版顺序（标准流）
• relative 相对定位
• absolute 绝对定位
• fixed 固定定位

relative 相对定位

特点：

1. 不脱离文档流，所以占位置（空间）
2. 相对于自己以前在标准流中的位置进行定位，也就是和自己作比较
3. 相对定位区分元素类型（一个标记之前在标准流里的类型是什么样的，设置了相对定位后依旧是那样，例如之前是内联，之后还是内联）
4. 相对定位作用：可以对元素进行微调、和绝对定位一起使用

absolute 绝对定位

特点：

1、脱离文档流，不占位置（空间）

2、相对于祖先元素进行定位的

• 绝对定位相对于谁进行定位，看它是不是定位流加粗样式
• 先去找父元素，如果没有定位流，就往上一级继续查找，直到最外层还是没有,才以body进行定位
• 子元素设置绝对定位,上级元素设置相对定位(子绝父相)

3、绝对定位是不区分元素类型

fixed 固定定位

特点：

1. 脱离文档流，不占位置（空间）
2. 相对于body进行定位的，当你没有指定的时候它不会自己去找body
3. 不区分元素类型的
4. 不会随着滚动条的滚动而滚动
5. 固定定位如果没有指定相对于body进行定位，默认会随着标准流的元素移动

定位层级关系：

1、定位流的元素都有一个层级关系

2、绝对定位的元素相互之间会进行叠加，最后定位的元素默认排列在最上面

3、控制定位属性的层级关系

• z-index:auto | number;
• auto默认值，number可以设置具体的数值
• z-index属性没有单位，可以负值
• 数值越大排列最上面

元素垂直居中方法：

方法一：

• 给容器设置position:relative;

• 给子元素设置如下属性：

  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;

2、方法二：

• 给容器设置position:relative;

• 给子元素设置如下属性：

  position:absolute;
  left:50%;
  top:50%;
  margin-left: -(取该元素宽的一半)px;
  margin-top: -(取该元素高的一半)px;

• 注意这种方法会有问题就是如果元素个位上是单数，例如height:501px，像素没法精确到0.1所以没办法准确居中。

注意：

当块级元素脱离文档流后，它的宽度不会再跟随容器
当一个元素设置了定位属性后，如果没有设置宽度和高度，由于定位自身的特性会导致宽度和高度跟容器一样的
条件：left和right一起设置了或者top和bottom一起设置了

三、补充知识点

1、border-radius

语法

• border-radius:值1;  值1决定边框4个角缩成圆的大小
• border-top-left-radius:值1;    左上角变成圆角
• border-top-right-radius:值1;     右上角变成圆角
• border-bottom-right-radius:值1;  右下角变成圆角
• border-bottom-left-radius:值1;    左下角变成圆角
• border-radius:值1 值2 值3 值4;  值1指左上角，值2指右上角，值3指右下角，值4指左下角

• 把元素设置为圆的条件：
• • 标记的形状必须是正方形
• • border-radius的值设置为元素宽度的一半，即border-radius:50%;

2、子选择器：由于后代（包含）选择器，只要是它后面的子元素都会有它的样式功能，为了限定子元素的样式，就需要用到子选择器

语法：

• 选择器1>选择器2{}
• 作用：限定样式起作用的范围，只对限定的子元素起作用，其他的后代元素不会起作用

3、cursor:pointer;表示手型，当你把鼠标移到li标记上时，鼠标的指针会变成手型