css基础

一.为网页添加样式

术语解释

h1{
    color:red;
    background-color:lightblue;
    text-align: center;
}

CSS规则 = 选择器 + 声明块

1）选择器

选择器：选中元素(上面代码的h1)
在head元素中书写style，添加相关元素

1. ID选择器：选中的是对应id值的元素（给下面的元素附加id，上面对应#＋id名）
2. 元素选择器（在style元素中添加h1，p和下面的元素所对应）（所有同名元素）
3. 类选择器 class

在style里面添加.+类选择器的名字进行编写，再在下面需要该格式的元素起始标记中添加class=“”(灵活),可以同时加多个

2） 声明块

出现在大括号中

声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。
属性名+属性值
color，background-color，text-align（文本对齐方式）

CSS代码书写位置

1. 内部样式表（内容不多时使用，可以少读一个文件）

书写在style元素中
通常放在head元素中，为的是浏览器可以最先读取，也可以放在别的地方。

2. 内联样式表，元素样式表（不太推荐）

直接书写在元素的style属性中，就不需要选择器了。直接写在起始处

<h1 style="color:red">

3. 外部样式表[推荐]

将样式书写到独立的css文件中。

需要在head中添加link，在href中加入文件地址
优点
1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存，从而提高页面响应速度
3). 有利于代码分离（HTML和CSS），更容易阅读和维护

二. 常见样式声明

1. color

元素内部的文字颜色

预设值：定义好的单词

三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。

rgb表示法(红绿蓝)：
rgb(0, 255, 0)（绿色）
hex（16进制）表示法：
#红绿蓝（每个数字两位）
马尔斯绿：#008c8c

淘宝红：#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），则使用基准字号（浏览器里设置的字号）。

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

4. font-weight

文字粗细程度，可以取值数字，可以取值为预设值（normal，bold加粗【700】），有些字体不适配

strong，默认加粗。

5. font-family

文字类型

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

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

font-family:consolas,翩翩体，微软雅黑

依次递推
建议再最后加上sans-serif，非衬线字体（字体的边缘没有被修饰），这是一个统称，随便选一个

sans-serif，非衬线字体

6. font-style

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

font-style：italic；
font-style：normal；

i，em元素，默认样式，是倾斜字体; 实际使用中，通常用它表示一个图标（icon）
strong,默认加粗 ，也可以被替换

7. text-decoration

文本修饰，给文本加线。
line-trough，划过文字，给中间加条线
overline上加线
underline下加线
none啥都没有

a元素
del元素：错误的内容（之前写的有问题，加上这个元素将其删除掉），将del元素内容删去
s元素：过期的内容,默认样式是中间加一条线

8. text-indent

首行文本缩进，em是字符大小，px是像素值。

9. line-height

每行文本的高度，该值越大，每行文本的距离越大。
设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小通常不使用em

line-height:1.5

10. width

宽度

11. height

高度

12. letter-space

文字间隙

13. text-align

left,center,right
元素内部文字的水平排列方式

三.选择器

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

简单选择器

并不是要用上全部的选择器，而是根据自己的需要选择，提供更多可以使用的方法

1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器

*，选中所有元素

*{

}

5. 属性选择器

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

[href]{}

选中所有全部具有href属性的元素

但是

[href="https://www.baidu.com"]{}

这种情况只会选中百度元素。
属性元素的用法可以参照官方文档（搜索属性选择器mdn）

一个其他形式的选择器

[class~="b"]{color: red;}

 <a  class="a b c d" href="https://www.baidu.com">百度</a>
    <a href="https:www.sina.com">新浪</a>

class中包含b，且b前后有分隔，则包含b属性的变色(没有空格就选不中)
6. 伪类选择器（常用且常用于超链接）

写伪类选择器都是元素加冒号

选中某些元素的某种状态
可以选择不添加伪类选择器，但如果添加，建议使用下面的元素顺序否则会出问题。

1）link: 超链接未访问时的状态

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

3）hover: 鼠标悬停状态
如果不加内容选中所有内容，所以通常会添加内容

