CSS 快速上手

菜鸟

前端入门系列视频教程：

本文适合 CSS 零基础同学阅读

CSS 并不是一门编程语言，由于它的无逻辑性，反而让一些习惯了后端语言编程的同学抓耳挠腮，无所适从，本文就抓大放小，快速的上手一下 CSS

1、盒子

CSS 的主要作用是布局，在CSS中，每一个 HTML 元素都是一个方块，页面的布局即是这些方块由左至右，由上到下排列而成
这些方块，我们称之为盒子，盒子由内至外依次是：内容，内边距，边框，外边距

CSS 盒子模型
首先尝试把这几个名词，和图中的英文单词对应起来，留个初步印象

我们可以通过修改这些属性的值，来调整元素的大小，盒子模型是 CSS 基础中的基础，需要牢记在心。

2、display

display 的字面意思是显示，它的作用是用来定义元素的默认显示方式，例如 HTML 的元素分为两类：

所谓块级元素，就是横向占满一行，比如你有两个 div，那么一定是上下排列，因为第一个 div 占满了一行，第二个 div 自然就被挤到下一行去了，块级元素天生自带了display: block 的属性

CSS 块级元素

而行内元素，它的默认大小则是由内容撑开，内容有多少，它就占多大的地方，行内元素天生自带了display: inline的属性

CSS 行内元素

你可能会发现，诶，不对啊，明明高度都是100，为啥行内元素绿的不够高呢。CSS 在初始设计时候留的小坑（我觉得纯粹是个bug）：行内元素不能调整宽高。所以为了弥补这个缺陷，他们又准备了一个display: inline-block的属性，叫做行内块级元素，行为和行内元素一样，不过可以调整宽高

CSS 行内块级元素
这样终于够绿了

最后还有个display: none 的属性，被赋予这个属性的元素，相当于被从页面里删除了

3、选择器

看客老爷们可能要问了，你说了这么多，我又不知道怎么写，感觉很虚啊。那么我要贴代码了
<html>
  <head>
<style>
   /* 标签选择器 */
   span {
      display: inline-block;
      height: 100px;
      font-size: 36px; /* 字体大小 */
      color: white; /* 字体颜色 */
   }
   /* 类选择器 */
   .blue {
      background-color: #0080ff; /* 背景颜色 */
   }
   .green {
      background-color: #009a61;
   }
</style>
  </head>
  <body>
<span class=&#34;blue&#34;>我是高度100的蓝色span</span>
<span class=&#34;green&#34;>我是高度100的绿色span</span>
  </body>
</html>这是上面inline-block示例的代码，从这里你可以看到 CSS 是怎么写的，重点关注一下样式是如何被加到元素身上的。
选择器就是找元素的意思，码农界经常会起一些很吓人的名字，比如持久化啊（存本地），鲁棒性啊（够健壮），云计算啊（我帮你算），选择器啊（找元素）

上面的代码中主要用到了两种选择器（两种找元素的方法）

所有命中的样式，都会被加到元素身上，所以第一个 span 运行时会具有：标签选择器span和类选择器blue的样式

4、定位

我们现在可以定义元素的显示方式，盒子的大小，那么是时候布局一下它们的位置了，想想这种布局怎么做

CSS 定位
正常的排列是从左到右，从上至下的，这种盖在其它元素上的，需要使用 CSS 定位，以改变元素正常的位置。定位使用position属性，它的值有三种：

比如上面的例子，只要使用 相对定位，把绿球向左移动一定距离即可
.green {
position: relative;
left: -30px;
background-color: #009a61;
}

那么如果我要把下图的橙色方块，移到蓝色方块的左上角呢

这种情况，相对定位就有点不好使了。因为真实的页面中，盒子大小往往随着内容变化，也就是说高宽是动态的。那么我们就无法确切的知道，橙色方块距离蓝色方块左上角的距离，也就无法使用相对定位。
这时候需要使用绝对定位，根据绝对定位的规则（向上查找上级元素，相对于第一个有position属性的元素定位），那么不仅要给橙色方块设置position属性，还需要给蓝色方块也设置position属性，伪代码如下：
.blue {
position: relative; /* 只设置relative，不设置top，left，这样不改变自身位置 */
}
.orange {
position: absolute;
top: 0; /* 由于默认相对于左上角定位，故 top：0 的情况可省略不写 */
left: 0; /* 由于默认相对于左上角定位，故 left：0 的情况可省略不写 */
}

<div class=&#34;blue&#34;>
<div class=&#34;green&#34;>
<div class=&#34;orange&#34;></div>
</div>
</div>

绝对定位position: fixed相对于浏览器窗口左上角定位，相对简单，略过不讲

5、结语

各位看官现在已经知道了选择器，display，盒子模型和定位，用这几种方法搭配使用，基本上可以搞定大部分的页面样式。
可能有些了解过 CSS 的同学会问：浮动呢？浮动不也是 CSS 基础之一吗？刚才说到行内元素不能设置宽高是 CSS 设计留下来的小坑，浮动则是 CSS 设计中留下来的巨坑。

实际上，由于 CSS 初期设计中坑挺多的，所以诞生了一门叫CSS Tricks的学问，意思就是：我不知道为什么要这么写，但你按我这么写样式就对了。所以我不打算讲浮动了，后面我会再开一篇 CSS进阶，讲一下 Flex布局（顺便讲一下动画），你应该就不再需要浮动了
如果觉得我写的不错，欢迎点赞评论分享
更多关于 CSS 和 JS 的文章：前端同学 - 文章索引