WEB前端基础

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

文章目录

WEB前端基础
- 一、HTML概述(阶段1 入门概述)
- - 1、HTML
- 二、第一个HTML页面
- - 1、HTML基本结构
  - 2、HTML元素
  - 3、HTML头部
  - 4、HTML注释
- 三、 CSS概述
- 四、如何使用css
- - 1、内联样式
  - 2、内嵌样式表
  - 3、外联样式表
  - 4、css语法结构
- 五、基本选择器(阶段2 CSS选择器)
- - 1、元素(类型)选择器
  - 2、类(Class)选择器
  - 3、ID选择器
  - 4、通用(通配符)选择器
  - 5、属性选择器
- 六、层级选择器
- - 1、层级选择器种类
- 七、组合选择器
- - 1、组合并集选择器
  - 2、组合交集选择器
- 八、伪类选择器
- - 1、伪类选择器的种类
  - 2、否定伪类选择器
  - 3、结构伪类选择器
- 九、伪元素选择器
- - 1、语法
  - 2、::before 和 ::after 伪元素
  - 3、::first-letter 伪元素
  - 4、::first-line 伪元素
  - 5、::selection 伪元素
- 十、颜色(阶段3：颜色与单位)
- - 1、颜色值的类型
  - 2、透明度
- 十一、单位
- - 1、CSS单位
- 十二、结构化元素(阶段4：HTML—CSS文本)
- - 1、结构化元素
  - 2、HTML5结构化元素
  - 3、转义字符
- 十三、语义化元素
- - 1、什么是语义化元素
- 十四、字体样式
- - 1、字体样式
  - 2、文本样式
- 十五、盒子模型组成部分
- 十六、块级元素与内联元素
- - 1、块级元素
  - 2、内联元素
  - 3、行内块级元素
- 十七、CSS中的盒子模型
- - 1、盒子模型的大小
  - 2、盒子阴影
  - 3、border属性
  - 4、边框宽度
  - 5、边框颜色
  - 6、边框样式
  - 7、边框圆角
  - 8、边框图像
- 十八、表格元素
- - 1、基本结构
  - 2、标题单元格
  - 3、表格的标题
  - 4、跨行与跨列
  - 5、长表格
- 十九、表格样式
- - 1、表格布局
  - 2、表格标题
  - 3、处理空白单元格
  - 4、单元格边框
- 二十、计数器
- - 1、counter-reset属性
  - 2、counter-increment属性
  - 3、counter函数
  - 4、counters函数
- 二十三、显示与隐藏
- - 1、display属性
  - 2、visibility属性
- 二十四、内容溢出
- - 1、溢出
- 二十五、浮动
- - 1、定位position
  - 2、浮动float
  - 3、块级元素设置为浮动
  - 4、内联元素设置为浮动
  - 5、行内块级元素设置为浮动
  - 6、浮动的特殊情况
  - 7、清除浮动clear
  - 8、伪元素清除浮动
  - 9、高度坍塌
- 二十六、定位
- - 1、定位
  - 2、absolute绝对定位
  - 3、fixed固定定位
  - 4、relative相对定位
  - 5、z-index堆叠
- 二十七、布局
- - 1、居中布局
  - - 水平居中
    - 垂直居中
    - 局中布局
  - 2、多列布局
  - - 两列布局
    - 三列布局
  - 3、CSS3的多列布局
  - - 等分布局
    - 等高布局
    - CSS3的多列布局
  - 4、全屏布局

一、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：表示列的高度根据内容最多的一列

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

WEB前端基础

文章目录

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

1、HTML

二、第一个HTML页面

1、HTML基本结构

2、HTML元素

3、HTML头部

4、HTML注释

三、 CSS概述

四、如何使用css

1、内联样式

2、内嵌样式表

3、外联样式表

4、css语法结构

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

1、元素(类型)选择器

2、类(Class)选择器

3、ID选择器

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

5、属性选择器

六、层级选择器

1、层级选择器种类

七、组合选择器

1、组合并集选择器

2、组合交集选择器

八、伪类选择器

1、伪类选择器的种类

2、否定伪类选择器

3、结构伪类选择器

九、伪元素选择器

1、语法

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

3、::first-letter 伪元素

4、::first-line 伪元素

5、::selection 伪元素

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

1、颜色值的类型

2、透明度

十一、单位

1、CSS单位

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

1、结构化元素

2、HTML5结构化元素

3、转义字符

十三、语义化元素

1、什么是语义化元素

十四、字体样式

1、字体样式

2、文本样式

十五、盒子模型组成部分

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

1、块级元素

2、内联元素

3、行内块级元素

十七、CSS中的盒子模型

1、盒子模型的大小

2、盒子阴影

3、border属性

4、边框宽度

5、边框颜色

6、边框样式

7、边框圆角

8、边框图像

十八、表格元素

1、基本结构

2、标题单元格

3、表格的标题

4、跨行与跨列

5、长表格

十九、表格样式

1、表格布局

2、表格标题

3、处理空白单元格

4、单元格边框

二十、计数器

1、counter-reset属性

2、counter-increment属性

3、counter函数