前言
在开始之前，先做说明：本文只涉及到基本css知识，如果有做前端开发的同学跳过即可，本文针对刚刚入门以及从其他方向转向前端开发的同学。众所周知，CSS并不是一门编程语言，它的学习在前期主要来源于对属性的积累和各种属性的联合搭配，所以并不存在学通一门编程语言再学css就进度飞快的情况.
本文总结了作者所认为的，css入门必学的知识点，其他的可以在开发中，通过百度练习逐渐掌握，以下是本文所涉及的内容。 1. css基本使用方式和常用选择器 2. css层叠性和权重 2. css常用属性 3. css盒子模型 4. 浮动 5. position定位 6. flex弹性盒子 css十分困难，以至于几乎没有人敢说自己是css大神，但是入门却十分简单，接下来让我们开始css的学习过程。
注意：本文默认读者拥有一定的html知识，对html部分不做说明。
css基本使用方式和常用选择器
在开始学习之前，选择一个喜欢的开发环境。因为只是学习的原因，这里就推荐两个比较轻量的编辑器。Hubuilderx 和 VsCode.VsCode比较好用，但是需要自己安插件，如果懒的话，就用Hubuilderx吧，不过Hubuilderx是国产的，体验上有点问题。（亲身体会，并非看不起国产）。
HBuilderX-高效极客技巧 (dcloud.io)
Download Visual Studio Code - Mac, Linux, Windows
现在我们开始学习，在编辑器上新建文件，并且编辑基本html代码。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>针对后端开发的css快速入门教程</title>
</head>
<body>
<h1>开始css学习</h1>
<ul>
<li>一个无序列表</li>
<li>一个无序列表</li>
<li>一个无序列表</li>
</ul>
<ol>
<li>一个有序列表</li>
<li>一个有序列表</li>
<li>一个有序列表</li>
</ol>
<p>这是一行段落</p>
<div>一个平平无奇的div元素路过。。。。</div>
</body>
</html> 按下电脑F12或者右键浏览器选择检查元素，可以打开控制台。这里就是浏览器调试代码的地方。可以看到我们现在页面的样子已经出现，只是只有html光秃秃的。
css基本使用方式
css的引入有三种方式，内链式，外链式，和行内式。其实就是css写在不同的三个地方。这个可以自己去百度一下，很简单，这里就带过，我们直接使用外链式，给我们的h1标签写上样式。在body里面加上style标签，表示我们在这里面写css样式。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>针对后端开发的css快速入门教程</title>
<style>
h1 {
color: red;
}
</style>
</head> 可以看到，h1标签已经有了样式。
通过这里我们可以发现css的工作模式。通过选择器，选中我们想要赋予样式的属性，在通过大括号里面的属性集合为选中的元素添加样式。其中这里的h1就是选择器，对应h1元素，color就是属性，代表改变字体颜色，red就是属性值，表示颜色变为红色。颜色属性在css中可以使用对应的单词，也可以使用rgb,十六进制。这里给大家分享一个实用小工具，在电脑QQ开启的情况下，可以按住电脑Ctrl+Alt+a，调出qq截图工具，鼠标滑上自己想要吸取的屏幕颜色，按Ctrl+C就可以复制该颜色的十六进制数，可以直接粘贴进我们的css里面使用。
接下来我们介绍最常用的四种css选择器，标签选择器，class选择器，id选择和后代选择器，足以完成基本的选择需求，更多的就靠大家自己百度学习了，这里只做一个入门学习。
标签选择器
顾名思义，标签选择器就是以标签名字作为选择器名称的选择器，选择所有该名字的标签，比如上面的试例，就是一个选择h1标签的标签选择器，这个非常简单，选择器名称就等于html标签。比如在这里我们写上两个h1标签，可以发现，两个h1文字都变红了，都被选择到了。
class选择器
在使用标签选择器的时候，会出现一个问题，那就是html的标签就那么几个，如果我们要给同一种标签给上不同的样式该怎么办呢，这里就引出了最常用的class选择器，class选择器的用法是在需要的元素上写上class命名，然后使用.+名字的方式选择该元素，请注意：这里的class和面向对象的class类没有任何关系，可以理解为标记方式。名字随便命名即可，一般用能表现出功能的英文单词做好语义化。代码如下：
<style>
h1 {
color: red;
}
.h1_two {
color: blue;
}
</style>
<h1>开始css学习</h1>
<h1 class="h1_two">测试h1标签选择器</h1>我们给第二个h1标签写上class，然后通过.+class名字的方式写上样式。效果如下：
可以发现已经成功选择，值得一提的是，class可以重复使用，和标签选择器一样，同名的class会一同被选中，各位可以自行尝试。
id选择器
和class一样，给元素写上id属性，名字随意选择，尽量语义化。使用方式为#+id名字，请注意，id选择器唯一。请不要多次使用。
<style>
h1 {
color: red;
}
.h1_two {
color: blue;
}
#h1_one {
color: green;
}
</style>
<h1 id="h1_one">开始css学习</h1>
后代选择器
当出现多个同类元素需要被选择时，我们可以使用后代选择器，选择器是可以叠加的。使用方式为选择器+空格+选择器。比如这里的有序列表和无序列表，他们的子元素都是li标签，我们想要给不同的li标签不同的效果，该如何操作呢。答案就是使用后代选择器
<style>
h1 {
color: red;
}
.h1_two {
color: blue;
}
#h1_one {
color: green;
}
ul li {
color: yellow;
}
ol li {
color: blueviolet;
}
</style>
<ul>
<li>一个无序列表</li>
<li>一个无序列表</li>
<li>一个无序列表</li>
</ul>
<ol>
<li>一个有序列表</li>
<li>一个有序列表</li>
<li>一个有序列表</li>
</ol>可以看到，我们分别给ul和ol下面的li标签设置了不同的字体颜色。这里使用的是标签选择器的后代选择，clas和id也是可以这样结合或者互相混合使用的，各位可以自行研究。
css层叠性和权重
相信比较细心的同学已经发现了，在前面，我们使用class选择器的时候，原本两个h1标签都是红色，但是给第二个标签加了蓝色的属性后，原本的红色就被覆盖了。选择该元素，在控制台查看，发现原本标签选择器所设置的红色字体打上了一个删除线。
这里就引出了css两个很重要的特性，层叠属性和权重值。
层叠属性
这个比较好理解，多个选择器作用在同一个标签上面，相同的属性会互相覆盖，规则是写在后面的覆盖写在前面的属性。这里拿两个h1标签来举例。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>针对后端开发的css快速入门教程</title>
<style>
h1 {
color: red;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 id="h1_one">开始css学习</h1>
<h1 class="h1_two">测试h1标签选择器</h1>
<ul>
<li>一个无序列表</li>
<li>一个无序列表</li>
<li>一个无序列表</li>
</ul>
<ol>
<li>一个有序列表</li>
<li>一个有序列表</li>
<li>一个有序列表</li>
</ol>
<p>这是一行段落</p>
<div>一个平平无奇的div元素路过。。。。</div>
</body>
</html>效果就是后面的选择器把前面的效果覆盖，h1标签字体为蓝色。
权重值
换成这样，效果会怎么样呢。
<style>
.h1_two {
color: blue;
}
h1 {
color: red;
}
</style>
<h1 id="h1_one">开始css学习</h1>
<h1 class="h1_two">测试h1标签选择器</h1> 按我们前面的讲解，这里class选择器选中了第二个h1标签，但是他后面又设置了标签选择器，把所有h1标签变为红色，所以两个h1标签应该都是红色对吧，但实际并不是如此。
实际上的效果是class选择器的效果把标签选择器覆盖了，第二个是蓝色，这里的原因就是不同的选择器之间存在权重值，我们判断选择的覆盖效果，是先看权重，权重高的就覆盖权重低的，如果权重相同，那么后写的覆盖先写的。不同选择器之间的权重为：
- <h1 style="color: aqua;">开始css学习</h1> 这样的行内样式最高：1000 - id选择器：100 - class选择器：10 - 标签选择器：1 如果是存在后代选择器这样多个选择器叠加的情况，就按这里的值相加比较即可，大家可以自行尝试。最后还有一个小窍门，手动提高权重只需要在写的属性下面加上!important 比如 color: red !important;那么这个属性的权重就会无限大，覆盖一切，但是不建议多用。
继承性
部分css属性在部分标签上面会有继承性，比如写在ul上面的字体样式，会被li标签继承，但是继承得到的属性权重特别低，可以理解为权重0.1，有点多，这里就不展开讲了，知道有就行了。
css常用属性
不用主动去记css属性，更不要像背英语单词一样去背，网页的样式主要来源于css，而样式是比较好用语言表达的，这样就很方便百度搜索，比如搜一下，怎么给元素增加边框，怎么给元素设置背景，改变字体，字形。只要是你能在网页上看到的效果，基本上css都可以实现，只是难易程度不同罢了。这里放一个css的文章，有空可以看看。CSS 教程 (w3school.com.cn) 但是我建议，看完本文之后，对css的基本使用应该就有个大概的了解了，可以直接去找一些简单的练习页面，直接开抄就可以，遇到没见过不理解的属性再百度学一学，这样很快就能掌握css了。
css盒子模型
盒子模型是大家学习css比较重要的一个东西。这里不细说，知道两个重要的点就可以了。
块元素和行内元素
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>针对后端开发的css快速入门教程</title>
<style>
div {
height: 300px;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html> 在这里可以看到，我们给两个div设置了高度，和不同的背景。它的效果是这样的,没有设置宽度，但是它却撑满了整个浏览器，而且两个div不会再同一行，即使我们减小它的宽度。
这样的元素称为块级元素，特点就是宽度自动撑满父元素和无法在同一行。控制元素类型的属性是display，其中块元素的属性值为block.默认为块元素的元素有，div,p,h系列等等。
另一种就是行内元素，它的特点是，可以并行排列，内容由子元素撑开，无法给自身设置宽高。 比如我给这个span元素设置了宽高都是500px，但是它没有任何的宽高变化，依旧只有文字大小。它的属性值为display: inline
还有一种类型叫行内块，顾名思义，它兼具块元素和行内元素两种特点，可以并行排列，也可以设置宽高，其中img标签就是一种行内块元素。它的属性值为display: inline-block.这里做一个大概的了解即可，更多的可以参考CSS 属性篇(七)：Display属性 - 掘金 (juejin.cn)
盒模型内外边距
盒模型顾名思义就是网页上所有的元素都可以看做一个盒子，比如我们检查元素，鼠标滑上对应的元素，所框选出来的不就是一个矩形盒子么。
我们给div依次设置内边距，外边距，边框,
div {
height: 300px;
width: 300px;
margin: 0;
padding: 20px;
margin: 20px;
border: 30px solid blueviolet;
}
可以想象一个快递盒子，为了防止盒子碰撞，盒子外部包裹一层充气气囊，把盒子和其他盒子隔开，这就是外边距，盒子的厚度，就是边框，而盒子里面，为了防止物品晃动，所填充的泡沫就是内边距。其中有两种计算盒子内容的方式，有人把泡沫和物品一起算作盒子内容，有人只把物品当做盒子内容。这个计算方式可以更改，通过box-sizing，默认是盒子和泡沫一起算盒子内容，可以通过设置box-sizing: border-box;修改为另一种，这里涉及到IE和W3C的规范之争。用法不细讲，可以查看文章。关于CSS3 的 box-sizing属性 - 掘金 (juejin.cn)
浮动
浮动是比较老的布局方案了，原本它设计的初衷并不是为了用来布局，仅仅是用以实现类似报纸的文字环绕图片风格，后来大家发现它布局很方便，就都来用，它布局会有一些缺陷，现在我已经很少使用了，除非为了兼容IE.可以做一个了解。现在主要用定位和弹性盒子flex布局。
浮动布局
上面我们说到，块级元素有一个特点就是，无法在同一行排列，但是实际页面开发中，肯定会用到并行排列，如何解决这个问题呢，可以使用浮动。这里我们写了一个header,里面有一个标题和一个导航栏.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>针对后端开发的css快速入门教程</title>
<style>
.header {
border: 1px solid red;
}
.title,.nav {
height: 80px;
width: 200px;
text-align: center;
line-height: 80px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="header">
<div class="title">这里是标题</div>
<div class="nav">这里是导航栏</div>
</div>
</body>
</html>效果并不是很理想，两个块级元素无法并排
使用浮动，标题栏左浮动，导航栏右浮动。设置float属性
.title {
float: left;
}
.nav {
float: right;
}
成功让两个块级元素并排，并且左浮动和右浮动，但是这里出现了一个问题，那就是他们的父元素，header,失去了高度，可以看到原本的红色边框已经坍塌成了一条线了，为什么？
这也就是上面提到的浮动的缺陷：浮动会让文档脱离文档流，用更贴切的说法就是，他们浮起来了，原本在同一个平面，子元素的高度把父元素撑开，但是浮动了之后，浮动的元素就飘了起来，把网页看成一个立体的，浮动元素就相当于垂直于电脑屏幕飘了起来。这样父元素就没有东西可以撑开了，自然就发生了坍缩，高度消失。
我们在header同级添加一个div。
<style>
.test {
height: 200px;
background-color: red;
}
</style>
<body>
<div class="header">
<div class="title">这里是标题</div>
<div class="nav">这里是导航栏</div>
</div>
<div class="test">我顶上去了</div>
</body>
可以看到，test div顶了上去，并且两个浮动元素漂浮在test上面。要解决这个缺陷，我们要清除浮动
清除浮动
清除浮动有两种常用方法，一种是在父元素上面设置overflow属性，一种是在最后添加子元素并设置clear: both。我们来尝试第一种。
.header {
border: 1px solid rgb(250, 0, 0);
overflow: auto;
}
可以看到，父元素高度坍缩已经接近，其实overflow设置为auto和hidden都可以，大家自行尝试，clear比较麻烦，我一般用overflow的方式，这里就不展示了。感兴趣的可以查看文章。清除浮动的四种方式及其原理理解 - 掘金 (juejin.cn)
position定位
这个定位比较好理解，一般是子元素相当于父元素的定位。常用的值有四种类型。 1. position: static 静态，这个就是什么都不干时元素默认的定位方式，没什么用。 2. position: relative 相对定位，这个是相当于自身定位 在当前位置的情况下移动 3. position: absolute 绝对定位，相对于上一个postion值不为static的父元素的位置进行定位 4. position: fixed 固定定位, 相对于屏幕定位，无论页面怎么滚动，固定不动。 5. position: sticky 吸顶，这个没怎么用过，可以自行百度 简单示例如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>针对后端开发的css快速入门教程</title>
<style>
.position {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red;
}
.position div {
height: 150px;
width: 150px;
background-color: blue;
}
.test1 {
position: absolute;
left: 10px;
bottom: 0;
}
</style>
</head>
<body>
<div class="position">
<div class="test1">这是测试1</div>
</div>
</body>
</html>
可以看到，在postion父元素设置了relative定位后，子元素设置绝对定位absolute，这样子元素的定位情况就是相对于父元素了，定位设置了之后可以使用方向定位一共四个值left,right,top,bottom，分别对应离左，右，上，下的距离，一般设置两个就可以完成定位，类似于坐标系中的xy。比如上面设置了离左边10px，离下边0，这样就定位到了最底部。 如果我们删除父元素relative定位。
.position {
/* position: relative; */
width: 500px;
height: 500px;
border: 1px solid red;
}
可以看到，子元素不再相对于父元素定位，因为父元素的postion的属性值成为了默认的static,而absolute无法相对于static进行定位，最后找到了body元素，相对于整个页面进行定位，就成了现在这个效果，跑到了页面最下边。记住一个基本的定位口诀子绝父相,意思就是子元素使用absolute绝对定位，父元素使用relative相对定位。更多的postion操作请查看文章。CSS定位position - 掘金 (juejin.cn)
弹性盒子 flex
弹性盒子的使用方法特别简单，也是比较常用的布局方式，但是IE的支持情况不是很好，不要在意这些细节。我们不整那些华丽呼哨的，花里花哨的后面大家自己学，直接上代码。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>针对后端开发的css快速入门教程</title>
<style>
.flex {
width: 500px;
height: 500px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.flex div {
height: 150px;
width: 150px;
background-color: blue;
}
</style>
</head>
<body>
<div class="flex">
<div class="test1">这是测试1</div>
</div>
</body>
</html>
这样就完成了居中效果，本质上是，先使用display: flex声明，这是一个弹性盒子的容器，display属性相比大家都不陌生。弹性盒子的本质就是容器有两个方向，一个横向，一个纵向，选择这两个方向上面的布局即可，比如justify-content: center;就是在横轴上面居中，align-items: center;就是纵轴居中。
横轴，从左到右，纵轴从上到下，他们各有三个属性，起点，中点，终点，
justify-content: flex-start;如果横轴设置为起点
align-items: flex-end;设置纵轴为终点
还有一个属性也比较常用，space-between,添加一个div，并设置横轴为space-between
justify-content: space-between;
两个div就会分布在父元素横轴的两侧。这个属性可以让子元素散开。各位自行尝试。也可以多个元素。自动分布均匀散开。
注意：flex布局基本上在父元素上面操作，父元素称为容器，作用于直接子元素，子元素称为项。如果子元素里面还有嵌套，就需要把子元素当做孙子元素的父元素再次设置display:flex 以上是常用的flex布局操作，如果掌握了这个布局，基本上所有的静态页面样式都可以开发，这里并没有说完，flex布局还有许多知识，可以参考：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)。
后续
到这里快速入门就结束了，css的属性非常多，不同属性直接的结合还有很多的操作，这就需要在实战中慢慢积累了。这里推荐几篇比较高级的css基础知识（并不是病句）。
1. 前端基础篇之CSS世界 - 掘金 (juejin.cn)
2. 1.5 万字 CSS 基础拾遗（核心知识、常见需求） - 掘金 (juejin.cn) 3. 不为人知的 CSS 技巧 - 掘金 (juejin.cn) 4. CSS揭秘实用技巧总结 - 掘金 (juejin.cn) 5. 50道CSS基础面试题（附答案） - SegmentFault 思否 |
