css3

为实现内容与样式分离；用 CSS 调整页面的布局，元素的颜色和尺寸，添加背景图像和边框，创建动画效果等

Copy
selector {
property: value;
}

/*标签选择器:这个CSS规则将应用到HTML文档中所有的h1元素上，使得这些h1元素的文字颜色为蓝色，字体大小为24像素*/
h1 {
color: blue;
font-size: 24px;
}

/*类选择器*/
/* 变红色 */
.block1 {
color: red;
}

/*id选择器*/
/* 变红色 */
#id1 {
color: red;
}

/*通配符选择器:清除所有的元素标签的内外边距*/
* {
margin: 0;
padding: 0;
}

/*属性选择器*/
/*css2起*/
[attribute] { property: value; }/*匹配所有有 attribute属性的元素*/
[attribute="value"] { property: value; }/**/
[attribute^="value"] { property: value; }/*匹配所有 attribute属性值以 "value" 开头的元素*/
[attribute|="value"] { property: value; }/*匹配 attribute属性值为 "value" 或以 "value-" 开头的元素*/
/*css3*/
[attribute$="value"] { property: value; }/*匹配所有 attribute属性值以 "value" 结尾的元素*/
[attribute*="value"] { property: value; }/*匹配所有 attribute属性值中包含 "value" 字符串的元素*/
[attribute~="value"] { property: value; }/*匹配 attribute属性值包含单词 "value" 的元素*/

1）selector 指定 CSS 规则应用到哪些元素；selector 包括：标签选择器、类选择器、id 选择器和通配符选择器
2）property: value;：一组 CSS 声明

复合 selector

并集 selector

将多个基础选择器通过逗号分开

Copy
p, b, i, span {/*选择所有的 、、、 元素，并为它们设置 color: red;*/
color: red;
}

交集 selector

Copy
div.class {/*既是Div标签又是class类*/
color: red;
}

后代selector

后代选择器选择的是某个元素内的所有后代元素，而不管这些后代元素的层级深度

Copy
p b {/*选择的是所有 元素内的 元素，无论 在 中的嵌套层次有多深*/
color: red;
}

子selector

选择某个元素的直接子元素

Copy
ul > li {
border: 1px solid red;
}

相邻兄弟selector

选择紧接在另一个元素之后的兄弟元素

Copy
p + b {/*选择紧跟在 元素后的第一个 元素*/
color: red;
}

普通 **** 兄弟selector

选择所有位于某元素后面的兄弟元素

Copy
p ~ b {/*选择所有位于 元素后面的 元素，不一定是紧跟在 后面的，只要它们在同一级别的 DOM 树中*/
color: red;
}

伪类 selector

伪类 selector | 说明
| 匹配父元素的第一个子元素
| 匹配父元素的最后一个子元素
(n) | 匹配父元素中的第 n 个子元素 ；n 是递增的自然数，也可以写常数或者 odd，even
(n) | 匹配父元素的第 n 个同类型子元素
| 匹配父元素中的第一个同类型子元素
| 匹配父元素的最后一个同类型子元素
| 匹配所有未访问链接
| 匹配所有已访问链接
| 匹配鼠标悬停其上的元素
| 匹配被点击的链接（eg：鼠标按住时的状态）
| 匹配处于选中状态的 元素
| 匹配每个被禁用的 元素

匹配任何没有子元素的
元素

| 匹配每个已启用的 元素
| 匹配获得焦点的 元素
| 匹配具有指定取值范围的 元素
| 匹配所有具有无效值的 元素

(language)

匹配每个 lang 属性值以 "it" 开头的
元素

(selector)

匹配每个非
元素的元素

(n)

匹配父元素的倒数第二个子元素

(n)

匹配父元素的倒数第二个子元素

匹配父元素中唯一的
元素

匹配父元素中唯一的子元素

| 匹配不带 "required" 属性的 元素
| 匹配值在指定范围之外的 元素
| 匹配指定了 "readonly" 属性的 元素
| 匹配不带 "readonly" 属性的 元素
| 匹配指定了 "required" 属性的 元素
| 匹配元素的根元素，在 HTML 中，根元素永远是 HTML
| 匹配当前活动的 #news 元素（单击包含该锚名称的 URL）
| 匹配所有具有有效值的 元素

伪元素 selector

匹配元素的部分（如首字母、首行文本等）

伪元素 | 例子描述 | css
::after | 在元素后插入内容 | 2
::before | 在元素前插入内容 | 2
::first-letter | 匹配块级元素内容首字符 | 1
::first-line | 匹配块级元素内容首行 | 1
::selection | 匹配用户选中的元素 |
::placeholder | 匹配表单控件占位文本（如 ）；用于自定义文本样式 |

Copy
strick

p::first-letter {
font-size: 200%;
}
p::first-line {
font-weight: bold;
}
input::placeholder {
color: red;
}
p::selection {
color: red;
}

p::before {
content: "I "
}
p::after {
content: " Strick"
}

css 引入

多个样式表影响同一元素时，浏览器根据冲突样式的层叠优先级规则决定应用的样式：!important标记 > 元素内嵌 > 文档内嵌 > 外部链接样式 > 浏览器默认指定样式；

选择器优先级：选定范围越小越优先

元素内嵌

在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式；每个声明键值对用;隔开

Copy
hello world

文档内嵌

在中创建

Copy

p {
color: blue;
font-size: 40px;
}

这是一段文本

外部链接样式

Copy


style.css：

Copy
@charset "utf-8";
p {
color: green;
font-size: 30px;
}

强行设置最高优先级

Copy
color: green !important;

样式继承

1）如果元素没有设置父元素相关的样式，则继承父元素样式（只适用于 text-，font-，line - 开头的及 color 属性样式可继承，不适用于布局样式）
2）强制继承布局样式

Copy
这是HTML5