a:hover{
    color:red;
}

此为选中鼠标悬停时的a元素

4）active：激活状态，鼠标按下状态

a:active{
    color:red;
}

爱恨法则：love hate（四种选择器的首字母lvha）

7. 伪元素选择器
   生成并选中某个元素内部的第一个子元素或最后一个子元素
   1.before:先在元素里面生成一个子元素，子元素没有名字，并且子元素一定是第一个元素，元素名字为before，在元素内部可以写一个特殊的属性为content（只有在before和after中使用），content表示元素的内容；该选择器选择修改元素样式的before，而不是span，所以span内部的文本内容不会改变样式。

2.after，同before。

span::before{
    content: "《";
    color: red;
}
span::after{
    content: "》";
    color: red;
}

选择器的组合(多个选择器组合在一起使用)

其实上面的span元素已经在组合，span是一个元素选择器，::before是伪元素选择器，二者在组合，组合起来达到并且的效果，选中span，并且选中的是第一个子元素

1. 并且

a:hover{}

给元素添加内样式，使用元素名加.样式，例如p.red，会生成

 <p class="red"></p>

2. 后代元素 —— 两个选择器间加空格（应用广泛）,精准选择元素
   如果是空格加*号，则表示选择后代所有元素。

p元素里面不可以放列表ul

3. 子元素 —— >，只可以选择子元素，不可以选择子元素的子元素
4. 相邻兄弟元素 —— +

