第二周周报：css浅谈

# 常见样式声明

1. color

元素内部的文字颜色

**预设值**：定义好的单词（不是很多）（用的也并不多）

**三原色，色值**：光学三原色（红，绿，蓝），每个颜色可以使用0-255之间的数字来表达，色值【马尔斯绿：#008c8c】【小灰灰：#5e5c5c】

```

rgb表示法：

rgb(0,255,0)

hex（16进制）表示法：

#红绿蓝（红绿蓝各两位16进制数）

```

eg：

淘宝红：#ff4400，#f40（三种颜色其每两位都相同可各自简写为一个）

黑色：#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），则使用基准字号【一般浏览器使用中字号，14个像素】

user agent，UA，用户代理（浏览器）

4. font-weight

文字粗细程度，可以取数字（通常不取），可以取值为预设值

>strong元素，默认加粗【表示重要的不可忽略的内容】

5. font-family

文字类型

必须用户计算机存在这个字体才有效

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

sans-serif:非衬线字体（文字边缘没经过修饰）

6. font-style

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

>i元素，em元素【表示强调的内容】，默认样式是倾斜字体;实际使用中，通常用它表示一个图标（icon）

7. text-decoration

文本修饰，给文本加线【中间穿过，上，下】

>a元素

>del元素：表示错误的内容

>s元素：过期的内容

8. text-indent

首行文本缩进（em【中文中一个em可等同一个文字所占大小】，px）

9. line-height

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

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

行高可以设置为纯数字，表示相对于当前元素（元素中的文字大小）的字体大小（多少倍）

10. width

宽度

11. height

高度

12. letter-space（或spacing）

文字间隙

13. text-align

元素内部文字的水平排列方式（左，中，右）

# 选择器

帮你精准选中想要的元素

## 简单选择器

ID选择器【选中的是对应id值的元素】

元素选择器【所有同名元素】

类选择器【main,推荐】

通配符选择器【选中所有元素】

属性选择器【根据属性名和属性值选中元素】(~,$,*,等不同功能格式，仅作了解)（不常用）

伪类选择器【选中某些元素的某种状态】（常用）(link,visited,hover,active|顺序爱恨法则)

伪元素选择器【before，after】

## 选择器的组合

并且【连着写】

后代元素【空格】

子元素【>】

相邻兄弟元素【+】

兄弟元素【~】

## 选择器的并列

多个选择器用逗号分隔

语法糖

# 层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠（权重计算）：解决声明冲突的过程，浏览器自动处理

## 1. 比较重要性

重要性从高到低：

作者样式表：开发者书写的样式

1）作者样式表中的!important样式(等级太高一般不建议使用)

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

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

## 2. 比较特殊性

看选择器

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

具体规则：通过选择器计算出一个四位数（x x x x）

1. 千位：如果是内联样式记作1否则记作0（内联样式也少用）

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

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

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

一位一位比，大了就直接胜出（逢256进一）

## 3. 比较源次序

代码书写靠后的胜出

## 应用

1. 重置样式表(通用)

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

重置样式表 -> 浏览器的默认样式

常见的重置样式表：normalize.css,reset.css,meyer.css

2. 爱恨法则

link>visited>hover>active

# 继承

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

通常跟文字内容相关的属性都能被继承

# 属性值的计算过程

# 盒模型

盒子类型：

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

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

3). display设为none，该元素不生成盒子，看不见

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

display默认值为inline

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

常见的行盒：span，a，img，video，audio

## 盒子的组成部分

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

1. 内容 content

2. 填充 padding

3. 边框 border

4. 外边距 margin

# 盒模型应用

## 改变宽高范围

## 改变背景覆盖范围

## 溢出处理

## 断词规则

## 空白处理

# 行盒的盒模型

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

span，strong，em，i，img，video，audio

## 显著特点

1. 盒子沿着内容延伸

2. 行盒不能设置宽高

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

3. 内边距（填充区）

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

4. 边框

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

5. 外边距

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

## 行块盒(可适应行高)

display：inline-block的盒子

1. 不独占一行

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

## 空白折叠

空白折叠发生在行盒（行块盒）内部或行盒（行块盒）之间

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

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

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

可替换元素：img，video，audio

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

可替换元素类似于行块盒，盒模型中所有尺寸都有效

# 常规流-（常规流盒子）且（可以是行盒和块盒）

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

视觉格式化模型（布局规则）：页面中的多个盒子排列规则

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

1. 常规流

2. 浮动

3. 定位

## 常规流布局

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

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

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

包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域

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

**块盒**

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. 横向排列

## 浮动的基本特点

修改float属性为：

-left：左浮动，元素靠上靠左排列

-right：右浮动，元素靠上靠右排列

默认值为none

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

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

## 盒子尺寸

1. 宽度为auto时，适应（盒子）内容宽度

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

3. margin为auto时，为0

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

## 盒子排列

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

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

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

4. 常规流块盒在排列时不会避开浮动盒子

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

6. 外边距合并不会发生

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

## 高度坍塌

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

清除浮动，涉及css属性：clear

-默认值：none

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

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

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

# 定位

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

涉及的css属性：position

## position属性

-默认值：static，静态定位（不定位）

-relative：相对定位

-absolute：绝对定位

-fixed：固定定位

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

定位元素会脱离文档流（相对定位除外）

一个脱离了文档流的元素：

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

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

## 相对定位

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

可以通过4个css属性对其设置位置：

-left

-right

-top

-bottom

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

## 绝对定位

1. 宽高为auto，适应内容

2. 包含块变化：找祖先元素中第一个定位元素该元素的填充盒为其包含块，若找不到，则他的包含块为整个网页（初始化包含块）

## 固定定位

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

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

## 定位下的居中

某个方向居中：

1. 定宽（高）

2. 将左右（上下）距离设置为0

3. 将左右（上下）margin设置为auto

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

## 多个定位元素重叠时

堆叠上下文

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

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

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

## 补充

-绝对定位，固定定位一定是块盒

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

-没有外边距合并

(其他补充：modal-遮罩层

```

    <div class="modal">

       

    </div>

```    

)

## 透明效果

每个颜色都具有透明通道，0~1

1. rgba（红，绿，蓝，alpha）

2. hex：#红绿蓝透

(banner,横幅)

(nav元素，表示导航菜单)

(:nth-child(),伪类选择器，表示选中该元素的父元素的第几个子元素，其中括号内既可以设置具体数字又可以设置单双数

（2n，2n+1）)

(::first-letter,伪元素选择器，选中这个元素中的第一个字母（或文字）)