这是HTML5

p {
border: 1px solid red;
}
b {
border: inherit;
}


Box Model

网页布局流程：
1）设置一个个网页元素 box 的样式；摆到合适位置
2）往 box 装内容

content 与 border 的距离就是内边距；box 间的距离就是外边距

元素 box 类型

块级元素

1) 块级元素独占一行；
2) 高度，宽度、外边距以及内边距都可以控制。
3) 宽度默认是容器（父级宽度）的 100%。
4) 文字类元素内不能放块级元素；比如

~

常见块：

Copy
~ 、 、 、 、 、

行内元素

1) 一行可以显示多个行内元素；
2) 高、宽直接设置是无效的。只能自适应内容的宽度
3) 行内元素只能容纳文本或其他行内元素。
4) 链接里面不能再放链接；特殊情况链接 里面可以放块级元素，但是给 转换一下块级模式最安全

常见行内元素：

Copy
、、、、、 、、 、、

行内块元素

1) 一行可以显示多个行内块元素，但是他们之间会有空白缝隙；
2) 默认宽度是自适应内容的宽度；高度，行高、外边距以及内边距都可以控制

常见行内块元素：

Copy
、 、

类型转换

Copy
span { /*转化成块元素*/
display: block;
}

div { /*转化成行内元素*/
display: inline;
}

div { /*转化成行内-块元素*/
display: inline-block;
}

div { display: none;/*将元素隐藏且不占位*/
}

设置元素 box 尺寸

属性 | 值 | 说明 | CSS 版本
width | auto、长度值或百分比 | 设置元素的宽度 | 1
height | auto、长度值或百分比 | 设置元素的高度 | 1
min-width | auto、长度值或百分比 | 设置元素最小宽度 | 2
min-height | auto、长度值或百分比 | 设置元素最小高度 | 2
max-width | auto、长度值或百分比 | 设置元素最大宽度 | 2
max-height | auto、长度值或百分比 | 设置元素最大高度 | 2
box-sizing | content-box border-box | 默认值，元素的宽度和高度只计算content尺寸，不含padding和border 元素的宽度和高度计算包括内边距padding和边框border | 3，在各内核早期作为实验功能，要带浏览器前缀，后面就不用了
resize | none both horizontal vertical | 普通元素默认值，不允许客户端用户调整元素大小 表单类的 textarea 元素默认值，客户端用户可以调节元素的宽度和高度 客户端用户可以调节元素的宽度 客户端用户可以调节元素的高度 |

Copy
div {
background-color: purple;

width: 200px; height: 200px;
min-width: 100px;
min-height: 100px;
max-width: 300px;
max-height: 300px;

resize: both;
overflow: auto;/*搭配这个出现可拖拽大小的图形*/

/* -webkit-box-sizing: border-box;*/ /* Safari 和 Chrome */
/* -moz-box-sizing: border-box; */ /* Firefox */
/* -ms-box-sizing: border-box; */ /* IE */
box-sizing: border-box; /* 标准 */
padding: 10px; border: 5px solid red;
}

设置内边距 padding

设置元素内部边缘填充空白的大小

属性 | 值 | 说明 | CSS 版本
padding-top | 长度值或百分比 | 设置顶部内边距 | 1
padding-right | 长度值或百分比 | 设置右边内边距 | 1
padding-bottom | 长度值或百分比 | 设置底部内边距 | 1
padding-left | 长度值或百分比 | 设置左边内边距 | 1
padding | 1 ~ 4 个长度值或百分比 | 简写属性 | 1

Copy
div {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

div {
padding: 10px 10px 10px 10px;
}

div {
padding: 10px 20px;/*上下，左右*/
}

div {
padding: 10px;
}

设置外边距 margin

设置元素外部边缘填充空白的大小

属性 | 值 | 说明 | CSS 版本
margin-top | | |
margin-right | | |
margin-bottom | | |
margin-left | | |
margin | 长度值 百分比 auto：外边距自动占满浏览器宽度 | 设置顶部内边距 |
设置右边内边距 | | |
设置底部内边距 | | |
设置左边内边距 | | |
简写属性 | 1 | |

Copy
div {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

div {
margin: 10px 10px 10px 10px;
}

div {
margin: 10px 20px;
}

div {
margin: 10px;
}

/*box版心居中*/
div {
margin: 0 auto;
}

/*box水平居中*/
div {
margin-right: auto;
margin-left: auto;
}

box 垂直对齐时 margin 重合

垂直排列的相邻 box；实际间距是两个 box 上下 margin 的最大值；而非其他情况的 margin 和

box 内元素垂直对齐时 margin-top 塌陷

父子标签中，子标签添加 margin-top 导致父子标签一起向下移动；

解决方法：子标签添加 margin-top 的动机一般是调节子标签在父元素中的垂直对齐，调节这个垂直对齐更好的方法：
1）取消子级 margin, 父级设置 padding-top
2）父级设置 overflow
3）父级设置 border-top

处理溢出

属性 | 值 | 说明 | CSS 版本
overflow - x | 溢出值 | 设置水平方向的溢出 | 3
overflow - y | 溢出值 | 设置垂直方向的溢出 | 3
overflow | 取值上同： | |
auto ：浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否 则就不显示滚动条 | | |
hidden ：如果有溢出的内容，直接剪掉。 | | |
scroll：不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式不同. | | |
visible ：默认值，不管是否溢出，都显示内容。 | 简写属性 | 2 |

Copy
div {
overflow: auto;
}

设置元素可见性

属性 | 值
display |
visibility | visible：默认值，元素在页面上可见。 hidden：元素不可见，但占位 collapse：元素不可见，隐藏表格的行与列，如不是表格，则和 hidden 一样；可能 Chrome 和 Opera 不支持

Copy
div { visibility: hidden;
}

而 box 在调试时的可见性，通过设置边框和背景色实现

设置元素浮动

属性 | 值 | 说明
float | left right none | 浮动元素靠左 浮动元素靠右 禁用浮动
clear | none left right both | 浮动元素可紧贴左右边界 浮动元素不得紧贴左边界 浮动元素不得紧贴右边界 浮动元素不得紧贴左右边界

Copy
#a { /*浮动元素靠左*/
background: gray;
float: left;
clear: none;
}

#c { /*浮动元素靠右*/
background: navy;
float: right;
clear: both;
}

