简介：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言…

第一章常见样式声明

关于测试元素样式：
无需提前写入css，可以先加载未书写的css页面然后按f12，在里面的控制台的style栏里面书写元素

color：元素内部的文字颜色

预设值：定义好的单词，比如red、blue，但是在真实项目里面用的最多的是三原色，也就是色值
色值：光学三原色(红绿蓝)，每个颜色的可以使用0-255之间的数字来表达，这就是色值

rgb表示法
rgb(0,255,0);
<!-- 绿色 -->
<!-- 可以通过调色板来选择 -->

hex表示法(#红绿蓝的16进制代号表示组合而成)
#008C8C;

淘宝红：#ff4400(#f40)
黑色:#000000(#000)
白色:#ffffff(#fff)
红色:#ff0000(#f00)
绿色:#00ff00(#0f0)
蓝色:#0000ff(#00f)
紫色:#ff00ff(#f0f)
青色:#00ffff(#0ff)
黄色:#ffff00(#ff0)
灰色:#cccccc(#ccc)

background-color：元素背景颜色
font-size：元素内部文字的尺寸大小
- px:像素单位
- em:相对单位，相对于父元素的字体大小的倍数，父元素没有规定字体大小的时候，父元素会继承其父元素的字体大小，最终穷尽时，就会读取基准字号(浏览器设置的字号)
font-weight：表示文字的粗细程度，可以取值数字，也可以取值为预设值
- normal:400
- strong：默认都有加粗的效果，当然style可以替换
font-family：文字类型，比如宋体，微软雅黑等等，必须计算机中存在的字体才会有效，我们可以设置多个字体，从左到右读取，读到即停止，也就是说有就使用，没有就用下一个字体
- sans-serif：非衬线字体，一个字体种类，表示字体边缘没有经过修饰，最后加它就是为了最后也能匹配到一个非衬线字体
font-style：字体样式，通常用于设置斜体
- italics：斜体
- i、em元素，是斜体，当然的，style可以改回他的斜体，实际使用中我们通常用它表示一个图标
text-decoration：文本修饰，也就是给文本加线
- line-through：横穿文字划线
- overline：文字上面划线
- underline：文字下划线
- none：不划线
- del元素：表示被废弃的内容，错误的内容，表示删除掉(也就是css格式默认了line-through)
- a元素：css格式默认了underline
- s元素：通常表示过期的内容
text-indent：表示首行文本缩进
- text-indent:10px
line-height：每行文本的高度，该值越大，每行文本的距离越大
行高可以设置为纯数字，表示相对于当前元素的字体大小倍数
往往行高不使用具体的像素值，因为字体大小一改变，很有可能会挤到一起
注意：height表示的是标签的高度，line-height表示的是字体高度，两个数值相同的时候会居中
height：表示的是标签的宽度
width：表示的是标签的宽度
letter-spacing：表示文字间隙
text-align：表示的是文字的水平排列方式
- center：居中
- left：左边

第二章选择器

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

简单选择器

ID选择器
元素选择器
类选择器
通配符选择器：*，表示选中所有元素，注意是所有的
属性选择器：根据属性名和属性值来选中元素
1
2
3
[href]{
color:#008c8c;
}
表示所有带有href的元素都改变颜色
1
2
3
[href="https://www.sina.com"]{
color:##008c8c
}
表示所有带有href=”https://www/sina.com"的元素都改变颜色
[attr=value]表示带有attr=value的元素
[attr=value]表示带有attr命名的属性的元素，并且至少有一个值=value
[attr^=value]以value开头的
[attr$=value]以value结尾的
[attr*=value]里面的字母有一段是value的
比如value=b时：
class=”a b c d”能用=和*=，但是class=”abcd”只能用*=
伪类选择器：一般选中某些元素的某种状态
- hover；表示鼠标移动到该地区之后，才算作是选择，进而开始变为hover选择器里面的css样式。
  1
  2
  // 表示a元素经过鼠标经过会变换css样式。
  a:hover{color:red;}
- active：激活状态，一般是指鼠标按下的状态，与hover类似
- link：超链接未访问时的状态
- visited：超链接访问之后的状态
  注意：一定要按link->visited->hover->active的顺序书写，否则达不到效果
伪元素选择器：生成并选中某个元素内部的第一个子元素或最后一个子元素

::before：运用content可以在前面添加元素，并使其前面的元素或者添加内容得到css样式改变
::after：同理，不过是后面

选择器的组合

后代元素 —— 空格
子元素 —— >
相邻兄弟元素 —— +
兄弟元素 —— ~
并且 ——.

选择器的并列

多个选择器用逗号分隔

语法糖，也就是相同的我们可以合并在一起用逗号

第三章层叠

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

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

一共经过三步：

比较重要性

重要性从高到低：

作者样式表中的!important样式
- 在属性背后加上!important表示的是它是重要样式，这样一定会覆盖掉其他样式
- eg:color:red !important;
- 除非万不得已，不要加!important
作者样式表中的普通样式
浏览器默认样式表中的样式

比较特殊性

都是普通样式的时候，可能会无法比较重要性，因此这个时候开始比较特殊性

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

具体规则：通过选择器，计算出一个四位数(xxxx)，数字越大越特殊

先看千位：如果是内联样式，记作1，否则记作0
再看百位：等于选择器中所有id选择器的数量
再看十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
再看个位：等于选择器中所有元素选择器、伪元素选择器的数量
eg:
body a > a，因此选择样式会优先考虑body a

一般靠1、2已经可以解决冲突问题。

比较源次序

特殊性出现一样的时候，代码书写靠后的就会覆盖前面的代码css样式

应用

重置样式表：书写一些作者样式，覆盖浏览器的重要样式
重置样式表->(覆盖)浏览器的默认样式
常见的重置样式表：normalize.css、reset.css、meyer.css
link>visited>hover>active

第四章继承

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

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

font-variant:small-caps(设置小型大写字母)
font:x,y,…;本质上是一个语法糖，也就是多个font样式合并得到

第五章属性值的计算过程

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

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

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

确定声明值：参考样式表（作者样式和浏览器样式不冲突）中没有冲突的声明，作为css属性值
层叠冲突：对样式表有冲突的声明使用层叠规则，确定css属性值
使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
使用默认值：剩下的使用默认值

第六章盒模型

盒模型相关定义

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

盒子类型：

行盒：display等于inline的元素
块盒：display等于block的元素

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

一般：display默认值为inline，作为行盒

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

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

盒子的组成部分

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

内容：content：盒子里面容纳的信息

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

内容部分通常叫做整个盒子的内容盒 content-box
填充：padding：盒子里面除去内容的剩下部分，也就是盒子边框到盒子内容的距离

padding-left、padding-right：左、右内边距
同理也有上下内边距：top\bottom
上下左右可以通过简写，同时设置多个值：
eg：padding: top right bottom left(顺时针)
special：padding: 30px 50px
```
     padding: 30px 50px 30px 50px
     是一样效果的
     四个方向全部一样的话，就是：padding: 50px
```
填充区+内容区=填充盒 padding-box
边框：border：盒子本身

边框=边框样式+边框宽度+边框颜色
边框样式：border-style：默认样式为none，所以要想显示边框要调整为soild(实线边框)、dash(虚线)、double(双实线)、groove(立体线条)
边框宽度：border-width：默认样式为0px，所以一定要调整
边框颜色：border-color：默认为字体颜色，因而可以通过改变字体颜色达到边框颜色和字体颜色相同

当然，样式宽度颜色和padding一样为简写属性，其实应该是四个值最合适，可以上下左右都调一次，border也是一样
1
border:4px dushed #008c8c
边框+填充区+内容区=边框盒 border-box
外边距：margin：盒子与盒子的距离

同理，有margin-left等等

同理，也和padding一样可以书写为margin:up right dowm leftss

第七章盒模型应用

改变宽高范围

默认情况下，width和height设置的是内容盒的宽高
一般我们将psd文件(设计稿制作为静态页面)

衡量设计稿使用的时候，往往用的是边框盒，但用width和height设置的是内容盒，如果再加上padding-left这些设计，那么将会会与设计稿不相符

精确计算
CSS3之后：box-sizing就可以设置盒子的宽高，这样就可以保持使用后续的padding等等这些就不会向外扩展盒子了
1
2
// 这样能让width和height设置的是边框盒(最外一层)而非内容盒(最里面一层)
box-sizing: border-box

改变背景覆盖范围

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

1
2
3

background-clip:border-box //(背景覆盖边框盒)
background-clip:content-box //(背景覆盖内容盒)
background-clip:padding-box //(背景覆盖填充盒)

溢出处理

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

不加overflow的话，文本溢出，影响样式观感

1 2	overflow:hidden; //表示隐藏 overflow:scroll; //表示栏里面有滚动条

1 2	// 如果只希望出现纵向滚动条，我们可以这么书写： overflow-y:scroll

1 2	// 当然的，我们希望没有溢出的时候没有滚动条，那么我们可以： overflow-y:auto;

第八章行盒的行模型

常见的行盒

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

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

行模型和块模型使用该style时，会有显著不同，块模型的背景直接成一团，而行模型只包裹着具体内容，内容截断就截断，内容结束就结束
所以行模型不可以用scroll-y滚动控件

<style>
    p,span{
      background: lightblue;
      border: 2px solid; 
      line-height: 3; 
    }
</style>

行模型只跟着内容走，行盒的宽高只由内容的宽高决定，要改变行盒大小只能改变文字大小、行高和字体样式
比如：
width\height无效
font-size有效
line-height有效
font-family有效
对于padding调整填充区这一项：
水平方向：有效
垂直方向：只会影响背景，不会实际占据空间（也就是不会挤压文字到其他地方，但是会覆盖）
对于border样式：
只有水平有效，垂直方向和padding一致
对于margin（外边框）样式：
也是一样，只有水平有效，在垂直方向不会占据空间

因此，对于行模型，尽量不要使用垂直方向的css样式，不然是吃力不讨好

行块盒

display:inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
这个的意思就是将盒模型盒行模型相互赋予对方能力：
- 可以让必须换行的盒模型像行模型一样水平排列
- 可以让行模型进行水平方向的css样式设置并且会产生空间占据
行块盒我们往往用来做分页

空白折叠

空白折叠，发生在行盒内部或者行盒之间
eg：两个行盒之间一定有空格，如果要没有空格，那么就必须不换行

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

大部分元素，页面上显示的结果，取决于元素内容，这些元素称为非可替换元素
eg：h1…
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
eg：img、video、audio
可替换元素绝大部分均为行盒
可替换元素类似于行块盒，盒模型中所有尺寸都有效

object-fit: contain(不打破图片比例，也能让图片不丢失信息，但是不能填充)
fill(绝对填充盒子,不丢失信息，但是不能保证比例)
cover(不打破图片比例，也绝对填充，但是会丢失信息(框框太小))
注意，图片宽高是自适应的，你调整宽度，也会按照比例自动帮你调整高度

第九章常规流

排列相关

盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型大体上将页面中盒子的排列分为三种方式
- 常规流
- 浮动
- 定位

常规流布局

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

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

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

包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的活动范围（活动区域）
也就是父动子也动

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

块盒

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

宽度的默认值是auto：将剩余空间吸收掉

margin的默认值也是auto（也就是0）

width的吸收能力强于margin

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

所以说，在常规流中块盒，一般我们想要居中，我们就使用：

1
2
3

// 这样子就可以两个margin平均分配到，从而达到居中效果
margin-left:auto;
margin-reght:auto;

当然，我们也可以这么写 margin:0 auto;
上下0，左右auto

margin也可以做出突出效果，也就是子盒超出父盒，只需要令margin为负数就好。

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

1 2	height:auto; // 适应内容的高度，会根据内容自己扩充盒子的大小 margin:auto; // 表示0，也就是直接上下贴紧padding内圈

百分比取值

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

表示的意义就是剩下的空间的百分比占据，比如width:50%;表示子盒宽度等于占剩下空间的50%那么宽

以上所有的百分比相对于块的宽、高等等，与其他的无关

注意，一般是先进行量取，再进行margin的居中操作

高度百分比：

包含块的高度取决于子元素的高度，这个时候父子没有确定的高度，设定无效
包含块的高度不取决于子元素的高度，这个时候子元素的百分比相对于父元素高度，并且默认margin-top:0;
上下外边距的合并

两个常规流块盒，上下外边距相邻，会进行合并
前提条件：相邻

两个外边距取最大的来

兄弟元素合并，父子元素也一样要合并

第十章浮动

视觉格式化原理，大体将页面中盒子的排列分为三种方式

常规流
浮动
定位

应用场景

文字环绕
横向排列

浮动的基本特点

修改float属性值为：

left：左浮动，元素靠左靠上排列
right：右浮动，元素靠上靠右排列（可以设置关闭窗口的控件）
none：不浮动，就是常规流
- 当一个元素浮动之后，那么元素必定为块盒(元素是行盒，加入了float属性之后就可以变成块盒，更改display属性为block)
- 浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

宽度为auto时，适应内容宽度，与常规流不同，常规流是尽量适应盒子大小从而进行填充
高度为auto时，与常规流一致，适应内容的高度
margin为auto时，那么就相当于是等于0，与常规流不一致，常规流还会比较吸收能力，还会默认右吸收，常规流会填充，可是浮动不会
边框，内边距，百分比设置与常规流一致

盒子的排列

左浮动的盒子靠左上排列
右浮动的盒子靠右上排列
浮动的盒子在包含块中排列时，会避开常规流盒子。也就是说，不会自动填充
常规流块盒在排列时，无视浮动盒子
行盒在排列的时候会避开浮动盒子
- 可以通过这几个特性可以得到：浮动是意义上的“浮动”，在css样式中也可以贴在常规流兄弟标签上方
- 通过5我们可以知道浮动可以达到一种图片右边嵌套文字的效果，如果只是在p标签改成行盒，那么图片右边文字只有一行，如果图片嵌套盒子并浮动，就会让行盒自动避开浮动盒，从而不是那种与一行行盒平排列的效果
- 另外，如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫匿名行盒，比如p在float并排时，会将p里面内容嵌套span，从而像行盒一样避开float。
- 如果文字环绕时，我们最好可以通过设置图片的margin-right，这样美工就可以了。
- 注意，浮动之后是可以超出父元素的范围的，因为它在第二层了，否则会造成高度坍塌
外边距合并不会发生在浮动中

高度坍塌（造成页面布局混乱的根源）

高度坍塌的根源：常规流盒子的自动宽度在计算时不会考虑浮动盒子，也就是说，浮动盒子不会撑开常规流盒子

解决问题的方法：清除浮动
涉及css属性：clear

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

我们往往需要在浮动盒子下方加一个盒子填下去，使用浮动清除，这样子就可以使下面的盒子撑开父元素(坍塌元素)大盒子
原理：浮动清除，导致浮动盒子不可以和浮动清除的盒子a相贴，再加上a又是常规流，必须包裹在父元素里面，这样就可以造成a撑开父元素避免了高度的坍塌
这样不太好，我需要特地去写一个盒子元素去撑开
给高度坍塌的父元素加一个伪元素选择器::after，设置一个没有内容的，给after添加性质，比如不添加元素，只负责清除浮动，和变成快盒，注意在浮动盒子的后方，然后给伪元素选择器清除浮动

2的好处相当于是使用了一个height：0px的盒子，避免出现过多元素

第一种办法

<style>
    .container{
        background-color: blue;
        padding:30px;
        
    }
    .item{
        width:200px;
        height:200px;
        background-color: aqua;
        margin:6px;
        float: left;
    }
    .clearfix{
        background-color: black;
        height:60px;
        clear:left;
    }
</style>

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
</div>

第二种办法

<style>
    .container{
        background-color: blue;
        padding:30px;
        
    }
    .item{
        width:200px;
        height:200px;
        background-color: aqua;
        margin:6px;
        float: left;
    }
    .container ::after{
        content:"";
        display:block;
        clear:both;
    }
</style>

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    ::after
</div>

第十一章定位

视觉格式化模型，大体上将页面中的盒子排列分为三种方式
- 常规流
- 浮动：float
- 定位：position
定位：手动控制元素在包含块中的精准位置
涉及的CSS属性：position

position属性

默认值：static 静态定位(不定位)
relative：相对定位
absolute：绝对定位
fixed：固定定位

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

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

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

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

相对定位(relative)

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

往往用于给绝对定位元素提供定位的包含块

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

left:左移
right:右移
top:上移
bottom:下移

注意：
position:relative;与margin有本质区别，
margin是保证元素在盒子内部操作的，因此左扩展等等，会通过让步，改变盒子的大小来达到效果，
而position:relative不一样，他是把盒子大小定死了之后，再进行偏移，甚至会以超出盒子和与其他盒子重叠为代价（可能自己在上面，或者自己在下面）

盒子的偏移不影响其他盒子

绝对定位(absolute)

宽高为auto，自适应内容
包含块变化：找祖先元素中第一个定位元素，该元素的填充盒为其包含块
若祖先没有定位元素，则用网页来做包含块

绝对定位的用处：小图片重叠在大图片上面，用来标示信息

固定定位(fixed)

其他情况和绝对定位一模一样

包含块不同：固定为视口(浏览器的可视窗口)
视口：表示我们能看到的部分网页。比如，网页设置大于视口，就会出现滚动条，我们看到的部分就是视口

我们不论如何滚动滚动条，固定定位的位置都是不变的，一般用于做广告

定位下的居中

某个方向居中：

定宽(高)
将左右(上下)距离设置为0
将左右(上下)margin设置为auto

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

多个定位元素重叠时

堆叠上下文

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

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

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

补充

绝对定位一定是块盒
绝对定位，固定定位元素一定不是浮动
没有外边距合并

第一章 常见样式声明

第二章 选择器