发表于： 2020-03-16 21:15:02
0 1731
今天完成的事情：
# 基础
```
font-weight:bold 字体加粗
font-family:consolas,微软雅黑,Arial,sans-serif;//sans-serif,非衬线字体
用户电脑必须存在的字体才有效,使用多个字体,匹配不同环境
font-style:字体倾斜
text-align:元素内部文字的水平排列方式
text-decoration:文本修饰,给文字加线
a元素
del元素:错误的内容
s元素:过期的内容
text-indent:首行文本缩进
line-height:1.5;每行文本的,行高可以设置为春数字,表示相对于当前元素的字体大小
letter-space:文字间隙
```
## 选择器
### 伪类选择器,选中某些元素的某种状态
1) :link:超了解未访问时的状态
2) :visited:超链接访问过后的状态
3) :hover:鼠标悬停状态
4) :active:激活状态,鼠标按下的状态
伪元素选择器
::before 在前
::after 在后
**选择器的并列**
多个选择器,用逗号分开
.sor,p{
sor 和 p是两个分开的选择器
}
**重置样式**
先引用重置的,再引用自己书写的
常见的重置样式表:meyer.css 推荐
normalize.css reset.css
子元素会继承父元素的某些CSS属性,通常跟文字内容相关的属性都能继承
### 属性值的计算过程
一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件:该元素的所有CSS属性必须有值
一个元素,从所有属性都没有值,到所有属性都有值,这个计算过程,叫做属性值计算过程
1. 确定声明值:参考样式表中没有冲突的声明,作为CSS属性值
2. 层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS属性值
3. 使用继承:对仍然没有值的属性,若可以继承,则继承父元素的值
4. 使用默认值:对仍然没有值的属性,使用默认值
- inherit:手动(强制)继承,降幅元素的值取出应用到该元素
- initial:初始值,将该属性设置为默认值
## 盒模型应用
默认情况下,width 和 height 设置的是内容盒宽高
box-sizing:border-box;改变宽高的影响范围 边框盒
**改变背景覆盖范围** 默认情况下,背景覆盖边框盒
可以通过background-clip:进行修改
**溢出隐藏** overflow:
**断词规则(文字换行)** word-break,会影响文字在什么位置被截断换行
normal:普通 CJK(中日韩)字符(在文字位置截断),非CJK字符(在单词位置截断)
break-all: 截断所有,所有字符都在文字处截断
**空白处理**
white-space:nowrap;不换行
overflow:hidden;溢出隐藏
text-overflow:ellipsis;文本溢出显示的方式
## 行盒
常见的行盒:包含具体内容的元素
span strong em i img video audio
### 显著特点
1. 盒子沿着内容延伸
2. 行盒不能设置宽高
调整行盒的宽高,应该使用字体大小,行高,字体类型,间接调整
3. 内边距、外边距、边框
水平方向有效,垂直方向仅会影响背景,不会实际占据空间
## 行快盒
display:inline-block 的盒子
1. 不独占一行
2. 盒模型中所有尺寸都有效
**空白折叠,发生在行盒内部(行块盒)内部 或 行盒(行块盒)之间**
### 可替换元素 和 非可替换元素
可替换元素类似于行块盒,盒模型中所有尺寸都有效
大部分元素,页面上显示的结果,取决于元素内容,**称为非可替换元素**
少部分元素,页面上显示的结果,取决于元素属性,称为**可替换元素**
可替换元素: img video audio
绝大部分可替换元素均为行盒
object-fit: 图片的适应方式
明天计划的事情：
继续学习
遇到的问题：
无
收获：
基础知识
返回列表
评论