#c { /*禁用浮动*/
background: navy;
float: none;
}

设置元素定位属性

可理解设置定位属性后，元素上升到一个 position 层进行 layout

属性 | value | 说明
position | static absolute relative fixed | 默认值，无定位。 绝对定位，脱离文档流，以窗口文档左上角 0,0 为起点；使用 top、right、bottom、left 进行相对距离描述 相对定位，使用 top、right、bottom、left 进行相对距离描述。相对于自己原来的位置来移动 以窗口参考定位，使用 top、right、bottom、left 进行相对距离描述。

Copy
header { /*绝对定位：以窗口文档左上角 0,0 为起点*/
position: absolute; top: 100px; left: 100px;
}

header { /*以窗口参考定位：会随着滚动条滚动而滚动，达到相对窗口静止的效果*/
position: fixed; top: 100px; left: 100px;
}

/*相对某元素定位：不脱离文档流层*/
body { /*设置参考点的父元素设置为相对，且不设置坐标*/
position: relative;
}
header { /*如果父元素设置了参考点，子元素的绝对定位将以它为基准*/
position: absolute; top: 0px; left: 0px;
}

设置层叠优先级

属性 | value | 说明
z-index | auto 数字 | 默认层次 设置层次，数字越大，层次越高

Copy
header {
z-index: 100;
}

布局

文档标准布局

只用 box 类型本身的布局特性 + 类型转换；现在一般是网页整体结构是标准流布局，一行里面的多个子块是特殊布局

如果父 box 没有高度，子 box 会撑开父 box

表格布局

早期用表格来描述网页结构，通过设置块样式宽度 table { width: 100% } 始终是浏览器窗口的 100%。再设置子块（单元格）宽度为父块的百分比使页面自适应使用窗口大小

Copy





布局表格





Header


Aside
Section


Footer





styles.css：

Copy
/* 页面基本样式 */
body {
margin: 0;
}

/* 流体布局的表格样式 */
table {
margin: 0 auto;
width: 100%; /* 设置表格宽度为100%，使其适应窗口宽度 */
border-spacing: 0;
}

/* 表头样式 */
.header {
height: 120px;
background-color: #2714d1;
text-align: center;
font-size: 24px;
}

/* 侧边栏样式 */
.aside {
width: 20%; /* 使其宽度为20% */
height: 500px;
background-color: #2e53d0;
padding: 10px;
box-sizing: border-box;
}

/* 主要内容区样式 */
.section {
width: 80%; /* 使其宽度为80% */
height: 500px;
background-color: #4eb776;
padding: 10px;
box-sizing: border-box;
}

/* 页脚样式 */
.footer {
height: 120px;
background-color: #f2f2f2;
text-align: center;
font-size: 18px;
}

Float~~~~ 布局

1）元素添加浮动属性后，元素飘在文档标准布局的块上面，可理解为在 float 层上进行的 layout；也意味着如果父 box 没有高度，子 box 不再会撑开父 box
2）且元素具备了行内块特性
3）元素是顶对齐的

浮动易于实现图文环绕：

Copy





浮动布局 - 流体布局



header
aside
section
footer



styles.css：

Copy
/* body 设置宽度为 auto，使得页面宽度根据视口自动调整 */
body {
width: 100%;
margin: 0;
color: white;
background-color: #333;
}

/* header 设置固定高度 */
header {
height: 120px;
background-color: #444;
text-align: center;
padding-top: 40px;
font-size: 24px;
}

/* aside 设置浮动并指定宽度为 20% */
aside {
width: 20%;
height: 500px;
float: left;
background-color: #555;
padding: 10px;
box-sizing: border-box;
}

/* section 设置浮动并指定宽度为 80% */
section {
width: 80%;
height: 500px;
float: left;
background-color: #666;
padding: 10px;
box-sizing: border-box;
}

/* footer 设置底部并清除浮动 */
footer {
height: 120px;
clear: both;
background-color: #444;
text-align: center;
padding-top: 40px;
font-size: 20px;
}

.clearfix::before,/*要自适应高度的父box都加到clearfix类中*/
.clearfix::after{
content: "";
display: table;
}
.clearfix::after{/*在父box内部加个子box,清楚浮动的目的是撑开没指定高度的父box*/
clear: both;
}

定位布局

Copy





定位布局示例

body {
margin: 0;
padding: 0;
height: 100vh;
}

.container {
position: relative;
height: 100%;
background-color: #f0f0f0;
}

.box {
position: absolute;
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 100px;
}

/* 定位第一个盒子：距离容器左上角 50px */
.box1 {
top: 50px;
left: 50px;
}

/* 定位第二个盒子：距离容器右下角 50px */
.box2 {
bottom: 50px;
right: 50px;
}

/* 定位第三个盒子：容器中心 */
.box3 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}





Box 1
Box 2
Box 3





Multi-column Layout

多列布局的用武之地，如横向滚动的页面 (小说)

属性 | val | 说明
column-width | auto：默认值，自适应 长度值：设置列宽 | 定义每列列宽度
column-count | auto ：默认值；表示就 1 列 数值： 设置列数 | 定义分分列列数
columns | | 集成 column-width 和 column-count 两个属性
column-gap | | 定义列间距
column-rule column-rule-width column-rule-style column-rule-color | | 定义列边线 column-rule-width ：单独设置边框宽度 column-rule-style ：单独设置边框的样式 column-rule-color：单独设置边框的颜色 column-rule ：简写
column-span | none ：默认值；表示不跨列 all ：表示跨列 | 设置跨列大标题
column-fill | |

