WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记

WEB前端基础

当前部分是基于HTML与CSS总结，后续有JavaScript更新~

文章目录

WEB前端基础

一、HTML概述(阶段1 入门概述)

1、HTML

超文本标记语言

二、第一个HTML页面

1、HTML基本结构

HTML模板简要说明

声明
HTML基本结构

2、HTML元素

元素
1. 闭合元素
  1. ‘’
2. 空元素
  1. ‘’
标签
HTML元素属性
1. 属性名
2. 属性值

3、HTML头部

元素

‘
’元素：定义HTML页面中所以相对URL的根URL。
‘元素：定义HTML页面引入的外部资源
- ‘’
- ‘’
'元素：定义HTML页面的css样式
’元素：定义HTML页面的元数据信息，例如编码格式，作者，关键字等
- ‘’
‘

4、HTML注释

三、 CSS概述

层叠样式表

四、如何使用css

1、内联样式

“
这是测试内容
”

2、内嵌样式表

3、外联样式表

创建一个为.css的文件
将这个.css文件放到link标签中
1. “”
  1. rel属性：用来定义引入文件与当前HTML页面的关系
  2. href属性：定义映入的URL

4、css语法结构

选择器
声明块
注释
1. /* 内容 */

五、基本选择器(阶段2 CSS选择器)

1、元素(类型)选择器

元素名{

属性：属性值；

}

2、类(Class)选择器

.className{

属性：属性值；

}

3、ID选择器

#ID{

属性：属性值；

}

4、通用(通配符)选择器

