第二周周报

# 选择器

选择器:帮助你精准的选中想要的元素

## 简单选择器

1.ID选择器

2.元素选择器

3.类选择器

4.通配符选择器

*，选中所有元素

5.属性选择器

根据属性名和属性值来选中元素

```

[这里面写属性值和属性名]

例如: [href=“https://baidu.com"]{

    color：red；

}

```

6.伪类选择器

选中某些元素的某种状态

1) link：超链接未访问时的状态

2) visited:超链接访问过后的状态

3) hover:鼠标悬停状态(一般用来选择a元素)

```

a:hover{

    color:red;

}

表示的就是选中鼠标悬停时的a元素

```

4) active:激活状态，鼠标按下状态

用法和hover一样，就是把hover换成active就行了

爱恨法则: love hate

7.伪元素选择器

生成并选中某个元素内部的第一个子元素或最后一个子元素

before

```

span::before{

content:"《"

color:red;

}

```

after同理

## 选择器的组合

1.并且

1.后代元素 —— 空格(多用)

2.子元素 —— >

3.相邻兄弟元素 —— +

4.兄弟元素 —— ~

## 选择器的并列

多个选择器用逗号分隔

语法糖

# 属性值的计算过程

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件: 该元素的所有css属性必须有值

一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程

特殊的两个css取值:

-inherit: 手动(强制)继承，将父元素的值取出应用到该元素

-initial:初始值，将该属性设置为默认值

# 层叠

声明冲突:同一个样式多次用到同一个元素

层叠:解决声明冲突的过程，浏览器自动处理(权重计算)

## 1.比较重要性

重要性从高到低:

>作者样式表:开发者书写的样式

1) 作者样式表中的!important样式

2) 作者样式表中的普通样式

3) 浏览器默认样式表中的样式

## 2.比较特殊性

看选择器

总体规则:选择器选中的范围越窄，越特殊

具体规则:通过选择器，计算出一个4位数 (xxxx)

1.千位:如果是内联样式，记1，否则记0

2.百位:等于选择器中所有id选择器的数量

3.十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量

4.个位：等于选择器中所有元素选择器、伪元素选择器的数量

 

## 3.比较源次序

代码书写靠后的胜出

## 应用

1.重置样式表

书写一些作者样式，覆盖浏览器的默认样式

重置样式表覆盖浏览器默认样式

2.爱恨法则

link visited hover active

# 继承

子元素会继承父元素的某些css属性

通常，跟文字相关的属性都会被继承

# 盒模型

box: 盒子，每个元素在页面中都会生成一个矩形区域(盒子)

盒子类型:

1.行盒，display等于inline的元素

2.块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒:容器元素、h1~h6、p

常见的行盒:span、a、img、video、audio

## 盒子的组成部分

无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是:

1.内容 content

width、height，设置的是盒子内容的宽高

内容部分通常叫做整个盒子的**内容盒**

2.填充(内边距) padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

padding: 简写属性

padding: 上 右 下 左

填充区+内容区= **填充盒**

3.边框 border

边框 = 边框样式 + 边框宽度 +边框颜色

边框+填充区+内容区 = **边框盒**

4.外边距 margin

边框到其他盒子的距离

# 盒模型应用

## 改变宽高范围

默认情况下，width 和 height 设置的是内容盒宽高。

衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒

1.精确计算

2.CSS3:box-sizing

## 改变背景覆盖范围

默认情况下，背景覆盖边框盒

可以通过background-clip进行修改

## 溢出处理

overflow，控制内容溢出边框盒后的处理方式

## 断词规则

会影响文字在什么位置被截断换行

normal: 普通 对于CJK字符(文字位置截断)，非CJK字符(单词位置截断)

(word-break)

break-all: 截断所有，所有字符都在文字处截断

Keep-all:保持所有。所有文字都在单词间截断

## 空白处理

white-space:nowrap(不换行)

text-overflow: ellipsis(三个圆点 来表示省略的)

# 行盒的盒模型

常见的行盒: 包含具体内容的元素

span、strong、em、i、img、video、audio

## 显著特点:

1.盒子沿着内容延伸

2.行盒不能设置宽高

调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整

3.填充区

水平方向有效，垂直方向仅会影响背景，不会实际占据空间。

4.边框

水平方向有效，垂直方向不会实际占据空间

5.外边距

水平方向有效，垂直方向不会实际占据空间

## 行块盒

display属性等于inline-block的盒子

1.不独占一行

2.盒模型中所有尺寸都有效

## 空白折叠

空白折叠，发生在行盒内部 或 行盒之间

## 可替换元素 和 非可替换元素

大部分元素，页面上显示的结果，取决于元素内容，称为**非可替换元素**

少部分元素，页面上显示的结果，取决于元素属性，称为**可替换元素**

可替换元素:img、video、audio

绝大部分可替换元素均为行盒。

可替换元素类似于行块盒，盒模型中所有尺寸都有效。(例如可设置宽高width height)

# 常规流

盒模型:规定单个盒子的规则

视觉格式化模型(布局规则):页面中的多个盒子排列规则

视觉格式化模型，大体上将页面中盒子的排列分为三种方式:

1.常规流

2.浮动

3.定位

## 常规流布局

常规流、文档流，普通文档流，常规文档流

所有元素，默认情况下，都属于常规流布局

总体规则:块盒独占一行，行盒水平依次排列

包含块:每个盒子都有它的包含块，包含块决定了盒子的排列区域。

绝大部分情况下:盒子的包含块，为其父元素的内容盒