Copy
div{
column-width: 200px;
column-count: 4;
column-gap: 100px;
column-rule: 2px dashed gray;
column-span: all;
}

div{
columns: auto 4;
column-gap: 100px;
column-rule: 2px dashed gray;
column-span: all;
}

Flex 布局

属性 | 值 | 说明
display | flex：将容器盒模型作为块级弹性伸缩盒显示 inline-flex：将容器盒模型作为内联级弹性伸缩盒显示 |
flex-direction | row ：从左到右排列 row-reverse ：从右到左排列 column ：从上到下排列 column-reverse：从下到上排列 | 子元素的排列方方向，就是主轴方向设置
flex-wrap | nowrap ：默认值；都在一行或一列显示，会自动挤压 wrap ：伸缩项目无法容纳时・自动换行 ，不挤压 wrap-reverse：伸缩项目无法容纳时・自动换行・方向和 wrap 相反 |
flex-flow | | 上两个简写
justify-content | flex-start ：子元素左对齐，元素间没缝隙 flex-end ：子元素右对齐，元素间没缝隙 center ：子元素以中心点靠齐 ，元素间没缝隙 space-between：均匀对齐，剩余空白宽度作为子元素间距，两侧没缝隙 space-around：均匀对齐，剩余空白宽度作为子元素间距，两侧有缝隙 space-evenly：均匀对齐，剩余空白宽度作为子元素间距，两侧有缝隙，且边距一样大 | 主轴对齐方式 (默认 x 轴)
align-items | flex-start ：顶部对齐 flex-end ：底部对齐 center：居中对齐 baseline ：伸缩项目以基线为基准・清理额外的空间 stretch：默认，拉伸子元素填充整个垂直父 box 空间，当然前提是子元素没写高度 | 交叉轴对齐方式，只有一行和父 box 有高度时生效
align-content | flex-start ：子元素顶部对齐，元素间没缝隙 flex-end ：子元素底部对齐，元素间没缝隙 center ：子元素以中心点靠齐 ，元素间没缝隙 space-between：均匀对齐，剩余空白宽度作为子元素间距，两侧没缝隙 space-around：均匀对齐，剩余空白宽度作为子元素间距，两侧有缝隙 space-evenly：均匀对齐，剩余空白宽度作为子元素间距，两侧有缝隙，且边距一样大 | 多行情况下的交叉轴对齐方式
align-self | flex-start ：顶部对齐 flex-end ：底部对齐 center：居中对齐 baseline ：伸缩项目以基线为基准・清理额外的空间 stretch：默认，拉伸子元素填充整个水平父 box 空间，当然前提是子元素没写高度 | 单独控制子 box 布局
flex | 整数 | 子元素在主轴上的宽度比例；实现了在主轴上的控件宽度自适应
order | | 控制伸缩项目出现的顺序

Copy

第一个段落
第二个段落
第三个段落


.flex-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
/*align-content: ;*/
align-itmes: center;
}

/*.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-itmes: center;
/*align-content: ;*/
}*/

/*共占用5份,出现顺序231*/
p:nth-child(1) {/*占用容器空间的 1 份*/
flex: 1;/*主轴宽度比1:3:1*/
order: 2;
align-self: center;/*第一个子盒子居中*/
}

p:nth-child(2) {
flex: 3;
order: 3;
}

p:nth-child(3) {
flex: 1;
order: 1;
}

!https://secure2.wostatic.cn/static/sHJpw9ixqsocGYebDGSnX9/image.png

Copy





个人主页





欢迎来到我的个人主页



首页
关于我
我的项目
联系我




个人简介
我是一个Web开发者，热爱编程和技术创新。


我的项目

项目1
项目2
项目3



联系方式
邮箱: example@example.com



© 2024 我的个人主页





style.css：

Copy
/* 设置页面的基本样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* 核心容器，使用 flexbox 排版 */
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}

/* 页眉 */
.header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}

/* 导航栏，水平排列，换行 */
.navigation {
display: flex;
flex-flow: row wrap; /* 允许换行 */
justify-content: center; /* 居中对齐 */
background-color: #333;
}

.navigation ul {
list-style: none;
display: flex;
padding: 10px;
}

.navigation li {
margin: 0 15px;
}

.navigation a {
color: white;
text-decoration: none;
}

/* 主内容区，使用flexbox布局 */
.main-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 子元素之间均匀分布 */
padding: 20px;
gap: 20px;
}

/* 个人简介区 */
.bio {
flex: 1 1 300px; /* 设置可以伸缩的盒子 */
background-color: #f4f4f4;
padding: 15px;
border-radius: 8px;
}

.projects {
flex: 2 1 400px; /* 设置灵活的比例 */
background-color: #f9f9f9;
padding: 15px;
border-radius: 8px;
}

.contact {
flex: 1 1 300px; /* 设置可以伸缩的盒子 */
background-color: #f4f4f4;
padding: 15px;
border-radius: 8px;
}

/* 页脚 */
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}

/* 调整布局的顺序 */
.projects {
order: -1; /* 使“我的项目”在“个人简介”前面 */
}

/* 响应式调整 */
@media (max-width: 768px) {
.navigation {
flex-direction: column;
}
.main-content {
flex-direction: column;
}
}

Grid 布局

继承的样式属性

可以在父元素 box 里 (div) 指定属性；子元素会继承，就不需要写个子元素选择器指定了；且大多数元素都是有缺省样式的，可能需先清除样式