.spacial+li{color: #008c8c;}

则spacial下一个元素颜色发生改变。
6. 后面出现的所有兄弟元素 —— ~
css没有提供选择之前的东西

选择器的并列

多个选择器, 用逗号分隔

语法糖：并没有改变本质，只是为了方便使用和记忆，减轻负担

.spacial,p{color: red;}

两个选择器使用同样的格式，只是为了方便书写。

四. 层叠

声明冲突：同一个样式，多次应用到同一个元素,会产生冲突。

层叠（权重计算）：解决声明冲突的过程，浏览器自动处理
经过以下三步完成层叠。

1. 比较重要性

重要性从高到底：

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

1） 作者样式表中的!important样式，最重要最重要(可以覆盖全部样式，所以要谨慎使用)
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式

2. 比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊
元素选择器比类选择器范围广。

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

1. 千位：如果是内联样式（写在元素内部），记1，否则记0

内联样式直接胜出。

2. 百位：等于选择器中所有id选择器的数量
3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量

3. 比较源次序

代码书写靠后的胜出

应用

1. 重置样式表

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

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

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

2. 爱恨法则

link > visited > hover > active

五 继承

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

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

可继承：color,font-size，font-weight，font-family，letter-space，text-align

不可继承：background-color，width

可以直接font后面加有关字体的属性，比如粗细，字体等等

六.属性值的计算过程

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

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

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

属性值计算过程简介

1.确定声明值

参照样式表中没有冲突的声明，直接作为css属性值

2.层叠冲突

对样式表有冲突的声明使用层叠规则，确定css属性
a.比较重要性
b.比较特殊性
c.比较源次序

3.使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值。

4.使用默认值

任然没有值的属性使用默认值。
eg：transparent透明

a元素为什么不继承？
a元素在浏览器的默认样式表里面已经完成了声明，所以直接第一步就完成了，不用进行到继承的步骤。
如果需要继承，则设置a{color:inherit;}，进行强制继承，这其实是在进行第二步层叠冲突，并没有进行到第三步继承。

注：特殊的两个CSS取值：

• inherit：手动（强制）继承，将父元素的值取出应用到该元素
• initial：初始值，将该属性设置为默认值

七. 盒模型(以下主要讲的块盒)

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

元素是html的概念，盒子是css的概念。

盒子类型：

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

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

display默认值为inline

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

常见的行盒：span、a、img、video、audio(与内容相关)

盒子的组成部分

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：内容，填充，边框，外边距
比如买一部手机，手机放在盒子的空隙中间，该空隙即为内容区域，为放置内容的，盒子的边框与内容区域的空隙即为填充区，盒子本身即为边框，外边距为盒子之间的距离。

1. 内容 content

width、height，设置的是盒子内容的宽高，而不是整个盒子的宽高

内容部分通常叫做整个盒子的内容盒 content-box

2. 填充(内边距) padding

盒子边框到盒子内容的距离
距离用像素

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

padding: 简写属性（可以同时设置多个值）

padding: 上 右 下 左（顺时针转一圈）

如果上下一样，左右一样，可以只写两个；如果上下左右都一样，则可以只写一个。

填充区+内容区 = 填充盒 padding-box

3. 边框 border

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

边框样式：border-style
边框宽度：border-width(也可以使用上右下左)
边框颜色：border-color（四个方向的颜色）
如果四个方向的边框都一样则可以使用

border:宽度 样式 颜色

边框+填充区+内容区 = 边框盒 border-box

4. 外边距 margin

边框到其他盒子的距离

margin-top、margin-left、margin-right、margin-bottom

速写属性margin

八.盒模型应用

1） 改变宽高范围

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

页面重构师：将psd文件（设计稿）制作为静态页面

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

1. 精确计算(加减)
2. CSS3：box-sizing，可以改变宽高的影响范围
   content-box表示内容盒

box-sizing: border-box;
box-sizing:content-box;

第一个表示宽高表示边框盒；
第二个表示宽高表示内容盒。

2）改变背景覆盖范围

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

可以通过background-clip进行修改
border-box背景覆盖边框盒；
content-box背景覆盖内容盒；
padding-box背景覆盖填充盒。

3）溢出处理

没有设置宽高的话，会默认的进行适应

overflow，控制内容溢出边框盒后的处理方式
1.visible：可见的
2.hidden：隐藏（溢出部分）
3.scroll：生成滚动条
4.auto：自动（需要时出现滚动条，不需要时消失）

4）断词规则（用的不多）

word-break，会影响文字在什么位置被截断换行

normal：普通。CJK字符（文字位置截断）（cjk表示中日韩），非CJK字符（单词位置截断）

break-all：截断所有。所有字符都在文字处截断

keep-all：保持所有。所有文字都在单词之间截断，连续中文则不会发生换行，否则出现空格。

5）空白处理

white-space: nowrap
空白字符的处理是不换行
white-space:pre,不会进行空白折叠

如果在一行溢出时需要加…则使用text-overflow:ellipsis(圆点的意思)

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

不换行，再隐藏，最后加点

九.行盒的盒模型

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

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

显著特点

1. 盒子沿着内容沿伸
2. 行盒不能设置宽高

调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
行盒跟着内容走，行盒的宽高等于内容的宽高。

3. 内边距（填充区）

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

4. 边框

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

5. 外边距（margin）

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

行块盒

display：inline-block 的盒子

1. 不独占一行
2. 盒模型中所有尺寸都有效（宽高等都变得有效）

空白折叠

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

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

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

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

可替换元素：img、video、audio

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

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

object-fit:通常在图片中使用，表示图片的适应方式
取值有：contain（宽高比例不变，切保证图片不溢出）fill（填充满，为默认值）cover（将区域填充满，切比例不变，此时可能会损失图片的部分信息）

十. 常规流

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

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

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

1. 常规流
2. 浮动
3. 定位

常规流布局

也称为常规流、文档流、普通文档流、常规文档流
块盒横向撑满包含块，纵向上有外边距的合并，行盒是上一个行盒的尾部接上下一个行盒的头

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

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

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

包含块类似于盒子的坐标系，盒子的位置取决于坐标系，决定盒子的活动范围

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

块盒

1. 每个块盒的总宽度，必须刚好等于包含块的宽度（水平方向上）

宽度的默认值是auto

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

auto：将剩余空间吸收掉

width吸收能力强于margin,都是auto的时候都给width

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

在常规流中，块盒在其包含块（活动范围，，即父元素的内容和）中居中，可以定宽（width）、然后左右margin设置为auto。
margin可以设置为负数

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

height:auto， 适应内容的高度

margin:auto， 表示0

3. 百分比取值

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

以上的所有百分比相对于包含块的宽度，都是相对于宽度，和高度没有任何关系

高度的百分比（比较特殊）：
a. 判断包含块的高度是否取决于子元素的高度，如果是则设置子元素高度设置百分比无效，相当于没写，高度仍然是auto。
b. 包含块的高度（已经被设置）不取决于子元素的高度，百分比相对于父元素高度

4. 上下外边距的合并

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

合并之后两行中间的margin取两个外边距最大值。

父子元素margin相邻也要合并，必须紧紧相邻，只要中间有东西就不会合并。如果不想合并的话，可以在中间加上border，也可以把margin改为padding。

十一.浮动

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

1. 常规流
2. 浮动
3. 定位

1）应用场景

1. 文字环绕
2. 横向排列

2）浮动的基本特点

修改float属性值为：

• left：左浮动，元素靠上靠左
• right：右浮动，元素靠上靠右

默认值为none（常规流）

1. 当一个元素浮动后，元素必定为块盒(更改display属性为block)
2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

3）盒子尺寸

1. 宽度为auto时，适应内容宽度,并没有要求撑满
2. 高度为auto时，与常规流一致，适应内容的高度
3. margin为auto，为0.
4. 边框、内边距、百分比设置与常规流一样

4）盒子排列

1. 左浮动的盒子靠上靠左排列
2. 右浮动的盒子靠上靠右排列
3. 浮动盒子在包含块中排列时，会避开常规流块盒
4. 常规流块盒在排列时，无视浮动盒子,所以有可能被浮动盒子遮住
5. 行盒在排列时，会避开浮动盒子
6. 外边距合并不会发生

快速书写的方法div.item*10>{$}
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

5）高度坍塌

高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子,浮动脱离常规流
清除浮动，涉及css属性：clear

• 默认值：none
• left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
• right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
• both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

十二.定位

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

1. 常规流
2. 浮动：float
3. 定位：position

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

涉及的CSS属性：position

1）position属性

• 默认值：static，静态定位（不定位）
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位

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

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

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

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

a.相对定位（relative）

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

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

• left
• right
• top
• bottom

盒子的偏移不会对其他盒子造成任何影响。只是视觉效果上发生了偏差，实际盒子还在那里。
当出现矛盾时，同时出现上下以上为准，左右以左为准，但避免设置有矛盾的值。

b.绝对定位（absolute）

1. 宽高为auto，适应内容
2. 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
   left表示这个绝对定位的元素，它的左边离包含块左边的距离。
   使用举例：一张图片在另一张图片上方，使用绝对定位，精准定位图片位置，两个元素重叠。

有的相对定位元素的存在意义就是为了为绝对定位元素提供包含块

c.固定定位（fixed）

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

只有包含块（参照系）不同：固定为视口（浏览器的可视窗口,可以看到的区域），在滚动滚动条时定位元素位置不变。

2）绝对定位和固定定位中常见的做法

a.定位下的居中

相对定位不会脱离常规流，之前是浮动还是浮动，是常规流还是常规流，所以不需要考虑。

某个方向居中：

1. 定宽（高）
2. 将左右（上下）距离设置为0
3. 将左右（上下）margin设置为auto

绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间.
可以理解为左右都要挨着边框但是实现不了，所以只能靠margin来填充得以实现

b.多个定位元素重叠时

堆叠上下文

设置z-index（一条垂直穿过屏幕的线，电脑背后传过来，箭头指向用户），通常情况下，该值越大，越靠近用户，也就是值越大越靠前

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

z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖，默认情况下，会覆盖常规流和浮动元素
注：border-sizing为边框弧度，其值为50%时为圆

c.补充

• 绝对定位、固定定位元素一定是块盒
• 绝对定位、固定定位元素一定不是浮动，同时出现浮动元素会被强行改为none
• 没有外边距合并