【前端开发入门】css快速入门

引言
一、css盒模型
- 1. 盒模型概念
- 2. 盒模型案例
二、css编写
- 1. html文件内部编写
- - 1.1 标签style属性编写
  - 1.2 css选择器关联
  - - 1.2.1 id选择器
    - 1.2.2 class选择器
    - 1.2.3 标签选择器
    - 1.2.4 css选择器作用域
    - 1.2.5 其他选择器
    - 1.2.6 各css选择器优先级
- 2. 单独维护css文件
- - 2.1 创建css文件
  - 2.2 在html中引入
三、css常见属性（需记忆）
- 1. 结构类
- 2. 样式类
四、css布局定位
- 1. position定位
- - 1.1 属性值描述
  - 1.2 案例举例
- 2. 弹性盒子布局
- - 2.1 常规用法
  - 2.2 案例举例
总结

引言

本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容，并不代表这部分内容不重要，只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端，细节技巧性内容，可以在后续的开发工作中自行发现并掌握。

在上一篇【前端开发入门】html快速入门中，你应该可以利用块级元素和行内元素的占位特点，完成基础的页面布局。

本篇将介绍css的常用属性及使用场景，为html标签添加样式，美化页面效果。关于css基础内容，请参考：MDN–CSS 基础，一些css属性的详细介绍和示例也可以在MDN网站上查询。

有关css的编写规范请参考我的另一篇文档：【CSS Tricks】深入聊聊前端编写css的方法论

一、css盒模型

还记得 html快速入门 文中介绍的容器概念吗？所有的页面元素都是一个容器，堆叠在一起形成了文档流。css其实就是对每一个容器进行粉饰美化。我们通常会按照一定规则去美化每一个容器，也就是所说的盒模型规则。这是一个重要的概念，理解了盒模型将对你编写css样式有很大帮助。

在这里插入图片描述
如上图所示，一个完整的html页面，就像是一个个粉饰好的元素盒子堆叠在一起。

1. 盒模型概念

css盒模型包含以下几个内容（从内向外）：

content（内容）：元素内部主要填写表达的内容。
padding（内边距）：元素内容到边框之间的空间。
border（边框）：紧贴内边距的四周的线边框。
margin（外边距）：边框外部与其他元素的碰撞范围，即其他元素要与当前元素边框保持的距离。

2. 盒模型案例

我们可以通过在浏览器页面中按 f12 打开开发者工具，更直观的查看元素样式

设置css样式：

      .box2 {
      // content 宽高
        width: 100px;
        height: 100px;
      // 内边距
        padding: 30px;
      // 边框
        border: 30px solid #333;
      // 外边距
        margin: 30px;
      // 背景色
        background: blue;
      }

在开发者工具中点选对应元素，在样式一栏中滑动到末尾查看盒模型

二、css编写

1. html文件内部编写

在html文件内部编写css样式，可以直接写在标签的style属性中，也可以通过css选择器关联指定html标签，并将样式统一写在style标签中。

1.1 标签style属性编写

通过标签style属性编写的样式优先级最高

<div style="width: 100px; height: 100px; background: #333333">content</div>

1.2 css选择器关联

可以将以下各类选择器代码放置在html对应位置去看下效果。

1.2.1 id选择器

元素标签中设置唯一id名，表示单独匹配某一个元素。在style中通过 #id名 匹配到对应元素，在选择器后的大括号内部编写css样式，应用到指定id的元素身上。

<style>
#box1{
	width:100px;
	height:100px;
	background:red;
}
</style>


<body>
	<div id="box1">box</div>
</body>

1.2.2 class选择器

元素标签中设置class名（可重复）表示匹配这一类的元素。在style中通过 .class名 匹配到对应元素，在选择器后的大括号内部编写css样式，应用到标记有相同class名的元素身上。class类可以设置多个，后设置的class类的属性值会覆盖先设置的class类的相同属性名的属性值。

<style>
.box{
	width:100px;
	height:100px;
	background:blue;
	margin: 20px;
}
</style>