属性 | value | 说明 | css
color | 颜色值 | 设置元素前景色 | 1
opacity | 0 ~ 1 | 设置元素的透明度 | 3
text-align | 设置元素在 box 中的水平对齐方式 | start 和 end 属于 CSS3 新增的功能，但目前 IE 和 Opera 可能尚未支持 left ：靠左对齐・默认 right： 靠右对齐 center ： 居中对齐 justify ：内容两端对齐 start ：让文本处于结束的边界 end：让文本处于结束的边界 | 1,3

Copy
//清除默认样式
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

box 样式

属性 | value | 说明 | css
vertical-align | 相对基线的距离长度值 / 百分比 | box 垂直对齐 |
box-shadow | hoffset ：阴影的 X 轴偏移 voffset : 阴影的 Y 偏移 blur :(可选) 模糊半径；是一个长度值，值越大盒子的边界越模糊。默认值 0, 边界清晰 spread :(可选) 扩散半径；, 是个长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小 color :(可选) 设置阴影的颜色，如果省 略，浏览器会自行选择一个颜色 inset:(可选)：默认外阴影，要内阴影这个值是 inset 多值，空格区分 | box 阴影，一般拿来做交互响应样式，这个难调，建议直接复制抄小米，京东 | 3
outline-color | | 外围轮廓颜色 | 3
outline-offset | | 轮廓距离元素边框边缘的偏移量 | 3
outline-style | | 轮廓样式，和 border-style 一致 | 3
ontline-witdh | | 轮廓宽度 | 3
outline | | 简写 | 3
cursor | auto,default,none,context-menu,help,pointer,progress,wait,cell,crosshair,text,vertical-text,alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll | box 上的光标样式，左边一个个试 | 1

Copy
div span {
vertical-align: -200px;
box-shadow: 5px 4px 10px 2px gray;/*阴影*/
/*box-shadow: 5px 4px 10px 2px gray inset;*/ /*内部阴影*/
outline: 10px double red;/*给box再加个轮廓*/
cursor: move;
}

字体样式

无标题

Copy
body{ font-size: 50px;}/*设置父元素字体大小*/
@font-face { font-family: abc; src: url('BrushScriptStd.otf');} /*服务端提供abc字体文件*/
body{
font-style:;
font-weight:;
font-variant:;
font-size: smaller;/*设置相对父元素字体大小*/
font-family:楷体,微软雅黑,宋体;/*有时为兼容很多浏览者系统的字体，可以做几个后备字体*/
/*font: italic bold normal smaller 楷体;/*以以上顺序给值*/
color: red;
opacity: 0.5;
}

文本样式

属性名 | 说明 | 值 | CSS 版本
text-decoration | 文本划线 | none：无划线 underline：文本下划线 overline：文本上划线 line-through：删除线 blink：让文本进行闪烁・基本不支持了 | 1
text-transform | 英文文本大小写 | none ：将已被转换大小写的值恢复到默认状态 capitalize ：英文首字母大写 uppercase ：英文转为大写 lowercase ：英文转为小写 | 1
text-shadow | 给文本添加阴影 | 四个值描述，eg：5px 5px 3px black 第一个值：水平偏移； 第二个值：垂直偏移； 第三个值：阴影模糊度（可选）； 第四个值：阴影颜色（可选） | 3
text-align | 设置文本对齐方式 | start 和 end 属于 CSS3 新增的功能，但目前 IE 和 Opera 可能尚未支持 left ：靠左对齐・默认 right： 靠右对齐 center ： 居中对齐 justify ：内容两端对齐 start ：让文本处于结束的边界 end：让文本处于结束的边界 | 1,3
white-space | 空白处理方式 | normal ：默认值，空白符被压缩，文本自动换行 nowrap ：空白符被压缩，文本不换行 pre ：空白符被保留・遇到换行符则换行 pre-line ：空白符被压缩・文本会在排满或遇换行符换行 pre-wrap：空白符被保留・文本会在排满或遇换行符换行 | 1
letter-spacing | 字母间距 | normal：设置默认间距 长度值：比如:"数字"+"px" | 1
word-spacing | 单词间距 | normal ：设置默认间距 长度值 ：比如:"数字"+"px" | 1
line-height | 设置行高（行间距） | normal ：设置默认间距 长度值 ：比如:"数字"+"px" 数值 ：比如：1,2.3 %：比如：200% | 1
word-wrap | 让过长的英文单词断开 | normal ：单词不断开 break-word：断开单词 | 3
text-indent | 文本首行缩进 | normal ：设置默认间距 长度值 ：比如:"数字"+"px" | 1
vertical-align | sub : 垂直对齐文本的下标 super: 垂直对齐文本的上标 | 文本垂直对齐 |

Copy
p {
text-decoration: underline;
text-transform: uppercase;
text-shadow: 5px 5px 3px black;
text-align: center;
white-space: nowrap;
letter-spacing: 4px;
word-spacing: 14px;
line-height: 200%;
word-wrap: break-word;
text-indent: 2rem;
vertical-align: super;
}

行高垂直居中

行高 = box 高度

!https://secure2.wostatic.cn/static/xzYi7gmYsYLSrhRywU1mfQ/image.png

Copy
中国人
div {
height: 40px;
line-height: 40px;
}

边框样式

边框样式 border-style，必需声明；其他两个属性可选，，因为本身有默认值