*{

属性：属性值；

5、属性选择器

[attr]属性选择器：通过HTML元素的attr属性名来定位具体的HTML元素
[attr=value]属性选择器：通过HTML元素的attr属性名并且属性值为value来定位具体HTML元素
[attr~=value]属性选择器：通过HTML元素的attr属性名，属性值是一个以空格分隔的列表并且value值是该值列表中的之一，来定位具体的HTML元素
[attr|=value]属性选择器：通过HTML元素的attr属性名并且属性值为value或者以value-为前缀来定位具体HTML元素
[attr^=value]属性选择器：通过HTML元素的attr属性名并且属性值是以value开头来定位的HTML元素
[attr$=value]属性选择器：通过HTML元素的attr属性名并且属性值是以value为结束来定位具体的HTML元素
[attr*=value]属性选择器：通过HTML元素的attr属性名并且属性值是包含value来定位具体HTML元素

选择器的优先级

分配给指定的CSS声明的一个权重，由匹配的选择器中的每一种选择器类型的数值决定
当优先级与多个CSS声明中的任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义

选择器类型的权重

通配符选择器的优先级为0
类型选择器的优先级为1
类选择器和属性选择器的优先级为10
ID选择器的优先级为 100
内联样式的优先级为1000

内联样式总会覆盖内嵌样式表和外联样式表中的任何样式

六、层级选择器

1、层级选择器种类

后代选择器
1. 选择器1 选择器2 {
  属性 : 属性值;
  }
子级选择器
1. 选择器1>选择器2 {
  属性 : 属性值;
  }
相邻兄弟选择器
1. 选择器1+选择器2 {
  属性 : 属性值;
  }
普通兄弟选择器
1. 选择器1~选择器2 {
  属性 : 属性值;
  }

七、组合选择器

1、组合并集选择器

选择器1, 选择器2, ... ... {
属性 : 属性值;
}

2、组合交集选择器

八、伪类选择器

1、伪类选择器的种类

动态伪类选择器：常与元素配合使用，用来表示用户的某种行为状态
目标伪类选择器：常与 <a> 元素配合使用，用来定位当前 HTML 页面中唯一一个目标元素。
元素状态伪类选择器：常与表单组件元素配合使用，用来表示表单组件的某种状态。
结构伪类选择器：常与 <table> 元素配合使用，利用 HTML 元素之间的关系定位目标元素。
否定伪类选择器：用来定位与指定选择器不匹配的 HTML 元素。

2、否定伪类选择器

:not(selector) { 属性 : 属性值; }

3、结构伪类选择器

一、:first-child与:last-child

：first-child是定义第一个子级元素
：last-child是定义最后一个子级元素
- td:first-child是用来定位所以td元素第一个作为子级元素的，而不是定位td元素的第一个子级元素

二、:first-of-type与:last-of-type

定位一组同类型的兄弟元素的第一个元素，不管位置如何

三、:nth-child(n)与:nth-last-child(n)

:nth-last-child是从一组元素的结尾开始的
- 数字值
- 关键字
  - odd表示奇数
- 格式an+b

四、：empty

定位没有任何子级元素或文本内容的元素

九、伪元素选择器

1、语法

选择器::伪元素 { 属性 : 属性值; }

伪元素选择器只能和基本选择器配合使用，并且一个选择器只能使用一个伪元素选择器，如果要为一个选择器增加多个伪元素选择器需要分别编写。

2、::before 和 ::after 伪元素

::before 伪元素的作用是作为定位的 HTML 元素的第一个子级元素，::after 伪元素的作用是作为定位的 HTML 元素的最后一个子级元素。

3、::first-letter 伪元素

为第一个字设置格式

4、::first-line 伪元素

为第一行文本设置样式

5、::selection 伪元素

十、颜色(阶段3：颜色与单位)

1、颜色值的类型

色彩关键字
RGB色彩模式
HSL色彩模式

十六进制符号#RRGGBB
函数符rgb

HSL色彩模式

是一种将RGB色彩模型中的点在圆柱坐标系中的表示法

**H **表示色调，其值范围为 0 ~ 360 之间的一个角度
S 表示饱和度，其值范围为 0% ~ 100% 之间的百分值。
L 表示亮度，其值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色

2、透明度

如果值为 0 或 0.0 则表示完全透明
如果值为 0.5 则表示半透明
如果值为 1 或 1.0 则表示不透明

十一、单位

1、CSS单位

绝对长度单位
- px
相对长度单位
- em父元素的字体大小
- ex字符"x"的高度
- ch数字"0"的宽度
- rem根元素的字体大小
- lh元素的line-height
- vw视窗宽度的1%
- vh视窗高度的1%
- vmin视窗较小尺寸的1%
- vmax视图大尺寸的1%

十二、结构化元素(阶段4：HTML—CSS文本)

1、结构化元素

段落p
粗体b
斜体i
上标元素sup
下标元素sub
换行符br
水平线元素hr

2、HTML5结构化元素

article元素

用来定义HTML页面中可独立分配或可以复用的结构
section元素

定义页面中的独立部分
nav元素

定义页面中的导航链接，菜单，目录和索引
aside元素

侧边栏或者标注框
header元素
main元素
footer元素

3、转义字符


原义字符	描述	转义字符
``	空格	` `
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`"`	引号	`"`
`©`	版权（copyright）	`©`
`®`	注册商标	`®`
`™`	商标	`™`
`×`	乘号	`×`
`÷`	除号

十三、语义化元素

1、什么是语义化元素

具有具体含义的元素

strong加粗
em强调，斜体
blockquote缩进，引用
q加引号
cite引文元素
dfn定义元素
address地址元素
del、ins内容修改元素

十四、字体样式

1、字体样式

font-family
- 设置一个字体名或字体族名
  - 通用字体族名
    - serif：带衬线字体
    - sans-serif：无衬线字体
    - monospace：等宽字体
    - cursive：草书字体
    - fantasy：具有特殊艺术效果的字体
- 设置多个字体名或字体族名
font-size
- 字体大小
  - 绝对大小值
  - 相对大小值
    - larger
    - smaller
  - 长度值
    - px
    - em
    - rem
    - ex
  - 百分比值
font-weight
- 粗细程度
  - 绝对值
    - normal=400
    - bold=700
  - 相对值
    - lighter：细
    - bolder：粗
  - 数字值
font-style
- italic
- oblique
font
- 作为简写形式
  - font-style，font-variant，font-weight属性必须定义在font-size属性之前
  - line-height属性必须定义在font-size之后
  - font-family属性必须最后定义
- 系统字体
  - caption用于标题控件的系统字体
  - icon用于标签图标的系统字体
  - menu菜单中的
  - message-box对话框
  - small-caption小标题控件
  - status-bar窗口转态栏

2、文本样式

text-decoration文本装饰
- text-decoration-line：元素文本修饰类型
- text-decoration-color：文本修饰线的颜色
- text-decoration-style：线的样式
line-height行间距
- normal关键字
  - 默认为1.2
- 数字值
- 长度值
- 百分比值
letter-spacing字母间距
- normal
- 长度值：可为负
word-spacing单词间距
- normal
- 长度值
- 百分比值
text-align水平对齐方式
- start：左到右left，right
- end：左到右right，left
- left
- right
- center
- justify：文字向两侧对齐，对最后一行无效
- justify-all：强制使最后一行两端对齐
vertical-align垂直对齐方式
- 应用于内联元素
  - 相对于父级元素的值
    - baseline：使元素基线跟父元素的基线对齐
    - sub：使元素基线跟父元素下标基线对齐
    - super：使元素基线跟父元素上标基线对齐
    - text-top：使元素顶部于父元素字体顶部对齐
    - text-bottome：使元素底部与父元素字体底部对齐
    - middle：使元素的中部与父元素的基线加上父元素 x-height 的一半对齐
  - 相对于行的值
    - top：使元素及其后代元素的顶部与整行的顶部对齐。
    - bottom：使元素及其后代元素的底部与整行的底部对齐
- 应用于表单单元格的值
  - baseline
  - top
  - middle
  - bottom
text-indent文本缩进
- 长度值：可为负
- 百分比值
- each-line：文本缩进影响第一行
- hanging：反转缩进：除了第一行
text-shadow文本阴影
- color：颜色
- offset-x：阴影在水平方向的偏移量
  - 小于0,左偏移
  - 等于0，不偏移
  - 大于0，右偏移
- offset-y：阴影在垂直方向的偏移量
  - 上偏移，不偏移，下偏移
- blur-raduis：阴影模糊半径
  - 值越大，模糊半径越大
overflow-wrap
word-wrap，word-break文本换行
- break-all
- keep-all
white-space处理空白
- normal
- nowrap
- pre
- pre-wrap
- pre-line
- break-spaces

十五、盒子模型组成部分

content内容区
- 显示内容的区域
padding内边距
- 内容到边框的距离
border边框
- 包含内容区到内边界
margin外边距
- 盒子模型的边框到盒子模型边框的距离

十六、块级元素与内联元素

1、块级元素

定义：每个元素独占一行，块级元素之间是垂直方向排列
举例：h1~h6、p段落元素、div元素等都是块级元素
div元素：无语义化元素
***可以***利用css的width跟height来设置效果

2、内联元素

定义：每个内联元素不会产生换行，即每一个内联元素都不是独占一行的
举例：a超链接元素、td单元格元素、span元素等
span元素：无语义化元素
***不可以***用css的width跟height来设置效果

3、行内块级元素

是前面两者的综合
每一个行内块级元素不会独占一行，即水平方向进行排列。
可以通过css的width和height设置该元素的宽度和高度
盒子模型中的边框、内边距外边框都是有效的
举例：img元素、button 元素
如果该元素包含文本内容的话，他的对齐方式是按照文本内容进行对齐的

十七、CSS中的盒子模型

1、盒子模型的大小

min-width
max-width
min-height
max-height

2、盒子阴影

box-shadow
- color：可选项
- offset-x：必选项，盒子边框的阴影在水平方向的偏移量
  - 值小于0：左偏移
  - 值等于0：无偏移
  - 值大于0：右偏移
- offset-y：必选项，在垂直方向上的偏移量
  - 值小于0：上偏移
  - 值等于0：无偏移
  - 值大于0：下偏移
- blur-raduis：可选项，设置盒子边框阴影模糊半径
- spread-radius：可选项，设置盒子边框的阴影扩散半径

3、border属性

border-width：边框宽度
border-style：边框样式
border-color：边框颜色
border-top：顶部边框
border-right：右边的边框
border-bottom：底部边框
border-left：左边边框

4、边框宽度

border-top-width：顶部的边框宽度
border-right-width：右边的边框宽度
border-bottom-width：底部的边框宽度
border-left-width：左边的边框宽度
border-width：一个值
border-width：上下值、左右值
border-width：上值、左右值、下值
border-width：上、右、下、左

5、边框颜色

border-top-color：顶部边框颜色
border-right-color：右边边框的颜色
border-bottom-color：底部边框的颜色
border-left-color：左边的边框颜色
border-color：一个值
border-color：上下值、左右值
border-color：上值、左右值、下值
border-color：上、右、下、左

6、边框样式

border-style
- none：不显示边框，优先级最低
- hidden：不显示边框，优先级最高
- dotted：显示为一系列原点
- dashed：显示为一系列短的方形虚线
- solid：实线
- double：双实线
- groove：显示为有雕刻效果的边框，样式跟ridge相反
- ridge：有浮雕效果的边框，跟groove相反
- inset：有陷入效果的边框，与outset相反
- outset：突出效果的边框，与inset相反
border-top-style···
border-style···

7、边框圆角

CSS3属性
border-radius
- radius：圆形的半径
- horizontal-radius、vertical-radius：椭圆形的长半径和短半径
  - horizontal-radius：表示椭圆形的水平方向的半径
  - vertical-radius：表示椭圆形的垂直方向半径
border-top-left-radius：设置左上角的圆角效果
border-top-right-radius：右上角的圆角效果
border-bottom-right-radius：右下角的圆角效果
border-bottom-left-radius：左下角的圆角效果
border-radius：一个值
border-radius：左上右下、右上左下
border-radius：左上、右上和左下、右下
border-radius：左上、右上、右下、左下

8、边框图像

border-image

十八、表格元素

1、基本结构

table：表格的容器
tr：一行
td：单元格
th：同td，只是字体加粗

2、标题单元格

th元素的scope属性定义该标题单元格相关联的单元格，是一个枚举类型

row：当前标题单元格关联一行的所有单元格
col：列
rowgroup：行关联
colgroup：列关联
auto：浏览器自动分配

3、表格的标题

caption：在表格上面居中显示

4、跨行与跨列

合并行单元格

colspan：列数
rowspan：行数

5、长表格

thead元素：表格的标题单元格的行
tbody元素：表格的主题
tfoot元素：表格一组个列的汇总行

十九、表格样式

1、表格布局

table-layout
- 设置表格布局算法
  - auto：列宽度由单元格内容设置
  - fixed：列宽度由表格宽度和列宽度决定
border-collapse
- separate
  - 设置表格的边框是否被合并为一个单一的边框
- collapse
  - 边框合并为一个单一的边框
- inherit
  - 规定从父元素继承
border-spacing
- 设置相邻单元格边框间距离

2、表格标题

caption-side
- bottom
  - 标题显示在表格的下方
- top
  - 默认值，上方

3、处理空白单元格

empty-cells
- show:默认值
- hide：边框和背景被隐藏
- 这个属性只有在border-collapse属性值为separate时有效

4、单元格边框

border-collapse
- separate：默认值，单元格有默认独立的边框
- collapse：相邻的单元格公用一条边框
border-spacing
- 单值：同时设置水平垂直距离
- 双值：分别设置水平跟垂直距离

二十、计数器

1、counter-reset属性

none;
chapter-count 2;

2、counter-increment属性

none;
chapter-count 2;

3、counter函数

counter(custom-ident,counter-style)

常常与 ::after，::before伪元素配合使用

custom-ident参数：计数器名称
counter-style参数：表示显示的样式

4、counters函数

counter(custom-dient,string,conter-style)

custom-dient参数：计数器名称
string参数：分隔符，数量不限
counter-style参数：表示显示的样式

二十三、显示与隐藏

1、display属性

none：将当前元素设置为隐藏，但是不占用页面空间。
block：将元素设置为块级元素
inline：将元素设置为内联元素
inline-block：将元素设置为行内元素

display:table;属性显示表格
1. table-cell -> td
2. table-row -> tr

2、visibility属性

hidden：将当前元素设置为隐藏，但是占用页面空间。
visible：将当前元素显示

二十四、内容溢出

1、溢出

指定元素的文本超出元素范围
指定元素的图片超出元素范围
指定元素的子级元素超出元素范围

子元素的大小超出父元素的区域

overflow属性
- visible：默认值
- hidden：内容被修剪，超出的部分不可见。溢出的部分被隐藏
- scroll：提供一个滚动条，显示溢出的内容----始终提供滚动条
- auto：溢出加滚动条，不溢出不加
文本内容占满会自动换行

1、当一个单词的长度过长使，浏览器不会自动换行的。

2、white-space：nowrap；强制一行输出
overflow-x属性
- visible
- hidden
- scroll
- auto
overflow-y属性
- visible
- hidden
- scroll
- auto
text-overflow属性

这个属性使用的前提是必须使用overflow属性才可。
- ellipsis：显示省略号代表被修剪的文本
- clip：修剪文本
- string：使用给的的字符串来代表被修剪的文本

二十五、浮动

1、定位position

通过css样式属性设置HTML的位置

文档流

元素在排列中的所占位置的规则；

将HTML页面中的元素自上问下分成一行一行，并在每行中按从左向右挨次排放元素。

2、浮动float

脱离文档流

float

1、当前元素设置为浮动后，只影响当前元素后面的所有元素

2、所有元素设置为浮动后，块级元素排列顺序会变成水平方向的排列
- none：默认值，不浮动
- left：左浮动
- right：右浮动

3、块级元素设置为浮动

1、块级元素设置为浮动后：

宽度或高度为默认0 或者所有后代元素宽度高度之和

2、多个块级元素设置为浮动后：

垂直方向排列变为水品方向排列，如果占满父级元素宽度的100%，会自动换行

4、内联元素设置为浮动

1、内联元素的默认宽度高度：

是内容的宽高，width-height无效

2、设置为浮动后：

width-height有效

多个内联元素设置为浮动后，变成水平方向的排列

5、行内块级元素设置为浮动

1、设置为浮动后：

元素之间的空白间隙去掉

6、浮动的特殊情况

父子级浮动

为子级元素设置浮动，子级元素浮动不能超出父级元素范围
兄弟元素浮动

为下一个兄弟元素设置为浮动，下一个兄弟元素不会超过上一个兄弟元素的位置
文本内容与浮动元素的效果

文本内容不会被浮动的元素所覆盖，而是环绕在浮动元素的周围

7、清除浮动clear

设置元素是否显示在其元素之前的下方

1、兄弟之间的元素，上一个元素设置为浮动，下一个元素没有设置为浮动
* 操作：为下一个没有设置浮动的元素，设置clear属性
* 结果：下一个没有浮动的元素显示在上一个浮动的元素的下方
2、兄弟之间的元素，为所有元素设置为浮动

操作：为中间的元素设置浮动

结果：当前清除浮动的元素显示在上一个浮动元素的下方：影响当前元素后面的所有元素的布局

none：不清除浮动
left：清除左浮动
right：清除右浮动
both：清除所有浮动

8、伪元素清除浮动

/* new */ 

.clearfix::before, .clearfix::after{

	overflow:hidden;

	display:table;

	visibility:hitten;

	content: ' ';

	clear:both;

}

9、高度坍塌

1、父子级关系

2、父级元素没有设置高度

3、子级元素设置为浮动

块级格式化上下文（开启BFC环境）
- 将元素设置为浮动元素
- 行内块级元素：display：inline-block；
- overflow：hidden；
- position属性设置为绝对定位

二十六、定位

1、定位

指定元素在HTML页面中定位的方式

static：静态定位
absolute：绝对定位
fixed：固定定位
relative：相对定位

2、absolute绝对定位

开启绝对定位

1、当前元素脱离文档流

2、如果不去设置位置的偏移量，该元素位置不会变化

绝对定位的情况
- 1、当前元素的父级元素是body的话，相对于当前页面定位
- 2、如果当前元素的父级元素不是body的话并且父级元素没有开启定位，相对于当前页面定位
- 3、如果当前元素的父级元素不是body并且父级元素开启定位，相对于父级元素位置定位
偏移量
- 绝对定位的bottom值
  - 1、默认加载完毕后的位置->相对于当前浏览器窗口的底部
  - 2、绝对定位依旧是相对于页面的定位，而不是相对于浏览器窗口定位

3、fixed固定定位

开启固定定位–相对于浏览器窗口定位

4、relative相对定位

开启相对定位

相对于自身元素原来的位置的定位

5、z-index堆叠

前提：开启定位

指定了一个具有定位元素及其子代元素的z-order

属性值越大，元素越在上方

二十七、布局

1、居中布局

水平居中

第一种：水平方向居中

主要代码

display:inline-block + text-align:center

text-align属性：是一个继承属性->后代元素都具有

问题：导致所有后代文本都居中

display-inline-block：将当前元素设置成行内块级元素

问题：是以文本内容进行对齐

说明：text-align样式属性对行内块级元素有效

代码实现：
HTML代码：
<div class="parent">
	<div class="child"></div>
</div>
CSS样式：
.parent{
	text-align:center;
}
.child{
	display:inline-block;
}
* 问题
	*由于使用了text-align:center;导致文本内容也实现水平居中
		可以设置text-align:left；
	*由于使用了display:inline-block;导致存在行内块级元素问题
第二种：水平方向居中

主要代码

table+margin 组合实现

代码实现
HTML代码：
<div class="parent">
	<div class="child"></div>
</div>
CSS代码:
.child{
	display:block或table；
	margin:0 auto;
}
* 问题
	* 当前元素实现水平方向居中的元素不能脱离文档流
	*当前实现水平方向居中的元素的宽度不能是父级元素宽度的100%
第三种：水平方向居中

主要代码

absolute + transform（translate）组合实现
第一种情况：父级元素不是<body>
HTML代码：
<div class="parent">
	<div class="child"></div>
</div>
CSS代码：
.parent {
	position:relative;
}
.child {
	position:absolute;
	left:50%;
	transform:translate(-50%);
}
第二种情况：父级元素是<body>
HTML代码：
<div class="parent">
	<div class="child"></div>
</div>
CSS代码：
.child {
	position:absolute;
	left:50%;
	transform:translate(-50%);
}
  * 问题
	*如果父级元素不是<body>，必须为父级元素开启定位
	*绝对定位脱离文档流
第四种：水平方向居中

relative + transform

垂直居中

第一种：垂直方向居中

主要代码

display：table-cell：显示效果等同于表格中的单元格

单元格中的内容允许水平或垂直方向的对齐设置

vertical-align：middle：垂直方向的居中
HTML代码：
<div class="parent">
	<div class="child"></div>
</div>
CSS代码：
.parent {
	display:table-cell;
	vertical-align:middle;
}
第二种：垂直方向居中

主要代码

absolute + transform
HTML代码：
<div class="parent">
	<div class="child"></div>
</div>
CSS代码：
.parent {
	position:relative;
}
.child {
	position：absolute；
	top：50%；
	transform：translateY(-50%);
}
第三种：垂直居中

主要代码

relative + transform
HTML代码：
<div class="parent">
	<div class="child"></div>
</div>
CSS代码：
.child {
	position:relative;
	top：50%；
	transform：translateY(-50%);
}

局中布局

第一种

主要代码

absolute + transform
HTML代码：
<div class="parent">
	<div class="child"></div>
</div>
CSS代码：
.parent {
	position:relative;
}
.child {
	position:absolute;
	top：50%；
	left:50%
	transform：translate(-50%,-50%);
}
第二种

主要代码

display:table-cell + vertical-align:middle

display:table或block + margin:0 auto

2、多列布局

两列布局

两列布局

第一种：float + margin-left
第二种：float + margin-left（加强版）
第三种：float + overflow:hidden
第四种：display:table + table-layout:fixed表格布局 + display:cell

三列布局

双飞翼布局
- 把内容区放到最前
圣杯布局
- 在三列的前提下加上一个容器container

3、CSS3的多列布局

等分布局

第一种：float + width
第二种：display：table + display：table-cell
第三种：box-sizing：border-box；padding-left

第四种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .container {
            width: 1060px;
            border: 5px solid red;
        }
        .parent {
            width: 1075px;
            height: 500px;
            /* background-color: lightskyblue; */
            position: relative;
            left: -15px;
        }
        .col1,.col2,.col3,.col4 ,.col5{
            width: 200px;
            box-sizing: border-box;
            float: left;
            height: 500px;
            margin-left: 15px;
        }
        .inner {
            height: 500px;
        }
        .col1{
            background-color: lightpink;
        }
        .col2 {
            background-color: lightgreen;
        }
        .col3 {
            background-color: lightgray;
        }
        .col4 {
            background-color: lightgoldenrodyellow;
        }
        .col5 {
            background-color:magenta;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="parent">
            <div class="col1">
            </div>
            <div class="col2">
            </div>
            <div class="col3">
            </div>
            <div class="col4">
            </div>
            <div class="col5">
            </div>
        </div>
    </div>
</body>
</html>

等高布局

表格法：
- display：table；+ display：table-cell

第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .parent {
            
            width: 800px;
            border: 1px solid red;
            overflow: hidden;
        }
        .left ,.right{
            float: left;
            padding-bottom: 999px;
            margin-bottom: -999px;
        }
        .left {
            width: 300px;
            background-color: red;
        }
        .right {
            width: 400px;
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">啊啊啊啊</div>
        <div class="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur dolorum amet dignissimos earum. Reiciendis modi autem repellendus dolorem odio quos, sed deleniti molestias hic quod facere vitae, quidem ipsum sint.</div>
    </div>
</body>
</html>

CSS3的多列布局

column-count
column-gap
- 默认为：1em
- 可以指定
column-width
column-rule
column-span横跨多列
- none：不跨列
- all：夸所有列
column-fill列的填充
- auto：默认
- balance：表示列的高度根据内容最多的一列