<body>
	<div class="box">box1</div>
	<div class="box">box2</div>
	<div class="box">box3</div>
</body>

1.2.3 标签选择器

html的标签名同样可以作为选择器匹配到元素，和class的匹配范围类似。在style中通过 标签名 匹配到当前作用域下的对应元素，在选择器后的大括号内部编写css样式，应用到具有相同标签名的元素身上。

<style>
div{
	width:100px;
	height:100px;
	background:green;
	margin:20px;
}
</style>


<body>
	<div>box1</div>
	<div>
		<div>嵌套的box1</div>
		<div>嵌套的box2</div>
	</div>
</body>

1.2.4 css选择器作用域

如1.2.3示例中，div的样式会遍历body中的所有div标签，层层渗透直到都赋予相同的样式。如果我想单独为 嵌套的box1 和 嵌套的box2 设置另一种样式，其他的div保持全局的div样式，该如何处理？

一种方案是为两个嵌套的box设置class类，在style中为这个类设置另一种样式。
另一种方案是为包裹他俩的父元素div设置class类或者id，在这个作用域下匹配所有的div。如下示例：

<style>
div{
	width:100px;
	height:100px;
	background:green;
}
.area > div {
	background:yellow;
}
</style>


<body>
	<div>box1</div>
	<div class='area'>
		<div>嵌套的box1</div>
		<div>嵌套的box2</div>
	</div>
</body>

解释下这里的代码：

首先是全局作用域，我们直接编写的div样式默认的作用域为body，他会匹配到body下所有的div，并赋予样式。
然后是局部作用域，我们通过 .area > div 选择器，限定了类名为 .area 的标签下作用域的所有div子元素。如果有更深一级的嵌套，那就继续使用 > 去向下匹配作用域。
所以整体的渲染过程是先将body下的所有div渲染为宽高各100px，背景色为绿色。然后通过 .area > div 选择器匹配到的div元素修改背景色为黄色（重新覆盖了全局作用域的样式），并继续保持宽高100px（继承了全局作用域的部分样式）。

1.2.5 其他选择器

现在还不是时候，不过可以先熟悉一下名字：css伪类、css伪元素、标签属性选择器。

1.2.6 各css选择器优先级

因为css样式是可以重复覆盖掉的，所以判断css选择优先级的意义是，决定哪种类型的选择器所携带的css样式会最终渲染到元素身上。

首先明确一点，在标签的style属性中编写css样式优先级最高。

css选择器按照优先级排序分别为：id、class、标签名。

当出现了css选择器作用域等复杂情况时，可以通过比较选择器的 特定性 去判断。在开发者工具中可以看到，id选择器的 特定性 为：（1，0，0），标签选择器 特定性 为：（0，0，1），.area > div 选择器包含了class类选择器和标签选择器，他整体的 特定性 为：（0，1，1）。id代表特定性第一位，class代表特定性第二位，标签代表特定性第三位。
由此我们可以整理出规则，按照特定性三位数依次作比较

按位对比，第一位为1的情况，也就是包含id的选择器优先级最高。
当第一位相同，则对比第二位为1的情况，也就是包含class选择器的优先级高。
当前两位相同，则对比第三位为1的情况，也就是包含标签选择器的优先级高。
当三位特定性值都相同，那么谁编写的位置靠后谁优先级高。相同优先级的选择器，后写的样式会覆盖掉先写样式的重复项。

2. 单独维护css文件

单独维护css文件其实就是将html文件中的style内容复制出来放置在独立的css文件中，通过引用文件的方式注入到页面的style中去。根据业务模块的需求，可以同时创建多个css文件，分别独立维护方便管理。

2.1 创建css文件

在html同级目录下创建后缀为 .css的文件如：style.css，写入内容：

div{
	width:100px;
	height:100px;
	background:green;
}
.area > div {
	background:yellow;
}

2.2 在html中引入

找到html的 head 标签，在 head 标签内部使用 link 标签引入css文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    // link标签引入css文件
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div>box1</div>
    <div class="area">
      <div>嵌套的box1</div>
      <div>嵌套的box2</div>
    </div>
  </body>