属性 | 值 | 说明 | css
border-style border-top-style border-middle-style border-left-style border-right-style | none dashed dotted double groove inset outset ridge solid | 没有边框 破折线边框 圆点线边框 双线边框 槽线边框 使元素内容具有内嵌效果的边框 使元素内容具有外凸效果的边框 脊线边框 实线边框 |
border-width border-top-width border-middle-width border-left-width border-right-width | 长度值 / 百分数 thin medium thick | 设置边框的宽度，可选，因为本身有默认值 |
border-color border-top-color border-middle-color border-left-color border-right-color | 颜色值 | 设置边框的颜色，可选，因为本身有默认值 |
border-radius border-top-left-radius border-top-right-radius border-middle-left-radius border-middle-right-radius | 长度值或百分数 | 设置四条边角的圆角半径，用于制作圆角控件；border-radius=50%制造纯圆形控件 左上边角 右上边角 左下边角 右下边角 | 3
border-image-source | | 引入背景图片地址 | 3
border-image-slice | | 切割引入背景图片 | 3
border-image-width | | 边框图片宽度，可设置上右下左 4 值，上下 / 左右 2 值 | 3
border-image-outset | | 边框背景向外扩张 | 3
border-image-repeat | stretch : 拉伸填充。默认值 repeat：平铺填充・当图片碰到边界时，如果超过见刺被截断 round ：平铺填充・根据边框尺寸动态调整图片大小，直至铺满边框 space：平铺填充・根据边框尺寸动态调整图片间距，直至铺满边框 | 边框背景图片的排列方式 | 3
border-image | | 上面五个属性的简写方式 | 3

Copy
div { /*单独设置某边加前缀即可*/
border-width: 2px;
border-style: solid;
border-color: red;

border-radius: 10px 20px 30px 40px;

border-image-source: url(border.png);
border-image-slice: 27;/*刚好4个图像*/
/*border-image-slice: 0 fill;*/
border-image-width: 81px;
border-image-outset: 20px;
border-image-repeat: round;
}

div {
border: 2px solid red;
border-radius: 10px;
/*border-top:*/
/*border-middle:*/
/*border-left:*/
/*border-right:*/
border-image: url(border.png) 27/27px round;
}

背景样式

属性 | value | 说明 | CSS 版本
background-color | 颜色 transparent | 设置背景颜色为指定色 默认值，设置背景颜色为透明色 | 1
background-image | none url | 批量设置了块背景，而其中一个不需要背景，可单独设置 none 取消背景 通过 URL 设置背景图片 | 1/3
background-repeat | repeat-x repeat-y repeat no-repeat | 水平方向平铺图像 垂直方向平铺图像 水平和垂直方向同时平铺图像 让背景图片只显示一个，不平铺 | 1/3
background-attachment | scroll fixed | 默认值，背景固定在元素上，不会随着内容一起滚动 背景固定在视窗上，内容滚动时背景不动，可用于水印效果 | 1/3
background-position | 长度值 / 百分数 top left right bottom center | 使用长度值偏移图片的位置 将背景图片定位到元素顶部 | 3
background-size | 长度值 / 百分数 auto cover contain | CSS 长度值，比如 px、em 默认值，图像以本尺寸显示 等比例缩放图像，使图像至少覆盖容器，但有可能超出容器 等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合 | 3
background-origin | border-box padding-box content-box | 在元素盒子内部绘制背景 在内边距盒子内部绘制背景 在内容盒子内部绘制背景 | 3
background-clip | border-box padding-box content-box | 在元素盒子内部裁剪背景 在内边距盒子内部裁剪背景 在内容黑子内部裁剪背景 | 3
background | | 背景图片简写方式 | 1

