CSS中绝对定位和相对定位的理解:
1,relative 会相对于原来的位置偏移 元素设置此属性后仍然处在文档流中 不影响其他元素的布局 相对定位
2 绝对定位: 元素会脱离文档流 如果设置偏移量 会影响其他元素的位置定位 定位是相对于离元素最近的设置了绝对定位和相对定位的父元素绝对的,如果没有父元素设置或者没有相对定位和绝对定位。则元素相对于根元素html元素进行定位
包含块:离当前元素最近额祖先元素
绝对定位的包含块就是理他最近的开启了定位的祖先元素
绝对定位和相对定位会提升元素的层级
水平布局 会增加rigth 和 left
固定地位:也是一种绝对地位 大部分特点和绝对定位一样(fixed) 绝对定位相对包含块进行定位
唯一不同的是永远相对视口定位
粘滞定位:(兼容性差)
粘滞定位和相对定位的效果一致 但是会随着窗口固定在某个位置6
高度塌陷和BFC问题:块级格式化环境
高度塌陷问题:在浮动布局中,父元素的高度默认是被子元素撑开的
当子元素浮动后,其完全脱离文档流,无法撑起父元素的高度,导致父元素高度丢失
BFC:
BFC 是CSS的一个隐藏属性
开启BFC的元素不会被浮动元素覆盖
子父边距不会重叠
开启BFC的元素可以包含浮动的子元素
-可以通过一些特殊方式开启BFC
1.父元素 float (缺点 脱离width)
2.将父元素作为行内块元素
3.将overflow 设置为非visible 可以保证它不被浮动的元素覆盖
clear 可以清除float元素对当前元素的影响
通过外边距实现
left right
both 清除较大一侧
使用伪元素解决高度塌陷问题:
同时解决了高度塌陷和外边距重叠的问题
垂直居中的方式 绝对定位的方式(1)
元素的层级:对于开启了定位的元素 可以设置z-index属性来设置层级,z-index需要一个整数作为参数,值越大,元素的层级越高。绝对定位按照执行顺序可以通过设置z-index的值变大使得元素浮动在下面元素之上。z-index需要整数显示 元素的层级越大 则优先显示靠下的层级。父类元素无法盖住后代元素。
字体相关的样式:
color 用来设置字体颜色
font-size 字体的大小
和font-size相关的单位
em 相当于当前元素的一个font-size
rem 相当于根元素的font-size
font-family 字体族 可以同时指定多个字体 字体之间用逗号隔开
指定类别 浏览器会自动识别
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
@font-face 可以将服务器中的字体直接提供给用户使用
问题:加载速度
版权问题
图表字体:
fontawesome
下载文件
解压
将CSS和webfonts放在同一个文件夹
将all.css引入网页中
使用方式:使用类名(i标签表示)
一般是fas 和 fab
原文:https://www.cnblogs.com/robingu/p/13672611.html