发表于: 2020-03-16 21:15:02

0 1729


今天完成的事情:


# 基础



```
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: 图片的适应方式



明天计划的事情:


继续学习




遇到的问题:




收获:

基础知识


返回列表 返回列表
评论

    分享到