**块盒**

1.每个块盒的总宽度，刚好必须等于包含块的宽度

宽度的默认值是auto

margin的取值也可以是auto，默认值0

auto: 将剩余的空间吸收掉

width吸收能力强于margin

若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收

在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto。

2.每个块盒垂直方向上的auto值

height:auto，表示适应内容的高度

margin:auto，表示0

3.百分比取值

padding、宽、margin可以取值为百分比

以上的所有百分比相对于包含块的宽度

高度的百分比:

1.包含块的高度取决于子元素的高度，设置百分比无效

2.包含块的高度不取决于子元素的高度，百分比相对于父元素高度

4.上下外边距的合并

两个常规流块盒，上下外边距相邻，会进行合并。

两个外边距取最大值。

# 浮动

视觉格式化模型，大体上将页面中盒子的排列分为三种方式:

1.常规流

2.浮动

3.定位

## 应用场景

1.文字环绕

2.横向排列

 

## 浮动的基本特点

修改fioat属性值为:

-left:左浮动，元素靠上靠左

-right:右浮动，元素靠上靠右

默认值为none

1.当一个元素浮动后，元素必定为块盒(更改display属性为块盒)

2.浮动元素的包含块和常规流一样，为父元素的内容盒

## 盒子尺寸

1.宽度为auto时，适应内容宽度

2.高度为auto时，与常规流一致，适应内容高度

3.margin为auto时，为0

4.边框、内边距、百分比设置与常规流一样

## 盒子排列

1.左浮动的盒子靠上靠左排列

2.右浮动的盒子靠上靠右排列

3.浮动盒子在包含块中排列时，会避开常规流块盒

4.常规流块盒在排列时，无视浮动盒子

5.行盒在排列时会避开浮动盒子

6.外边距合并不会发生

>如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒

## 高度坍塌

高度坍塌的根源:常规流盒子的自动高度，在计算时，不会考虑浮动盒子

清除浮动，实际css属性:clear

-默认值:none

-left:清除左浮动，该元素必须出现在前面所有左浮动盒子的下方

-right:清除右浮动，该元素必须出现在前面所有右浮动盒子的下方

-both:清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

# 定位

视觉格式化模型，大体上将页面中的盒子的排列分为三种方式:

1.常规流

2.浮动

3.定位

定位；手动控制元素在包含块中的精准位置

涉及的CSS属性:position

## position

-默认值:static，静态定位(不定位)

-relative:相对定位

-absolute:绝对定位

-fixed:固定定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素。

定位元素会脱离常规流(相对定位除外)

一个脱离了文档流元素:

1.文档流中的元素摆放时，会忽略脱离了文档流的元素

2.文档流中元素计算自动高度时，会忽略脱离了文档流的元素

## 相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。

可以通过四个CSS属性设置其位置:

-left

-right

-top

-bottom

盒子的偏移不会对其他盒子造成任何影响。

## 绝对定位

1.宽高为auto，适应内容

2.包含块变化:找祖先中第一个定位元素，该元素的填充盒(边框里面的东西)为其包含块。若找不到，则它的包含块为整个网页(初始化包含块)

(图片重叠的问题，当然祖先元素最好为相对定位)

## 固定定位

其他情况和绝对定位完全一样

包含块不同:固定为视口 (浏览器的可视窗口)

## 定位下的居中

某个方向居中:

1.定宽(高)

2.将左右(上下)距离设置为0

3.将左右(上下)margin设置为auto

绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

## 多个定位元素重叠时

堆叠上下文

设置z-index，通常情况下，该值越大，越靠近用户

只有定位元素设置z-index有效

z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖

## 补充

-绝对定位、固定定位元素一定是块盒

-绝对定位、固定定位元素一定不是浮动

-没有外边距合并

# 常见样式声明

1.color

元素内部的文字颜色

**预设值**: 定义好的单词

**三原色、色值**:光学三原色(红绿蓝)，每个颜色可以使用0~255之间的数字来表达，色值。

```

rgb表示法:

rgb(0,255,0)

hex(16进制)表示法:

#红绿蓝(前两位表示红，中间两位表示绿，后两位表示蓝)

```

淘宝红:#ff4400

黑色:#000000 #000

白色:#ffffff #fff

红:#ff0000 #f00

绿:#00ff00 #0f0

蓝:#0000ff #00f

紫色:#f0f

青色:#0ff

黄色:#ff0

灰色:#ccc

2.background-color

元素背景颜色

3.font-size

元素内部文字尺寸大小

1).px: 像素，绝对单位，简单地理解为文字的高度占多少个像素

2).em:相对单位，相对于父元素的字体大小

每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素(html)，则使用基准字号。

4.font-weight

文字粗细程度，可以取值数字，可以取值预设值

基本都是bold(加粗）或者normal

>strong元素，默认加粗

5.font-family

文字类型(宋体...)

必须用户计算机中存在的字体才会有效。

使用多个字体以匹配不同环境。

sans-serif，非衬线字体

6.font-style

字体样式，通常用它设置斜体

>i元素，em元素，默认样式是倾斜字体;实际使用时，通常用它表示一个图标

7.text-decoration

文本修饰(给文本加线)

>a元素

>del元素:错误的内容

>s元素:过期的内容

8.text-indent

首行文本缩进

9.line-height

每行文本的高度，该值越大，每行文本的距离越大

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小(推荐)

10.width

宽度

11.height

高度

12.letter-space

文字间隙

13.text-align

元素内部文字的水平排列方式