前言
这次是前端知识之css篇的内容，加以小编的个人见解，希望可以帮到读者学习并了解前端，也请各位大佬指正。
CSS
基本概念与形式
1、基本概念
CSS指层叠样式表（Cascading Style Sheets），层叠样式表中样式是指文字大小、背景颜色、元素宽高等等；层叠是指渲染过程如同一层层“涂”上去一样，是用来定义如何显示HTML元素的，一般和HTML元素，一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题，即使同一个HTML文档也能表现出外观的多样化。
2、CSS的样式
在HTML中使用CSS样式的方式，一般有三种做法：
1）、内联样式表：CSS代码直接写在现在的HTML标记中，直接使用style属性改变样式。例如，
<body style=”background-color:green; margin:0; padding:0”></body>2）、嵌入式样式表：CSS样式代码写
<style type="text/css"></style>标记之间，一般情况下嵌入式CSS样式写在<head></head>之间。
3）、外部样式表：CSS代码写一个单独的外部文件中，这个CSS样式以“.css”为扩展名，在<head>内（不是在<style>标记内）使用<link>标记将CSS样式文件链接到HTML文件内。例如，
<link rel="StyleSheet" type="text/css" href="style.css">。(href:引入的文档来自于哪里；rel：说明引入的文档与当前文档之间的关系)
外部样式表是平常最常使用的方式。
3、各个样式的特点
一般而言，行内样式优先于内部样式和外部样式；而内部样式与外部样式平级，后面的会覆盖前面的（后来者居上），即行内样式>内部样式=外部样式
CSS选择器
CSS规则由两个主要的部分构成：选择器，以及一条或多条声
明。选择器通常是需要改变样式的HTML元素。每条声明由一
个属性和一个值组成。属性（property）是希望设置的样式属
性（style attribute）。每个属性有一个值。属性和值由冒号分开
。
例：
h1{color：green；font-size：40px}h1：选择器
{color：green；font-size：40px}：声明块
基本选择器包括：
- 通配选择器（一般不用）
- 元素选择器
- 类选择器
- id选择器
通配选择器
通配选择器和元素选择器的大致方法相同
例如：
p{color：blue；font-size：12px}其中p为选择器，color和font-size是属性，blue和12px是属性值，这句话的意思是将p标记中的颜色设置为蓝色，字体大小为12px。这就是通配选择器。
元素选择器
为也面中某种元素统一设置样式。
如：
h1{color：blue；font-size：12px}类选择器
class选择器用于描述一组元素的样式，类选择器有别于其他，它可以在多个元素中使用。类选择器在HTML中以class属性表示，在CSS中，类选择器以一个“.“为开始。
例如：
center{text-align：center}将所有拥有center类的HTML元素设为居中。当然也可以指定特定的HTML元素使用class，例如，
p.center{text-align：center}是对所有的p元素使用class=“center”，让该元素的文本居中。
注意：1、class不可以在一个标签中出现多组，如果有多组，前面的会被覆盖。但是一个class的值可以是多个。
（4）ID选择器：ID选择器可以为标有特定ID的HTML元素指定特定的样式。HTML元素以ID属性来设置ID选择器，CSS中ID选择器以“#“来定义。
复合选择器
1、交集选择器
元素选择器与类选择器相结合，即：（不是不与ID选择器结合，而是ID选择器太过于精确，无需结合。）
<style>
p.bet{ color:green;}
</style>
<p class=”bet”>一二三</p>
<p class=”qwe”>一二三</p>以“.“将两个标签连接在一起，实现且的效果。
2、并集选择器
选中多个选择器对应的元素，又称为分组选择器；所谓并集就是或者的含义。有“，“将多个元素相结合，即
.选择器，
.选择器{
样式属性:属性值;
}
平常一般竖着写，任何形式的选择器，都可以作为并集选择器的一部分。
3、后代选择器
选定指定元素中，符合要求的后代元素。即：
父选择器>子选择器{
样式属性:属性值;
样式属性:属性值;
......
}
4、兄弟选择器
相邻兄弟选择器：
以“+“相连，就是需要选中同一父元素后，紧接在某一个元素后的元素，即：
选择器+选择器{属性名：属性值；}
5、通用兄弟选择器：
选中指定元素后，符合条件的所有兄弟元素
选择器1~选择器2{属性名：属性值}
属性选择器
第一种写法：选中具有title属性的元素。
[title]{属性名：属性值}
第二种写法：选中具有title，且有属性值的元素。
[title=”属性值”]{属性名1=“属性值1“}
第三种写法：选中具有title属性，且属性值以字母a开头的元素
[title^a=”a”]{属性名：属性值}
第四种写法：
选中具有title属性，且属性值以字母u结尾的元素
[title$=”u”]{属性名=“属性值“}
第五种写法：
选中具有title属性，且属性值包含该字母的元素
[title=”qwe”]{属性名=“属性值”}
伪类选择器
选中特殊状态的元素。CSS引入伪类和伪元素的概念是为了实现基于文档树之处的信息的格式化。
伪类和伪元素的区别是：
（1）伪类的操作对象是文档树中已有的元素，而伪元素创建了一个文档树之外的元素。（2）CSS3规范中要求使用双冒号（：：）表示伪元素，以此来区分伪元素和伪类。（3）IE8及以版本的一些浏览器不兼容双冒号（：：）表示方法、所以除了少部分伪元素；其余伪元素即使用单冒号（：），也使用双冒号（：：）。
伪类选择器是一种特殊1的类选择器，是能够被支持CSS的浏览器自动识别的特殊选择符。最大的用途是为超链接定义不同状态下的样式效果。伪类的语法以被定义。
选择器：伪类{属性：属性值}
伪类名称
1、表示状态
link：选择未访问的链接
visited：选择已访问的链接
hover：选择鼠标指针悬浮时的链接
:active: 被激活的链接，即按下鼠标左键但未松开。
:focus: 选择获取焦点的输人字段
2、结构化伪类
:not:否定伪类，用于匹配不符合参数选择器的元素。
:first-child: 匹配元素的第一个子元素。
:last-child: 匹配元素的最后一个子元素。
:first-of-type:匹配属于其父元素的首个特定类型的子元素的每个元素。
:last-of-type: 匹配元素的最后一个子元素。
:nth-child: 根据元素的位置匹配一个或者多个元素，并接受一个an+b形式的参数( an+b最大数为匹配元素的个数)。
:nth-last-child:与:nth-child相似，不同之处在于是从最后一个子元素开始计数的。
:nth-of-type:与nth-child相似，不同之处在于只匹配特定类型的元素。
:nth-last-type:与nth-of-type相似，不同之处在于是从最后一个子元素开始计数的。
:only-child: 当元素是其父元素中唯一一个子元素时，:only-child匹配该元素。
:only-of-type: 当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹配该元素。
:target: 当URL带有锚名称，指向文档内某个具体元素时，:target匹配该元素。
3. 表单相关伪类
:checked:匹配被选中的input元素， 这个input元素包括radio和checkbox。
:default:匹配默认选中的元素，例如，提交按钮总是表单的默认按钮。
:disabled:匹配禁用的表单元素。
:empty: 匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素。
:enabled: 匹配没有设置disabled属性的表单元素。
:valid:匹配条件验证正确的表单元素。
:invalid: 与:valid相反，匹配条件验证错误的表单元素。
:optional: 匹配具有optional属性的表单元素。当表单元素没有设置为required时， 即为optional属性。
:required: 匹配设置了required属性的表单元素
伪元素
CSS的伪元素之所以被称为伪元素，是因为其不是真正的页面元素，即没有对应的HTML元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用如页面元素一样的CSS样式。
常用伪元素
:before:在某个元素之前插人一些内容。
:after: 在某个元素之后插人一-些内容。
:first-letter:为某个元素中文字的首字母或第一个字使用样式。
:first-line:为某个元素的第一行文字使用样式。
:selection:匹配被用户选中或者处于高亮状态的部分。
:placeholder:匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。
选择器优先级
通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就会发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。
行内样式>Id选择器>类选择器>元素选择器>通配选择器
计算选择器权重
格式：（a,b,c）
a：ID选择器的个数
b：类、伪类、属性选择器的个数
c：元素、伪元素选择器的个数
比较选择器的权重是先比较两选择器a的大小，a一致时才比较b的大小，同理，b一致时才会比较c的大小。
style=“ ” ：（1,a,b,c）
!important : (1,?,a,b,c)为最大权重
选择器三大特性
- 层叠性
概念：如果发生了样式冲突（同一权重，被赋予了不同值）， 那就会根据一定的规则（选择器优先级），进行样式的层叠。
- 继承性
概念：元素会自动拥有其父元素，或其祖先元素上所设置的某些样式。
规则：优先继承离得近的
常见的可继承属性：
text-？？，font-？？，line-？？，color等等
- 优先级
！important > 行内样式 >ID选择器 >类选择器 >元素选择器> 继承的样式
CSS颜色的表示
- 直接color定义
- rgb（红，黄，蓝）和rgba（红，黄，蓝，透明度）
红黄蓝的范围是0~255，也可以是百分比；透明度范围是0~1
可以混合出任何一种颜色
- HEX或HEXA
原理与rgb一样，通过红、绿、蓝进行组合，只不过要用6个数字，分成3组来进行表达。
格式为：#rrggbb
每一个数字的取值范围是0~f，即（0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f），每一种光的最小值是：00，最大值是：ff
- HSL或HSLA
HSL是通过：色相、饱和度、亮度，来表示一个颜色。格式为：hsl（色相，饱和度，亮度）
色相：取值范围是0~360度，具体度数对应如图
饱和度：取值范围是0%~100%。（向色相中对应的颜色添加灰色,0%全灰，100%没有灰）
亮度：取值范围是0%~100%（0%亮度没了，所以是黑色；100%是白色）
HSLA是在HSL基础是加了透明度。
CSS基本属性
- 字体属性
font-size：字体的尺寸。
inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited。
px像素单位、百分号（相对于父标签字体大小的百分比）、em倍数（相对于父标签字体大小的倍数）
HTML根标签默认字体的大小为16px，也称为基础字体大小
- font-weight：字体的粗细
normal为正常；lighter为细体；bold为粗体；bolder为特粗体
- font-family：设置字体系列，用逗号隔开，要求系统中要安装指定的字体。
- font-style：设置字体风格
normal：正常；italic：斜体
文本属性
color：颜色
line-height：行高
text-align：水平对齐方式，取值为：left、center、right。
vertical-align：垂直对齐方式，取值：top、middle、bottom（图片和文字的对齐方式）
text-indent：首行缩进
text-decoration：文本修饰，取值：underline、overline、line-through
text-transform：字母大小写转换，取值lowercase、uppercase、capitalize（首字母大写）
letter-spacing：字符间距
word-spacing：单词间距
背景属性
- background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。scroll指背景图像随内容滚动；fixed指背景图像不随内容滚动。
- background-color：设置元素的背景颜色（不能继承，默认值为transparent“透明“）
- background-image：把图像设置为背景
- background-position：设置背景图像的起始位置。left为水平居左，center为水平居中或垂直居中，top为垂直考上，bottom为垂直靠下或精确的值
- background-repeat：设置背景图像是否重复及如何重复。repeat-x为横向平铺；repeat-y为纵向平铺；norepeat为不平铺；repeat为平铺背景图片，该值为默认值
常用属性
color：
color属性用于设置文本的颜色。它可以使用颜色名称、十六进制rgb值或rgba值来指定颜色。如下：
>>>color : red;
>>>color : #FF0000;
>>>color : rgba(255,0,0,0.5);
font-size:
font-size属性用于设置字体的大小。它可以使用像素、em、rem、百分比等单位来指定字体大小。
>>>font-size : 16px;
>>>font-size : 1.2em;
>>>font-size : 120%;
background-color :
background-color属性用于设置元素的背景颜色。它可以用来使用颜色名称、十六进制rgb值或者rgba值来指定背景颜色。
>>>background-color : yellow;
>>>background-color : #FFFF00;
>>>backgroung-color : rgba(255,255,0,0.5);
margin：
margin属性用于设置元素的外边框。它可以使用像素、em、rem、百分比等单位来指定外边框的大小。
>>>margin : 10px; #设置所有方向的外边框为10像素
>>>margin-top : 5em; #只设置顶部外边框为5em
>>>margin : 10px 20px 30px 40px;分别设置四个方向的外边框。
padding：
padding属性用于设置元素的内边框，也就是元素内容和边框之间的空间。它可以使用像素、em、rem、百分号等单位来指定内边框的大小。
>>>padding : 10px;
>>>padding-top : 5em;
>>>padding : 10px 20px 30px 40px;
常用值：
1、长度单位
px：像素单位
em：相对于父元素字体大小的单位
rem：相对于跟元素字体大小的单位
%：相对于包含块的百分比
>>>width : 100px;
>>>font-xize : 1.2em; #相对于父元素字体大小增加20%
>>>padding : 2rem; #相对于跟元素字体大小增加两倍
>>>height : 50%; #相对于包含块高度的50%
CSS属性值可以分为以下几种类型：
数字类型
数字类型的值可以是整数或小数，并且可以带有单位，例如像素（px）、百分比（%）、em、rem等
颜色类型
颜色类型的值可以使用预定义的颜色名称或rgb/rgba值、hsl/hsla值、hex/hexa值等方式来指定。
文本类型
文本类型的值包括字符串、url和图像名称等
函数类型
函数类型由函数名和参数组成，例如liner-gradient（），它可以生成一个渐变背景。
枚举类型
枚举类型的值只能从预定义的选项中选择，例如display属性的值可以是block、inline、inline-block、table等。
逻辑类型
逻辑类型的值表示真假值，例如visibility属性的值可以是visible或hidden。
CSS值的继承性
有些CSS属性可以被子元素继承，例如font-family、color、text-align等。等一个元素没有设置这些属性时，它会从父元素继承这些属性的值。不过，并非所有属性都有继承性，例如width、height、border等就不具有继承性。
盒子模型
概念：盒子模型是指计算机渲染的每个元素都被看作一个盒子。这个“盒子”由四个边框、内部内容和外边距所组成。它是web设计和开发中最基本的概念之一。在HTML和CSS中，每个元素都可以通过盒子模型来描述其布局。
盒子模型能干什么？
盒子模型主要针对页面布局的时候，他规范了我们页面的所有元素的一个布局规范是由外向内进行布局。
盒子模型包括四个部分：
内容区域（content area）：指一个元素包含的实际内容，并且被包含在一个框里面，它是盒子模型的核心。
填充区域（padding area）：位于内容区域和边框之间，它的大小可以通过padding属性控制。填充区域可以用来设置内容与边框之间的距离。
边框区域（border area）：是围绕内容和填充区域的线条，可以通过border属性进行设置，用来定义元素的边界。
外边框区域（margin area）：位于边框和周围元素之间，可以通过margin属性进行控制，用来调整元素与其他元素之间的距离。
margin注意事项：
- 子元素的margin，是参考父元素的content计算的。（因为父亲的content中承载着子元素）
- 上margin，左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置。
- 块级元素、行内块元素，均可以完美设置四个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
- margin的值也可以是auto，如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中。
- margin的值可以是负值。
margin塌陷问题
第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上。
如何解决margin塌陷问题？
- 给父元素设置不为0的padding
- 给父元素设置密度不为0的border
- 给父元素设置CSS样式overflow：hidden
处理内容溢出
overflow：溢出内容的处理方式。
属性值：1、visible：显示，默认值
2、hidden：隐藏
3、scroll：显示滚动条，不论内容是否溢出
4、auto：自动显示滚动条，内容不溢出不显示。
隐藏元素的方法
方式一、visiblity属性
visiblity属性默认是show，如果设置为hidden，元素会隐藏。
元素看不见了，还占用原来的位置
方式二、display属性
设置display：none，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。
样式的继承
有些元素本身就默认设置了某个样式，比继承的优先级要高；如果本身没有设置某个样式，会从父元素开始一级一级继承。
会继承的CSS属性：字体属性，文本属性（除了vertical-align）、
文本颜色等。
不会继承的CSS属性：边框、背景、内边框、外边框、宽高、溢出方式等等。
一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。
默认样式
元素一般都有些默认的样式，例如：
1、<a>元素：下划线、字体颜色、鼠标点击变化
2、<h1>~<h6>元素：文字加粗、文字大小、上下外边框。
3、<p>元素：上下外边框
4、<ul>、<ol>元素：左内边框
5、body元素：8px外边框
布局技巧
- 行内元素、行内块元素，可以被父元素当做文本处理
即：可以想处理文本对齐一样，去处理；行内、行内块在父元素中的对齐。
例如：text-align、line-height、text-indent等
- 如何让子元素，在父元素中水平居中：
若子元素为块元素，给父元素加上：margin：0 auto
若子元素为行内元素、行内块元素，给父元素加上：text-align：center
3、如何让子元素，在父元素中垂直居中：
若子元素为块元素，给子元素加上：margin-top，值为（父元素content – 子元素盒子总高）/2
若子元素为行内元素、行内块元素：让父元素的height = line-height，每个子元素都加上：vertical-align：middle。
补充：若想绝对垂直居中，父元素font-size设置为0
元素之间的空白问题
产生原因：行内1元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
- 方案一：去掉换行和空格（不推荐）
- 方案二：给父元素设置font-size：0，再给需要显示文字的元素，单独设置字体大小。
行内块的幽灵空白问题
产生原因
行内块元素与文本的基线对齐，而文本的基线与文本最低端之间是有一定距离的。
解决方案：1、给行内块设置vertical，值不为baseline即可，设置为middle、bottom、top均可。
2、若父元素中只有一张图片，设置图片为display：block。
3、给父元素设置font-size：0。如果该行内块内部还有文本，则需单独设置font-size
浮动float
标准布局
CSS将所有的元素的当成盒子，CSS布局实际上就是如何堆放盒子。
在说浮动布局之前，我们了解标准布局，所谓标准布局，即按照元素在标准流中的特点布局
1、块级元素独占一行
2、行内元素、行内块元素共享一行
在标准布局时代，我们多基于table进行网页布局。但是table布局也有非常严重的缺点：
1、布局复杂
2、布局一旦成型，很难变更
3、渲染性能差
所谓浮动，即为元素设置float样式，float样式有如下值：
left 左浮动
right 右浮动
none 无浮动（元素默认浮动，无浮动）
一旦，元素设置了float:left或者float:right，则元素就会脱离标准流，简称“脱标”，然后进入浮动流。
所谓浮动流，我们可以理解其为处于标准流图层之上的另一个图层。
而一旦元素脱标后，元素就会释放其在标准流中的占据的位置，这将导致标准流中脱标元素之后的元素前据。
在浮动流中，多个块级元素是可以共享一行的
浮动带来的问题：标准流父级容器高度塌陷
一般而言，我们不给标准流中父级容器设定height，而是让容器height自动适配为容器内容的高度，但是如果，此时有一个子级元素发生了浮动，则标准流中的父级容器的高度会发生塌陷
原因是：标准流中父级容器的高度本来是由标准流中子级元素撑开的，但是当子级元素脱标后，对应标准流中的位置就会被释放，所以标准流中父级容器就没有内容了，此时父级容器的height就为0了
清除浮动
方案一：给父元素指定高度
方案二：给父元素也设置浮动，带来其他影响。
方案三：给父元素添加overflow样式（除了visible）
方案四：在所有浮动元素最后面，添加一个块级元素，并给该块级元素设置clear：both
方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。
例如：.parent::after{
content : “ ”;
display : block;
clear : both;
}
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。
定位
什么是定位？
CSS中的position属性，有四个值：relative（相对定位）、absolute（绝对定位）、static（静态定位）和fixed（固定定位），通过top、left、bottom、right来调整元素位置
相当定位
其参考点是相当于自己原来的位置
相当位置的特点：
（1）、不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
（2）、定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则：定位的元素会覆盖在普通元素之上；；
都发生定位的两个元素，后写的元素会覆盖在先写的元素之上。
（3）、left不能和right一起设置，top和bottom不能一起设置
（4）、相当定位的元素，也能继续浮动，但不推荐
（5）、相当定位的元素，也能通过margin调整位置，但不推荐
注意：大多数情况之下，相当定位，会与绝对定位配合使用
绝对定位
- 如何设置绝对定位？
给元素设置position：absolute即可实现绝对定位
可以使用left、right、top、bottom四个属性调整位置
- 绝对定位是参考其包含块
什么是包含块？（1）、对于没有脱离文档流的元素：包含块就是父元素；
（2）、对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果使用祖先都没有定位，那包含块就是整个页面）
3、绝对定位元素的特点：
（1）、脱离文档流，会对后面的兄弟元素、父元素有影响
（2）、left不能和right一起设置，top和bottom不能一起设置。
（3）、绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
（4）、绝对定位的元素，也能通过margin调整位置，但不推荐
（5）、无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。
何为定位元素？默认宽、高都被内容所撑开，且能自由设置宽高
固定定位
参考点：其视口
什么是视口？对于PC浏览器来说，视口就是我们看网页的窗口
特点：
- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left不能和right一起设置，top和bottom不能一起设置
- 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主
- 固定定位的元素，也能通过margin调整位置，但不推荐
- 无论是什么元素（行内、行内块、块级）设置固定定位之后，都变成了定位元素
粘性定位
设置position：sticky
参考离它最近的一个拥有“滚动机制“的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
特点：1、不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
2、最常见的值是top值
3、粘性定位和浮动可以同时设置，但不推荐
4、粘性定位的元素，也可以通过margin调整位置，但不推荐
z-dex
通过z-dex值调整元素的显示层级。
z-dex的属性值是数字，没有单位，值越大显示层级越高。
只有定位的元素设置z-dex才有效
版心
在pc端网页中，一般的会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般在960~1200像素之间，但不固定。
版心可以是一个或者多个，一般用content表示。
后言
如果读者能看到这里，那小编真是受宠若惊，这次CSS的学习小编花了很久的时间，而且越深入的学习，越是能感受到计算机这一行业的深度，我才刚刚开始，要加倍学习。
