今天讲些比较细的东西
一、文本在网页中的显示
网页中文本分为英文和中文,文本在网页中是如何显示的或者叫做如何解析划分的呢?
- 顶线(top line):中文汉字的的上端沿;
- 中线(middle line):横过英文字母"n"上端沿中间的线;
- 基线(base line) :不是汉字文字的下端沿,而是以英文字母"n"的下端沿,图片默认以基线排列的;
- 底线(bottom line):中文汉字的下端沿,准确来说应该是英文字母"g"的下端沿;
- 行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行高。一般情况下,也可以认为是相邻文本行基线间的距离。
- 行距:指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离。当然,我更愿意认为是(上文本行行高-内容区高度)/2 +(下文本行行高-内容区高度)/2。
vertical-align 和 table的valign属性是一样的功能:
- vertical-align也是垂直对齐方式
- 常用属性值:top、middle、bottom、baseline
- 只对内联块和内联元素起作用,且不能继承
作用:
- 可以解决当容器没有设置高度的时候,图片会默认把容器底部撑大几像素(大概3px)的问题,直接给图片设置vertical-align:top;
- 可以给table表格标记使用,功能和html属性valign是一样的
二、定位POSITION
定位介绍:
- 标准流,就是正常的网页排版顺序(块级、行内、行内块元素)
- 浮动流,脱离标准流成为浮动流(让自上而下排列的元素横向排列,还可以给不能设置宽和高的元素设置宽和高)
- 定位流,一个标记设置了position属性后成为定位流,可以让元素进行叠加(层级关系)
- 定位,元素位置发生改变或者移动。定位元素的位置进行移动需要一个参照物
- 定位属性必须配合这几个属性一起使用left、right、top、bottom
定位属性:
- static 默认值,或者叫做静态定位,遵循的是正常的网页排版顺序(标准流)
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
relative 相对定位
特点:
- 不脱离文档流,所以占位置(空间)
- 相对于自己以前在标准流中的位置进行定位,也就是和自己作比较
- 相对定位区分元素类型(一个标记之前在标准流里的类型是什么样的,设置了相对定位后依旧是那样,例如之前是内联,之后还是内联)
- 相对定位作用:可以对元素进行微调、和绝对定位一起使用
absolute 绝对定位
特点:
1、脱离文档流,不占位置(空间)
2、相对于祖先元素进行定位的
- 绝对定位相对于谁进行定位,看它是不是定位流加粗样式
- 先去找父元素,如果没有定位流,就往上一级继续查找,直到最外层还是没有,才以body进行定位
- 子元素设置绝对定位,上级元素设置相对定位(子绝父相)
3、绝对定位是不区分元素类型
fixed 固定定位
特点:
- 脱离文档流,不占位置(空间)
- 相对于body进行定位的,当你没有指定的时候它不会自己去找body
- 不区分元素类型的
- 不会随着滚动条的滚动而滚动
- 固定定位如果没有指定相对于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标记上时,鼠标的指针会变成手型