</html>

你同样可以使用@import 关键字在style标签中引入css文件，但是更推荐使用link方法。所以这里不做过多介绍，自行查阅资料了解。

三、css常见属性（需记忆）

css属性多的数不清，我们不可能将其全部记住。我将列举几个必须要记的几个属性，其余的在开发过程中百度即可。

css属性按照效果来划分，可以大致分为两类：结构类和样式类

1. 结构类

表示元素的物理外在表现，比如：高矮胖瘦、和其他元素距离多少。

width和height，用于设置元素的宽高，一般取值为数字+单位。

.box{
	// 表示宽度为100像素点。
	width:100px; 
	// 表示宽度为父元素宽度的20%
	width:20%;
	// 表示宽度为整个浏览器视口的宽度的100%，仅浏览器页面区域，不包含顶部标签页、导航栏、收藏夹等区域。
	width:100vw;
	// 表示高度为整个浏览器视口的高度的100%，仅浏览器页面区域，不包含顶部标签页、导航栏、收藏夹等区域。高度单位只有vh这一个区     别，其他和宽度单位一致。
	height:100vh;
	// 表示宽度为当前默认字体大小的1.5倍
	width:1.5rem;
}

margin，表示外边距。即元素边框外与其他元素的碰撞距离。单位与宽高一致。