Copy
div {
background-color: silver;
background-image: url(loading.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;/*20px 20px;*/
background-size: auto;
background-origin: content-box;
background-clip: padding-box;
}

div {
width: 400px;
height: 300px;
border: 10px dashed red;
padding: 50px;
background: silver url(img.png) no-repeat scroll left top/100% border-box content-box
}

表格样式

属性 | 值 | 说明 | 版本
border - collapse | separate : 默认值，单元格边框独立 collapse : 单元格相邻边框被合并 | | 2
border - spacing | 长度值 | 相邻单元格边框间距；border-collapse: separate时有效。边框独立是设置间距前提 | 2
caption - side | top：默认值，标题在上方 bottom：标题在下方 | 表格标题的位置 | 2
empty - cells | show ：默认值，显示边框 hide ：不显示边框 | 空单元格是否显示边框 | 2
table - layout | auto ：默认值，内容过长时・拉伸整个单元格 fixed：内容过长时不拉伸整个单元格 | 指定表格的布局样式 | 2

vertical-align

baseline : 内容对象与基线对齐 top : middle : bottom:

中的

单元格，可用 html 文本标签的 text-align 属性实现水平对齐； 而垂直对齐可用 CSS 样式属性 vertical-align 实现 | 1

Copy
table {
border-collapse: separate;
border-spacing: 10px;
caption-side: top;
empty-cells: hide;
table-layout: fixed;
vertical-align: bottom;
}

列表样式

属性 | 值 | 说明 | CSS 版本
list - style - type | none : 没有标记 disc : 实心圆 circle : 空心圆 square : 实心方块 decimal : 阿拉伯数字 lower-roman : 小写罗马数字 upper-roman : 大写罗马数字 lower-alpha : 小写英文字母 upper-roman: 大写英文字母 | 列表项前缀样式 | 1/2
list - style - position | outside ：默认值，标记位于内容框外部 inside ：标记位于内容框内部 | 排列的相对位置 | 1
list - style - image | none : 不使用图像 url: 通过 url 使用图像 | 图像作为列表前缀 | 1
list - style | 简写属性 | 列表的简写形式 | 1

Copy
ul {
list-style-type: square;
list-style-position: inside;
/*list-style-image: url(bullet.png);*/
}

ul {
list-style: lower-alpha inside url(bullet.png);
}

变形效果

可用于制作元素交互动画，比如鼠标放上去，元素有个变形反馈

2 维变换

属性值 | value | 说明
transform | translate (x,y)：平移，其中 y 可以省略，表示垂直方向没有位移 translateX (x)：元素水平方向平移 x translateY (y)：元素垂直方向移平移 y **rotate (angle)：顺时针旋转 angle 角度 ** scale (x,y)：元素水平方向缩放比 x ，垂直方向缩放比 y ， y 省略时表示 y 和 x 有相同缩放比 scaleX (x)：元素水平方向缩放比为 x scaleY (y)：元素垂直方向缩放比为 y skew (angleX angleY)：元素沿 x 轴方向倾斜 angleX 度，沿 y 轴方向倾 angleY 度， angleY 可省略，表示 y 轴方向不倾斜 skewX (angleX)：元素沿 x 轴方向倾斜 angleX 度 skewY (angleY)：元素沿 y 轴方向倾斜 angleY 度 **matrix (a,b,c,d,e,f)：**2D 变换简写 | **x y 值可以是长度单位或百分比； **angle 单位通常是 deg ，1 deg = 1 度 x y 取值是数字，默认值是 1; 大于 1，放大；小于 1，缩小

Copy
div{
transform: translate(20px,30px);/*设置元素水平和垂直方向的偏移*/
}

div{
transform:rotate(45deg);/*设置元素顺时针旋转45度*/
}

div{
transform: scale(2,1);/*设置元素水平方向缩放比为2，垂直方向缩放比为1*/
}

div{
transform: skewX(30deg);/*设置元素沿着x轴倾斜*/
}

div{
transform: matrix(a,b,c,d,e,f);
}

3 维变换

属性 | 属性值 | 说明
transform | translate3d (x,y,z)：3D 方式平移元素，设置 x、y 和 z 轴 translateZ (z)：设置 3D 方式平移元素的 z 轴 scale3d (x,y,z)：3D 方式缩放一个元素 scaleZ (z)：设置 3D 方式缩放元素的 z 轴 rotate3d (x,y,z,a)：3D 旋转，a 表示角度，xyz 是 0 或 1 之间的数值 rotateX (a)：分别设置 3D 方式的旋转元素的 x、y 和 z 轴 rotateY (a)： rotateZ (a)： perspective (长度值)：设置一个透视投影矩阵 matrix3d (多个值)：定义一个矩阵 | 在元素中设置透视的值 perspective (长度值)，但它还是和在父元素设置有一定不同。因为父元素整个作为透视，而元素自己作为透视，导致不同
transform-style | flat : 默认值；表示所有子元素在 2D 平面呈现 preserve-3d: 表示子元素在 3D 空间中呈现 |
perspective | none ：默认值；表示无限的角度来看 3D 物体・但看上去是平的 长度值 ：接受一个长度单位大于 0 的值，其单位不能为百分比。值越大・角度出现的越远，就好比你人离远一点看物体。值越小・正相反。 | 设置查看者的位置，并将可视内容映射到一个视锥上，继而投放到一个 2D 平面上；不太懂透视
perspective-origin | 百分数值：指定元素 x 轴或 y 轴的起点 长度值：指定距离 left：指定 x 轴的位置 center right top：指定 y 轴的位置 center bottom | 参考点

Copy




#father {
transform-style: preserve-3d; /*设置到3d变换元素的父元素*/
perspective: 1000px;/*设置查看者的距离位置，一般设置在元素的父元素上;再配合后面的功能属性和变形配置，才能看到效果*/
}

#son {
transform: translate3d(300px,100px,240px);
transform: scale3d(1,1,1.5) rotateX(45deg);
transform: rotate3d(1,0,0,45deg);
/*transform: perspective(1000px) rotateY(45deg);*/
perspective-origin: top right;/*设置为右上角*/
}

过渡效果

过渡样式属性 | 样式类型
background-color | color (颜色)
background-image | only gradients (渐变)
background-position | percentage, length (百分比，长度值)
border-bottom-color | color
border-bottom-width | length
border-color | color
border-left-color | color
border-left-width | length
border-right-color | color
border-right-width | length
border-spacing | length
border-top-color | color
border-top-width | length
border-width | length
bottom | length, percentage
color | color
crop | rectangle
font-size | length, percentage
font-weight | number
grid-* | various
height | length, percentage
left | length, percentage
letter-spacing | length
line-height | number, length, percentage
margin-bottom | length
margin-left | length
margin-right | length
margin-top | length
max-height | length, percentage
max-width | length, percentage
min-height | length, percentage
min-width | length, percentage
opacity | number
outline-color | color
outline-offset | integer
outline-width | length
padding-bottom | length
padding-left | length
padding-right | length
padding-top | length
right | length, percentage
text-indent | length, percentage
text-shadow | shadow
top | length, percentage
vertical-align | keywords, length, percentage
visibility | visibility
width | length, percentage
word-spacing | length, percentage
z-index | integer
zoom | number

属性 | val | 说明
transition-property | none：不支持过渡样式属性设置 all：默认值；元素可设置 所有过渡样式属性 指定可设置的过渡样式属性 | 指定过渡或动态模拟的 CSS 属性
transition-duration | | 指定完成过渡所需的时间
transition-timing-function | ease ：默认值，元素样式从初始由快到慢过渡到终止态。等同贝塞尔曲线 (0.25,0.1,0.25, 1.0) linear : 元素样式从初始态恒速过渡到终止态。等同贝塞尔曲线 (0.0,0.0,1.0,1.0) ease-in ：元素样式从初始态加速过渡到终止态。等同于贝塞尔曲线 (0.42,0,1.0,1.0) ease-out ：元素样式从初始态减速过渡到终止态。等同于贝塞尔曲线 (0,0,0.58,1.0) ease-in-out ：样式从初始态过渡到终止态时，先加速，再减速。等同贝塞尔曲线 (0.42,0,0.58,1.0) cubic-bezier (0.25, 0.67, 0.11, 0.55)：自定义贝塞尔 steps (n,type)：跳跃式过渡；n 表示跳跃几次。type 为 start 或 end (可选)。表示开始 / 结束时跳跃 | 指定过渡函数；决定效果变化的速度
transition-delay | | 触发事件后，在设置的延迟时间后再执行过渡延迟效果。如果有多个样式效果，可设置多个延迟时间，以空格隔开
transition | | 简写

