【前端开发入门】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后的剩余宽度。理解为按照比例分配父元素的剩余空间。详细使用方式查询MDNflex: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;
}