CSS 基础语法 + 弹性盒子 - 指南

CSS(Cascading Style Sheet)是用于控制页面样式与布局并允许样式信息与网页内容相分离的一种标记性语言。如果将HTML类比为人，那么CSS就是我们身上的衣服和化妆品！

CSS由选择器，属性和属性值组成：

selector{

prosperties:value;

}

选择器：用于定义CSS样式名称属性：例如网页中的字体样式、字体颜色等属性值：例如字体的大小、颜色等属性和属性值必须写在{}内，且用“:”隔开每写完一个完整的属性和属性值，必须用“;”隔开如果一个属性有多个属性值，每个属性值用space隔开引入CSS1.内联引入每个HTML元素都拥有一个

It's been a long day without you, my friend.

And I'll tell you all about it when I see you again.

3.外部引入 在我们实际开发过程中，项目的页面不会少，如果我们希望所有的页面都使用同一个CSS样式，那么我们就需要将CSS样式单独放在一个文件中（新建一个以.css为后缀名的样式表）然后通过标签引入到我们的页面中，这是你还会发现，当我们需要对所有页面进行样式修改时，就只需要修改一个CSS文件，不用对所有页面逐个修改！

CSS选择器1.元素选择器对HTML元素进行选取，如

、

等

p{

color:red;

font-size:20px;

}

ul{

list-style-type:none;

}

a{

text-decoration:none;

}

2.类选择器通过class属性确定类名进行选取，相同类名的元素含有相同的CSS样式

我是一个段落

这是一个容器

.title{

color:red;

font-size:20px;

text-align:center;

}

类选择器前需要加.在vscode中，属性名+.+类名，Tab自动补全<元素 class="类名">的形式3.ID选择器 以上两种都是对同一类元素进行选取和操作，当我们需要单独为一个元素进行操作时，通过id属性确定ID名进行选取，如

、

，相同ID名的含有相同的CSS样式

我是一个段落

这是一个容器

#title{

color:red;

font-size:20px;

text-align:center;

}

#container{

background-color:yellow;

}

⚠️ ID选择器前需要加#网页常用样式字体font-family字体font-size字号像素（px）点数（pt）英寸（in）、厘米（cm）、毫米（mm）倍数（em）百分比（%）font-weight字重正常（normal）：400加粗（bold）：700更粗（bolder）更细（lighter）数字（100~900）：只能写成整百的数字color颜色相关内容前文有相应介绍，不再赘述

color_namehex_numberrgb_numberrgba_numbertext-decoration文本修饰none：无修饰underline：下划线overline：上划线line-through：中划线blink：闪烁段落letter-spacing字间距normal：正常length：长度word-spacing词间距normal：正常length：长度text-indent缩进length：长度%：百分比text-align水平对齐left：左对齐right：右对齐center：居中对齐justify：两端对齐vertical-align垂直对齐top：顶部对齐middle：垂直居中对齐bottom：底部对齐line-height行间距normal：正常number：与当前字体尺寸相乘来设置行间距length：固定行间距边框border-style边框线型none：无边框hidden：隐藏边框dotted：点状边框dashed：虚线边框solid：实线边框double：双线边框

border-style:dotted solid double dashed;

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

border-style:dotted solid double;

上边框是点状

右边框和左边框是实线

下边框是双线

border-style:dotted solid;

上边框和下边框是点状

右边框和左边框是实线

border-style:dotted;

四个边框均为点状

border-color边框颜色border-width边框宽度盒子模型

根据上图，俯视这个盒子，内边距（padding）可以理解为盒子里装的东西和边框的距离；而边框（border）就是盒子本身；内容（content）就是盒子中装的东西；外边距就是边框外面自动留出的一段空白；而填充（padding）就是怕盒子里装的东西损坏而添加的泡沫或者其他抗震材料；至于边界（margin）则说明盒子摆放时不能全部堆在一起，要留有一定空隙保持通风，同时方便取出！

外边距设置使用margin属性设置外边距，margin边界环绕在该元素的content区域四周，如果margin为0，则margin边界与border边界重合。

属性描述margin-top上外边距margin-right右外边距margin-bottom下外边距margin-left左外边距margin属性值仍然有四个参数，对应上、右、下、左即顺时针方向旋转

当两个垂直外边距相遇时，他们将会形成一个外边距，合并后的外边距的高度等于两个外边距的最大高度（注意不是外边距相加）

内边距设置使用padding属性设置内边距，内边距在边框和内容区之间，padding属性接受长度值和百分比，但不允许使用负值。

属性描述padding-top上内边距padding-right右内边距padding-bottom下内边距padding-left左内边距弹性盒子默认流式布局中，块级元素（如div）会独占一行，多个div会垂直堆叠，无法横向排列；而当我们使用float和inline-box进行横向排列时，会带来间距、对齐、父元素高度塌陷等问题。

当一种页面需要适应不同的屏幕大小以及设备类型时，弹性盒子可以确保元素拥有恰当行为的布局方式，这样的布局模型能提供一种更有效的方式来对一个容器中的子元素进行排列、对齐、分配空白空间！

只要给容器设置display: flex;任何一个容器我们都可以设置为弹性盒子

设为flex布局以后，子元素的float、clear、vertical-align属性将失效

flex-direction：设置排列方向（沿纵轴还是横轴）（正序还是倒序）

值描述动画演示row默认值，水平显示，起点在左端1️⃣2️⃣3️⃣4️⃣_ _ _ _row-reverse盒子方向相反，且起点在右端_ _ _ _4️⃣3️⃣2️⃣1️⃣column垂直显示，起点在上端无column-reverse盒子方向相反，且起点在下端无justify-content：在主轴（横轴）上的对齐方式值描述动画演示flex-start起点在左端1️⃣2️⃣3️⃣4️⃣_ _ _ _flex-end终点在右端_ _ _ _1️⃣2️⃣3️⃣4️⃣center居中对齐_ _1️⃣2️⃣3️⃣4️⃣ _ _space-between项目之间的间隔相等，紧贴左右两端1️⃣ _ 2️⃣ _ 3️⃣ _ 4️⃣space-around每个项目两侧的间隔相等_ 1️⃣ _ 2️⃣ _ 3️⃣ _ 4️⃣ _space-evenly项目之间的间隔相等，且项目两侧的间隔相等_ 1️⃣ _ 2️⃣ _ 3️⃣ _ 4️⃣ _align-items：在侧轴（纵轴）上的对齐方式值描述flex-start起点在上端flex-end终点在下端center居中对齐baseline基线对齐stretchauto尽可能接近所在行的尺寸flex-wrap：弹性盒子的换行方式值描述nowrap默认值，不换行，盒子会被压缩wrap换行，第一行在上方wrap-reverse反向换行，第一行在下方align-content：多行情况下侧轴（纵轴）的对齐方式值描述stretch默认值auto，将占满整个容器的高度flex-start起点在上端flex-end起点在下端center上下居中对齐space-between项目之间的间隔相等space-around每个项目两侧的间隔相等该属性只在多行（flex-wrap: wrap或flex-wrap: wrap-reverse）的情况下生效！

下面是使用CSS和HTML创建的“待办事项”demo！

Richard的todolist

添加

吃饭

删除

睡觉

删除

学习

删除

封面来源：Learn CSS Flexbox in 20 Minutes (Course)