Copy
div {/*原始样式*/
width: 200px; height: 200px; border: 1px solid green;
}

div:hover{/*CSS 动作:hover、:focus、:active、:checked 等*/
background-color: black; color: white; margin-left: 50px;

transition-property: background-color, color, margin-left;/*背景和颜色作为过渡样式*/
/*transition-property: all*/
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 0s, 1s, 0s;
}

/*div:hover{
transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;
}*/

/*div:hover{
transition: all 1s ease 0s;
}*/

动画效果

属性 | val | 说明
animation-name | none 动画名称 | 指定动画名，动画名对应一个 @keyframes 规则。CSS 加载时执行 animation-name 指定的动画
animation-duration | | 动画播放所需时间；s 或 ms 为单位
animation-timing-function | ease ：默认值，元素样式从初始由快到慢过渡到终止态。等同贝塞尔曲线 (0.25,0.1,0.25, 1.0) linear : 元素样式从初始态恒速过渡到终止态。等同贝塞尔曲线 (0.0,0.0,1.0,1.0) ease-in ：元素样式从初始态加速过渡到终止态。等同于贝塞尔曲线 (0.42,0,1.0,1.0) ease-out ：元素样式从初始态减速过渡到终止态。等同于贝塞尔曲线 (0,0,0.58,1.0) ease-in-out ：样式从初始态过渡到终止态时，先加速，再减速。等同贝塞尔曲线 (0.42,0,0.58,1.0) cubic-bezier (0.25, 0.67, 0.11, 0.55)：自定义贝塞尔 | 动画播放函数
animation-delay | | 事件触发后开始播放的延迟时间
animation-iteration-count | 次数 ：默认值为 1 infinite ： 表示无限次循环 | 动画循环播放次数
animation-direction | normal : 默认值，每次播放向前 alternate : 一次向前，一次向后，一次向前・一次向后这样交替 | 动画播放方向
animation-play-state | | 控制动画的播放状态
animation-fill-mode | none ：默认值；表示按预期进行和结束 forwards ：动画结束后继续应用最后尖键帧位置，即不返回 backforwards： 动画结束后迅速应用起始关键帧位置，即返回 both ：根据情况产生 forwards 或 backforwards 的效果 | both 需要结合，次数和播放方向 animation-iteration-count: 4; animation-direction: alternate;
animation | | 以上简写
@keyframes | | 声明一个动画，然后在 animation 调用关键帧声明的动画

Copy
我是 HTML5
div { /*原始样式*/
width: 200px; height: 200px; border: 1px solid green;
animation-name: myani;
animation-duration: 1s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-direction: alternate;
/*animation-play-state: paused;*/
animation-fill-mode: forwards;
}

/*
div{
animation: myani 1s ease 2 alternate 0s both;
}*/

@keyframes myani {/*定义动画的关键帧*/
0% {
margin-left: 0px;
}
50% {
margin-left: 100px;
background-color: black;
}
100% {
margin-left: 0px;
background-color: white;
}
}
/*@keyframes myani {
from {
margin-left: 0px;
}
to {
margin-left: 100px;
}
}*/

css 距离度量

1）px：早期
2）百分比：网页默认的字号大小为 16px，然后通过设置 62.5%，将网页基准设置为 10px
3）em：父元素基准的倍数
4）rem：基准的倍数；现代浏览器推荐的度量

Copy
标题小标题
我是一个段落，我是一段代码

/*em*/
html {
font-size: 62.5%;
}
h1 {
font-size: 3em;
}
p {
font-size: 1.4em;
}

/*em*/
html {
font-size: 62.5%;
}
code {
font-size: 1.1 rem;
}

实验性属性前缀

新属性推出时，这些属性还处在不太稳定的阶段，随时可能被剔除。而此时的浏览器厂商为了实现这些属性，采用前缀方法

浏览器 | 厂商前缀
Chrome、Safari | -webkit-
Opera | -o-
Firefox | -moz-
Internet Explorer | -ms-

Emmet 规则

Emmet 语法缩写提高 html/css 编写速度，Vscode 内部已经集成该语法

元素: 直接输入元素名称，例如 div 会生成 。

子元素: 使用 > 表示父子关系，例如 div>p 会生成 。

兄弟元素: 使用 + 表示兄弟关系，例如 div+p 会生成 。

上级元素: 使用 ^ 表示上级元素，例如 div>p^h2 会生成 。连续使用 ^ 可以向上级多层元素。

重复: 使用 * 表示重复，例如 ul>li*5 会生成一个包含 5 个列表项的无序列表。

分组: 使用 () 进行分组，例如 div>(header>ul>li*2)+footer 会生成一个 div，包含一个 header（内含 2 个列表项的无序列表）和一个 footer。

类名: 使用 . 表示类名，例如 div.container 会生成 。

ID: 使用 # 表示 ID，例如 div#main 会生成 。

属性: 使用 [] 添加属性，例如 a[href="https://www.google.com"] 会生成 。多个属性可以用空格分隔。

文本内容: 使用 {} 添加文本内容，例如 p{Hello world} 会生成 Hello world 。

编号: 使用 $ 表示编号，例如 ul>li.item$*3 会生成 。可以在 $ 后面添加 @- 来倒序编号。

隐式标签: 一些标签可以省略，例如 ul>li*3 等同于 ul>(li*3)。.container 会生成 ，省略了 div。

CSS 基本采取首字母简写：
比如 w200 按 tab 可以 生成 width: 200px;
比如 lh26px 按 tab 可以生成 line-height: 26px;

base.css

Copy
/* 基础公共样式：清除默认样式 + 设置通用样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

li {
list-style: none;
}

body {
font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}

a {
color: #333;
text-decoration: none;
}