.box{
	// 表示四周边距均为10像素
	margin:10px;
	// 第一个值表示上下边距为10像素，第二个值表示左右边距为20像素
	margin:10px 20px;
	// 第一个值表示上边距为10像素，第二个值表示左右边距为20像素，第三个值表示下边距为10像素
	margin:10px 20px 10px;
	// 四个值的顺序为上、右、下、左边距。顺时针四个边距
	margin:10px 20px 10px 20px;
	// 以下四种分别为单独某个方向设置边距。一般推荐使用margin四参数。
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

padding，表示内边距。表示元素内容到边框之间的距离。单位与宽高一致。

.box{
	// 表示四周内边距均为10像素
	padding:10px;
	// 第一个值表示上下内边距为10像素，第二个值表示左右内边距为20像素
	padding:10px 20px;
	// 第一个值表示上内边距为10像素，第二个值表示左右内边距为20像素，第三个值表示下内边距为10像素
	padding:10px 20px 10px;
	// 四个值的顺序为上、右、下、左内边距。顺时针四个内边距
	padding:10px 20px 10px 20px;
	// 以下四种分别为单独某个方向设置内边距。一般推荐使用padding四参数。
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

border，设置元素边框。

.box{
	// 第一个参数为边框宽度。
	// 第二各参数为边框线形，一般取值为solid（实线）、dashed（虚线）。其他取值不推荐，可以自行探索。
	// 第三个参数为边框颜色。颜色值在样式类详解。
	border: 1px solid #333;
	// 设置边框四角曲度，取值可以为具体像素值也可以为百分比。
	border-radius: 10px;
}

overflow，设置了当元素的内容太大超出设置宽高范围时，元素容器的表现行为。当值不为visible时可用于形成 BFC

.box{
	// 默认值，如果虽然设置了元素容器宽高，但子元素内容过多仍会超出宽高范围
	overflow:visible;
	// 子元素内容过多超出元素容器宽高范围时，将被裁剪掉。
	overflow:hidden;
	// 子元素内容过多超出元素容器宽高范围时，将出现侧边滚动条，超出部分内容被遮挡，通过滚动滚轮查看全部内容。
	overflow:scroll;
	// 自动调节：子元素内容在元素容器宽高范围内时，和visible表现一致。子元素内容过多超出元素容器宽高范围时，将出现侧边滚动条，超出部分内容被遮挡，通过滚动滚轮查看全部内容。
	overflow:auto;
	// 将超出部分分为横向和纵向，单独控制超出时元素容器的表现，当你确认横向或纵向某一方向不会超出时使用。参数与overflow一致。
	overflow-X: auto;
	overflow-Y: auto;
	
}

2. 样式类

表示元素的涂装，一般指各种颜色和阴影效果。

颜色取值一般为HEX（#ffffff）、RGB（rgb(255，255，255)）、HSL（hsl(255，90%，50%)）三种形式。
HEX格式中如果每两位数字都相同可以简写，例如：#11ee00 等价于 #1e0 ; #ffffff 等价于 #fff。

字体样式

.box{
	  // 字体大小，每个浏览器都会有默认的字体大小（16px）和最小字体大小(chrome最小6px)
      font-size: 16px;
      // 不填写font-weight属性为默认字体粗细（值等价于400），bold为加粗字体（值等价于700），取值范围为1-1000，以100为倍数。
      font-weight: bold;
      // 字体颜色
      color: #333333;
}

背景色

.box{
	// 背景色
	background: #333;
	// 背景图片，背景图微调详情查询MDN网站
	background: url('./bg.png');
}

阴影，在线调试页面

.box{
	/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
	box-shadow: 10px 10px 0 10px #333;
}

四、css布局定位

UI设计稿一般情况下都不会规规矩矩自左而右、自上而下的排列元素，往往都是比较有设计感的到处飞。

在完成了基础的元素外形、涂装的css样式设置后，我们需要考虑如何将元素放置在指定位置。

一般情况下，我们可以基于 块级元素 和 行内元素 基础的占位特性，加上一些margin微调，即可完成基础布局。但实际上会经常出现一些特殊状况，比如一批元素需要对齐、单独移动一个元素而不想影响其他元素等。这时候单纯的margin就无法便捷的完成目标，我们需要一些特殊手段：这里只推荐position和弹性盒子布局（用的比较多），其他可以根据喜好自己研究一下。

1. position定位

针对单独移动某一元素而不想影响其他元素位置的情况，一般推荐使用position属性设置定位。默认属性值为：static ，常用的属性值有：relative 、absolute 。

1.1 属性值描述

relative，相对定位。设置position为relative时，会在原来元素应该占据的位置预留一个尺寸相当的空白区域（不影响原有的文档流布局），当前元素则悬浮于空白区域正上方。此时该元素获得了额外五个属性：top、right、bottom、left、z-index。
- top，元素相对于原来位置的上边缘的偏移值，取值为像素或百分比。正值向下偏移，负值向上偏移
- right，元素相对于原来位置的右边缘的偏移值，取值为像素或百分比。正值向左偏移，负值向右偏移
- bottom，元素相对于原来位置的底边缘的偏移值，取值为像素或百分比。正值向上偏移，负值向下偏移
- left，元素相对于原来位置的左边缘的偏移值，取值为像素或百分比。正值向右偏移，负值向左偏移
- z-index，表示元素堆叠层级序号，取值整数，值越大越靠上（想象为一摞纸张，值越大越靠上。当没有比他大的值，则排在第一张）
- top和bottom不同时出现，left和right不同时出现
absolute，绝对定位。设置position为absolute时，需要确保该元素的父元素设置了position为relative或absolute，如果没有的话就继续往父元素的父元素找，直到找到一个设置了position为relative或absolute的元素（暂时叫相对父元素），如果最终没有找到，则body为相对父元素。此时该元素脱离文档流，即不占据文档流的位置（注意relative仍占据文档流位置），该元素将单独形成一个图层覆盖在原文档流上方。
- 同样的该元素也将额外获得五个属性：top、right、bottom、left、z-index，元素的四边将相对于 相对父元素 的对应四边进行偏移。
- 同时z-index也基于相对父元素的z-index产生，不是单纯的叠加。（细节问题，篇幅原因不展开描述，私信交流或后期单独写一篇描述）
其他属性自行探索，常用的就记住relative和absolute两个就够。

1.2 案例举例

元素垂直水平居中

html部分

    <div class="box">
      <div class="item"></div>
    </div>

css部分

  .box {
      width: 100vw;
      height: 100vh;
      position: absolute;
    }
  .item {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

解释下这里的代码，box元素设置宽高为视口宽高的100%并设置相对定位。item元素设置宽高100px背景为红色并设置绝对定位，item的上边缘相对于box的上边缘移动了box的50%高度，左边缘相对于box的左边缘移动了box的50%宽度，此时相当于item的左顶点处于box的正中心（思考下这里）。最后需要用到transfrom变换平移，将item分别向左向上平移自身宽高的50%（负值），那么此时item的正中心就和box的正中心重合，完成了元素垂直水平居中。

transform属性会在一些特效样式时常用，大多数时间仅会出现在垂直水平居中案例这种情况里。根据喜好在MDN中查询体验其他特性。

2. 弹性盒子布局

弹性盒子布局，目前用的最多的布局方式，一维空间最好的布局方式。本篇仅介绍常用的属性，详细介绍参考：弹性盒子布局

弹性盒子布局一般用于对一批元素进行整合排布，比如对齐、分隔等操作。

2.1 常规用法

准备一份html素材，在本地测试下如下代码。

    <div class="box">
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
    </div>

简化垂直水平居中写法

.box{
	  width:100vw;
	  height: 200px;
	  // 将父元素设置为弹性盒子，其子元素将依照弹性盒子规则布局。
	  display: flex;
	  // 默认情况下主轴方向上（横向）的对齐方式，center表示水平居中对齐，可选值有：flex-start或start（居左对齐）、flex-end或end（居右对齐）
      justify-content: center;
      // 默认情况下交叉轴（纵轴）的对齐方式，center表示垂直居中对齐，可选值有：flex-start或start（向上对齐）、flex-end或end（向下对齐）
      align-items: center;
}
.item{
	width:100px;
	height:100px;
	background:red;
}

改为纵向轴向

.box{
	  width:200px;
	  height: 100vh;
	  // 将父元素设置为弹性盒子，其子元素将依照弹性盒子规则从左至右布局。
	  display: flex;
	  // 改变弹性盒子轴向为纵向，子元素将从上至下布局。
      flex-direction: column;
	  // 主轴方向上（纵向）的对齐方式，center表示垂直居中对齐，可选值有：flex-start或start（居上对齐）、flex-end或end（居下对齐）
      justify-content: center;
      // 交叉轴（横轴）的对齐方式，center表示水平居中对齐，可选值有：flex-start或start（向左对齐）、flex-end或end（向右对齐）
      align-items: center;
}
.item{
	width:100px;
	height:100px;
	background:red;
}

设置子元素单独属性

.box{
	  display: flex;
	  // 设置子元素与子元素之间间隔为10像素，仅在display值为flex时存在gap属性。
	  gap:10px;
}
.item1{
	background:red;
	// 将class名为item1的元素宽度设置为box总宽度减去item2和item3后的剩余宽度。理解为按照比例分配父元素的剩余空间。详细使用方式查询MDN
	flex:1;
	// 单独设置item1的交叉轴（纵轴）对齐方式为向上对齐。可选值有：center（垂直居中）、flex-end或end（向下对齐）、stretch（拉伸item1的高度为父元素的高度）
	align-self: flex-start;
}

2.2 案例举例

左中右布局，左右各占据300px定宽，中间宽度根据窗口变化动态调整。（比较经典的页面布局方式）

html部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- 总容器 -->
    <div class="container">
      <!-- 左侧区域 -->
      <div class="panel leftPanel"></div>
      <!-- 中间区域 -->
      <div class="panel centerPanel"></div>
      <!-- 右侧区域 -->
      <div class="panel rightPanel"></div>
    </div>
  </body>
</html>

css部分，同级目录下单独创建style.css文件

/* 样式初始化 */
html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 总容器样式 */
.container {
  width: 100%;
  height: 100%;
  display: flex;
}

/* 面板通用样式 */
.panel {
  align-self: stretch;
  width: 300px;
}
/* 左侧面板样式 */
.leftPanel {
  background: greenyellow;
}

/* 中间面板样式 */
.centerPanel {
  background: pink;
  flex: 1;
}
/* 右侧面板样式 */
.rightPanel {
  background: orangered;
}