HTMLCSS笔记

朋not鹏

已于 2024-03-01 17:28:02 修改

阅读量1.2k

点赞数 32

文章标签：笔记 html css 前端

于 2024-03-01 15:44:07 首次发布

本文链接：https://blog.csdn.net/weixin_50116360/article/details/136398057

版权

HTMLCSS笔记

对应b站视频：【千锋教育web前端入门视频教程，零基础必看的h5(html5)+css3网页制作教程】https://www.bilibili.com/video/BV1XF41187ZJ?vd_source=99b0080c20437dec6ac4e3437f81d47a

01_基础

07_文档声明与字符编码

<!DOCTYPE html> 基于HTML5的标准解析

<html lang=''> 告知浏览器所选用语言
“en” ---- 英文
“zh-CN” ---- 中文
“ja-jp” ---- 日文

meta charset="UTF-8" 告知浏览器解码规范
ASCII ---- 美国信息交换标准代码
ISO-8859-1 ---- 拉丁字母表
GB2312 ---- 汉字编码字符表
UTF-8 ---- 万国码

08_HTML常用标签

<h1></h1> 文本标题 h1……h6
<p></p> 段落文本
<br/> 换行
<hr/> 水平线

<b></b> 加粗(只是显示加粗)
<strong></strong> 加粗(突出文本内容)

<i></i> 倾斜(只是倾斜)
<em></em> 倾斜(突出文本)

<s></s> 删除(只是删除)
<del></del> 删除(突出文本)

<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标

htmltagwrap Alt+W 快速添加双标签

10_hr标签

属性：color、width、align、noshade

11_特殊符号

&lt 左尖角号
&gt 右尖角号

lorem

&nbsp 空格(占宽度受字体大小的影响)
&emsp 空格(占一个中文字符的宽度)
&copy ©
&trade ™
&reg ®

12_div和span标签

div 用来划分页面区域，独占一行
div{内容} * n

span 用于对文本进行独立修饰时

02_列表

13_有序列表

<ol></ol> 里面只能放 <li></li>
li 里面可以随意放标签
序号是自动生成的

Ctrl + / 注释

ol 属性：type(1, a, A, i, I)、start(序号从哪开始，取值只能是数字)

14_无序列表

<ul></ul>
ul > li{内容} * n

ul 里面只能放 li
li 里面可以随意放标签
默认是黑色实心圆
ul 属性：type(disc, circle, aquare, none)

15_自定义列表

图文混排

<dl>
	<dt>图片</dt>
	<dd>文字</dd>
</dl>

<dl>
	<dt>图片</dt>
	<dd>文字</dd>
</dl>

dl>dt+dd

03_图片

16_图片标签的路径

<img src="">
./ 当前级
…/ 上一级

17_图片标签的属性

属性：alt(加载失败显示)、title(鼠标悬停显示)、width、height

04_超链接

19_超链接标签

<a href=""></a>
属性：href、title(鼠标悬停后的提示信息)、target(规定在何处打开文档 _self, _blank)

05_表格

20_表格

<table>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

table>tr*2>td*n

21_表格的属性

table 属性：border、width(百分比写法时是相对于父元素)、height(是靠内容撑开的)、align(left, center, right)、bordercolor、bgcolor、cellspacing(单元格与单元格之间的间距)、cellpadding(单元格与内容之间的空隙)

22_tr(table row)的属性

tr 属性：height、bgcolor、align(文字的水平对齐left, center, right)、valign(文字的垂直对齐top, middle, bottom)

23_td(table data)的属性

属性：width(影响一整列)、height(影响一整行)、bgcolor、align、valign

24_表格的合并

合并列 colspan
合并行 rowspan

06_表单

26_表单(form)

表单控件：

<form action="" method="">
	<input type="text" placeholder="提示信息" name=""> // 文本
	
	<input type="password" placeholder="提示信息" name=""> // 密码
	
	<input type="submit" value="提交(自定义内容)"> // 提交按钮(提交信息到 action 指定地址)
	<button type="submit">提交</button>

	<input type="reset" value="重新输入(自定义内容)"> // 重置按钮
	<button type="reset">重新输入</button>

	<input type="button" value=""> // 配合 js 自定义行为
</form>

必须设置 name 属性否则在提交表单时用户输入的数据不会发送给服务器
method=“” get 安全性低， post 安全性高

value 属性对于不同 input 类型，用法也不同：

对于 “button”、“reset”、“submit” 类型 - 定义按钮上的文本
对于 “text”、“password”、“hidden” 类型 - 定义输入字段的初始（默认）值
对于 “checkbox”、“radio”、“image” 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL

07_CSS样式

27_CSS内部样式表

<style>
</style>

style 标签放在 head 中
CSS 属性：color(字体颜色)、background-color

28_CSS外部样式表

创建 XXX.css 文件
<link rel="stylesheet" type="text/css" href="CSS文件位置">
或

   <style>
	   @import url(CSS文件位置)
   </style>

link 和 import 之间的区别：

link 属于 XHTML 标签(兼容性好)，@import 是 CSS 提供的方式
页面加载时 link 同时加载，@import 会等页面全部下载完再被加载
推荐 link

29_CSS行内(内联、嵌入式)样式表

<div style="属性名: 属性值; …… ></div>

30_CSS样式表的优先级

!important 属性 > 行内 > 内部 > 外部

08_选择器

31_元素选择器

标签名 {

}

32_类(class)选择器

.类名 {

}

<标签 class="类名(可加多个)"></标签>

多个 class 冲突时，按照 style 中顺序覆盖

33_id 选择器

#id {

}

<标签 id="id(可加多个)"></标签>

id 具有唯一性，当 id 重复会导致 js 找不到

34_通配符选择器

* {
	margin: 0; // 外边距
	padding: 0; // 内边距 
}

35_群组选择器和包含(后代)选择器

// 群组选择器
// A 和 B 和 C
A, B, C {

}

// 后代选择器
// A 下的 B
A B {

}

// 亲儿子
A>B {

}

后代选择器的选择方式是从右到左(先找到所有的 B，然后再找到外面有 A 的)

36_伪类选择器

主要用在 a 链接上

// 超链接的初始状态
a:link {}

// 超链接在被访问后的状态
a:visited {}

// 超链接在鼠标悬停(划过)时的状态
a:hover {}

// 超链接在被激活(按下)时的状态
a:active {}

顺序固定

38_选择器的权重

!important > 行内样式 > id选择器 > class选择器 > 元素选择器

包含选择器权重是其包含的选择符权重之和

CSS选择器解析规则：

高覆盖低
相同权重就近(哪个最后定义)原则

09_文本属性

39_大小&字体

属性：

font-size(字体大小，默认16px，常用12px)
font-family(字体，字体名中间有空格时需加双引号，多个字体中间逗号链接按顺序解析)

40_文字颜色

属性：color

color: red; // 名称写法
color: rgb(255, 0, 0); // RGB写法
color: #ff0000; // 十六进制写法(每两位代表一个颜色，相同可以合并)

41_加粗&倾斜

属性：

font-weight(粗体 100-900; 100 lighter 细体, 400 normal 正常, 700 bold 粗体, 900 bolder 更粗体)
font-style(斜体; italic 倾斜, oblique 更倾斜, normal 正常)

42_文本水平对齐&单行文本垂直居中

属性：

text-align(left, center, right, justify 多行文本两端对齐)
line-height(行高)

单行文本垂直居中方法：

line-height: height;
text-align: center;

43_文本间距&首行缩进

属性：

letter-spacing(字符间距)
word-spacing(词间距，多用于英文)
text-indent(首行缩进 2em)

44_文本修饰线

属性：

text-decoration(underline 下划线，line-through 中划线，overline 上划线，none 多用于 a 链接)

46_检索大小写和font

属性：

text-transfrom(capitalize 每个单词的首字母大写，lowercase 全部转为小写，uppercase 全部转换为大写，none)
font(文本属性合并简写，顺序为：font-style font-weight font-size/line-height font-family; 字体行高字体大小不能省略)

10_列表属性

47_列表属性

属性：

list-style-type(定义列表符合样式；disc 实心圆，circle 空心圆，square实心方块，none)
list-style-image(将图片设置为列表符合样式 url() )
list-style-position(设置列表项标记的放置位置 outside, inside)
list-style(三个属性顺序随意)

常用：list-style: none

11_背景

48_背景属性

属性：

background-color：名称/十六进制/rgba() a 为透明度
background-image：url() 默认平铺
background-repeat(平铺)：repeat-x/repeat-y/no-repeat
background-position：
1. px值 10px 10px
2. 百分比 10% 10%
3. left/center/right top/center/bottom

49_背景图片的大小

属性：

background-size：
1. px值 400px 400px
2. 百分比 100% 100%
3. cover 等比例放到足够大，图片可能部分超出盒子
4. contain 将图片放大至适应内容区域，可能铺不满盒子

50_背景的固定和滚动

background-attachment：scroll滚动/fixed固定(跳出盒子，相对于浏览器视口)

53_复合写法

background：background-color background-image background-repeat background-position background-attachment(顺序随意，不写则默认为空白，会覆盖之前的)

background-size 需要单独设置

12_浮动

54_浮动属性

float：left/right/none

作用：

让竖着的东西横着来
让文本环绕显示

设置浮动可以让一个行内元素转变成块元素

55_清浮动

解决高度塌陷(浮动元素高度为0)的问题

写固定高度
清浮动 clear: none/left/right/both 不允许前面元素有XX浮动(属性加在后面元素身上)
在浮动元素后面补一个盒子，不设置宽高，只设置一个属性 clear: both
在浮动元素的父盒子上加一个属性 overflow: hidden 引发bfc，让浮动元素计算高度

13_盒子模型

57_内边距

属性：
padding:

1个值；4个方向都一样
2个值；上下，左右
3个值；上，左右，下
4个值；上，右，下，左

58_内边距的特性

背景色可以蔓延到内边距
padding-方向值(left, right, top, bottom) 可单独设置一个方向

59_边框

属性：
border：粗细样式(solid/double/dashed/dotted) 颜色

背景色可以蔓延到边框
border-方向值
可拆分为 border-width border-style border-color，这时四个方向可以分别写四个值

60_外边距

margin:

4个值；同padding
margin-方向值
背景色无法蔓延到外边距
支持负值
屏幕居中方案 margin: 0 auto;

61_外边距的特性

兄弟关系
- 垂直方向，外边距取最大值
- 水平方向，外边距合并
父子关系，给子盒子加外边距却作用在了父盒子上如何解决？
1. 转换为给父盒子加内边距
2. 给父盒子设置一个边框(transparent 透明的)
3. 让其中一个盒子浮动
4. 父盒子加 overflow: hidden

63_

img 标签和 p 标签之间有 3px 的边距？

	img {
		display: block;
	}

14_溢出属性

64_溢出属性

属性：

overflow: visible(溢出显示)/hidden(溢出隐藏，文本裁切)/scroll(滚动条，没溢出也有)/auto(溢出时自动添加滚动条)/inherit(继承父元素的效果)
overflow-x + overflow-y (同时使用，单独对某个轴设置)

66_溢出省略号

white-space(空余空间): normal/nowrap(不折行)/pre(预格式化)/pre-wrap(会折行，但是回车和空格正常显示)/preline(会折行，只保留回车)/inherit

<pre>预格式化文本</pre>

// 溢出省略号(盒子必须要有宽度)
white-space: nowrap; // 不折行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出文本显示省略号

15_元素显示类型

67_块元素

默认情况占一行
自上而下排列
可定义自己的宽度和高度
一般作为其他元素的容器( p 标签内部通常不嵌套)
div p ul li ol dl dt dd h1-h6
display: block;
display: list-item;

68_行内(内联)元素&行内块元素

行内元素：

横着排
不能定义宽度和高度
不支持margin padding等
a b em i span strong
display: inline;

行内块元素：

同时具备内联元素和块元素的特点
img input
display: inline-block;

69_盒子模型

行内元素，只能设置边距的左右边距，不能设置上下边距
行内块元素，能设置上下左右边距

70_元素类型相互转换

display: block/inline/inline-block

display: none // 隐藏

16_定位

76_属性与属性值

属性：

position:
- static 静态定位(默认)
- absolute 绝对定位脱离文档流没有父元素或者父元素没有定位，偏移时参照物是浏览器窗口的第一屏；有父元素且父元素有定位，参照物是父元素
- relative 相对定位不脱离文档流偏移时参照物是自己的初始位置
- fixed 固定定位脱离文档流偏移时参照物是浏览器当前窗口
- sticky 粘性定位可做吸顶效果
偏移位置: top left right bottom(距离哪个部位 XXpx )

77_静态定位&相对定位

相对定位不脱离文档流，盒子原位置依旧被占用

78_绝对定位

脱离文档流，盒子原位置被让出来
有父盒子且父盒子有定位时：子绝(脱)父相(不脱)

79_固定定位

做广告

80_粘性定位

position: sticky;
top: 50px; // 黏在距离顶部50px位置

CSS3新增加的，兼容性不好

81_

opacity(透明度): 0~1;

83_层级

不设置时：后来者居上
z-index(值越大，层级越高(越靠上显示)):

84_绝对定位的深入探索

父子关系时，只有给子盒子设置 z-index 为负值时，父盒子会才覆盖子盒子
兄弟关系时，层级关系正常
设置绝对定位会让一个行内元素变成块级元素

tip：如何让一个行内元素变成块级元素？

// way1
dispaly: block;

// way2
position: absolute;

// way3
float: ;

85_水平垂直居中

position: absolute;
top: 50%;
left: 50%;
margin-top: -盒子自身高度的一半;
margin-left: -盒子自身宽度的一半;

86_定位与浮动的区别

float：半脱离文档流，文字环绕
absolute：全脱离文档流，不会出现文字环绕效果

17_锚点

87_锚点

实现页面不同区域的跳转，使用 a 链接

<a href='#锚点名字'>

<div id="锚点名字">

18_精灵图(雪碧图)

88_精灵图

将各个分散的背景图有规则地合成一张整背景图，利用 background-position 来实现背景图片定位的技术

优点：

通过图片整合来减少对服务器请求的次数，提高页面加载速度
通过整合图片来减小图片体积

background-image: url();
background-position: ;

19_自适应

89_宽高自适应

宽度自适应：不设置 width 或者 width: auto;

设置 width: 100% 加边距会撑开滚动条
可用于导航栏、通栏布局

高度自适应：不设置 height 或者 height: auto;

min-height 最小高度
max-height
min-width
max-width

90_浮动元素之父元素高度自适应-01

写固定高度缺点：写死了
清浮动 clear: none/left/right/both
在浮动元素后面补一个盒子，设置一个属性 clear: both 缺点：代码可读性下降
在浮动元素的父盒子上加一个属性 overflow: hidden 缺点：内容多出来会被隐藏(二级菜单)

91_浮动元素之父元素高度自适应-02

伪元素

// XXX标签内的第一个字母
XXX::first-letter {

}

// XXX标签内的第一行
XXX::first-line {

}

// 在XXX标签内的最前添加内容
XXX::before {
	content: ;
}

// 在XXX标签内的最后添加内容
XXX::after {
	content: ;
}

清浮动(终极版)：

XXX::after {
	content: "";
	clear: both;
	display: block;
	width: 0;
	height: 0;
	visibility: hidden;
}

visibility: hidden; 占位隐藏
display: none; 不占位隐藏

92_窗口自适应

html, body {
	height: 100%;
}

之后内部盒子才能设置高度 XX%

93_两栏布局

way2:
calc() 函数：用于动态计算长度值

width: calc(100% - 200px) 符号前后必须加空格

94_三栏布局

way1:

margin-left: ;
margin-right: ;

<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
// 左、右、中顺序不能变

way2:

calc()

20_表单进阶

包在 form 里

95_单选框

// 一组之内 name 必须一致
<div>
	<input type="radio" name="a" id="man">
	<label for="man">男</lable> // for="id" 点击文字也能选中单选框
</div>
<div>
	<input type="radio" name="a" checked>女 // checked 默认选中
</div>

96_复选框

<div>
	<input type="checkbox" name="a">抽烟
	<input type="checkbox" name="a">喝酒
	<input type="checkbox" name="a">烫头
</div>

97_上传文件和隐藏字段

上传文件 <input type="file">
图片按钮 <input type="image" src=""> (用图片代替提交按钮)
隐藏 <input type="hidden" value="带给后端的个人信息，不是给用户看的">
禁用：设置 disabled 属性
只读：设置 readonly 属性

98_下拉菜单

<select size="" multipe="multipe">
	<option value="提供给后端需要的value值">辽宁</option>
	<option selected>山东</option>
	<option>山西</option>
	<option>河南</option>
	<option>河北</option>
</select>

size 显示几个
multiple 多选
value 提供给后端需要的 value 值
selected 默认选中

99_文本域(多行文本输入框)

<textarea clos="" rows="" placeholder="请输入你的意见">提前设置好的 value</textarea>

推荐使用 css 的方式控制宽高

textarea {
	width: 300px;
	height: 300px;
	
	// 重新设置大小
	resize: both两个方向(默认)/vertical垂直方向/horizontal水平方向/none;
}

placeholder 预置的提示文本
默认 value 值写在双标签内部，注意空格问题

100_字段集

<fieldset>
	<legend>XXX(缺口处)</legend>
</fieldset>

都可以用 css 设置其样式

21_HTML5

101_H5基础与语法

文件扩展符与内容类型保持不变，仍为 “.html” 或 “.htm”
DOCTYPE 声明不区分大小写
指定字符集编码 meta charset="UTF-8"
可省略标记的元素：
- 不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta
- 可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
- 可以省略全部标记的元素：html、head、body、colgroup、tbody
属性值可以用双引号，也可以使用单引号

102_H5新增语义化标签

header 页面中一个内容区块或整个页面的标题(头部)
footer 页面中一个内容区块或整个页面的脚注(底部)
section 页面中的一个内容区块
nav 页面中导航链接的部分(导航栏)
main(IE不兼容) 页面中的主要内容
aside 在article之外的，与article内容相关的辅助信息(侧边栏)
figure 一段独立的流内容，使用figcaption为其添加标题
article 一块与上下文无关的独立的内容

在这里插入图片描述

<header>Header</header>
<section>
	<nav>
		<figure>Nav</figure>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
	<main>
		<article>
			<header>Article Header</header>
			<p></p>
			<footer>Article Footer</footer>
		</article>
		<article>
			<header>Article Header</header>
			<p></p>
			<footer>Article Footer</footer>
		</article>
	</main>
	<aside>
		<figure>Aside</figure>
		<p></p>
	<aside>
</section>
<footer>Footer</footer>

103_H5新增音频标签

<audio src="" controls loop autoplay muted></audio>

controls 出现控制栏
loop 循环
autoplay 自动播放(刷新失效)( chrome 浏览器不会自动播放)
muted 静音

104_H5新增视频标签

<video src="" controls loop autoplay muted poster="" width="" height=""></video>

chrome 浏览器不会自动播放，但是加上 muted 属性后就可以设置自动播放
poster 视频海报
可 css 设置宽高

22_增强表单

105_input

<input type="">

color 生成一个颜色选择的表单
tel 唤起拨号盘表单(用于移动端)
search 生成一个搜索意义的表单(有快速删除的功能)
range 生成一个滑动条表单
支持属性：min、max、value(默认值)、step(步长)
number 生成一个数值表单
支持属性：min、max、value、step
email 限制用户必须输入 email 类型
url 限制用户必须输入 url 类型(完整地址)
date 限制用户必须输入日期
month 限制用户必须输入月类型
week 限制用户必须输入周类型
time 限制用户必须输入时间类型
datatime-local 选取本地时间

106_选项列表(数据列表)

<input type="text" list="datalist的id">

<datalist id="mylist">
	<option value="手机"></option>
	<option value="手表"></option>
	<option value="手镯"></option>
	<option value="手环"></option>
</datalist>

107_属性

autofocus 自动获取焦点
required 必填项，不能为空
multiple 在邮箱中使用时支持多个地址，中间用 “,” 隔开
pattern=“正则表达式”

23_CSS3

108_CSS3基础

渐进增强：先针对低版本浏览器进行构建页面，保证最基本的功能；再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

109_层级选择器

// 子代(亲儿子)选择器
A>B {

}

// 选择A元素后的第一个兄弟B
A+B {

}

// 选择A元素后所有的亲兄弟B
A~B {

}

110_属性选择器

// 选择所有具有“属性”的元素
[class] {

}

// 选择div且身上具有“属性”的元素
div[class] {

}

// 选择div且属性为box的元素(完全匹配)
div[class=box] {

}

// 选择div且属性包含box的元素(包含匹配)
div[class~=box] {

}

// 模糊匹配
class^=b // 以b开头
class$=b // 以b结尾
class*=b // 包含b

可以应用于各种标签+属性

111_结构伪类选择器

// 选择到第一个A
A:first-child {

}

// 选择到最后一个A
A:last-child {

}

// 选择到第x个A
A:nth-child(x) {

}

// 选择到偶数个的A
A:nth-child(2n/even) {

}

// 选择到奇数个的A
A:nth-child(2n+1/2n-1/odd) {

}

// 选择是A下面唯一孩子的B元素(独生子女)
A B:only-child {

}

// 选择A且没有孩子的元素(一点东西都没有，包括空格等)
A:empty {

}

// 根节点选择器(html)
:root {

}

112_目标伪类选择器

// 当前div节点处在目标节点上时(用锚点点击时)
div:target {

}

<a href='#锚点名字'>

<div id="锚点名字">

113_UI状态伪类选择器

E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled 匹配所有用户界面(form表单)中处于不可用状态的E元素
E:focus 匹配所有用户界面(form表单)中处于聚焦状态的E元素
E:checked 匹配所有用户界面(form表单专门用于 radio 和 checkbox)中处于选中状态的E元素
(先要清除 checkbox 的默认样式)

// 清除 checkbox 的默认样式
input[style=checkbox] {
	appearance: none;
	
	// 自己设置样式
	……
}

E:selection 匹配E元素中被用户选中或处于高亮状态的部分

114_否定和动态伪类选择器

否定伪类选择器：

// 加not
A:not(:first-child) {

}

动态伪类选择器
E:link
E:visited
E:hover
E:active

115_文本阴影

属性：

text-shadow: 水平方向位移垂直方向位移模糊程度颜色， ……(支持多个阴影);

116_盒子阴影

属性：

box-shadow: 水平方向位移垂直方向位移模糊程度阴影大小颜色 inset(内阴影)， ……(支持多个阴影);

117_圆角边框(上)

属性：

border-radius: px/百分比
- 一个值；四个角一样
- 两个值；左上右下、左下右上
- 三个值；左上、左下右上、右下
- 四个值；顺时针
border-top-left-radius(上下在前，左右在后):
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:

118_圆角边框(下)

属性：

border-radius: 水平(可四个方向) / 垂直(可四个方向)
不支持一个方向单独设置
圆：正方形盒子，设置 border-radius 为边长(padding+宽高+border)的一半/50%
半圆：长方形盒子宽度是高度的两倍，设置 border-radius 左上和右上为“高度值”，左下右下为0
扇形：正方形盒子，设置 border-radius 左上为边长，其他方向为0

120_字体引入

// 定义
@font-face {
	font-family: 自定义字体名称;
	src: url();
	[font-weight: ;]
	[font-style: ;]
}

// 使用
A {
	font-family: 自定义的字体名称;
}

121_怪异盒模型

属性：

box-sizing: content-box(默认标准盒模型)/border-box(怪异盒模型)
在怪异盒模型中，宽度为 width+padding+border；高度为 height+padding+border

24_弹性盒

122_弹性盒

属性：

display: flex;

作用：加在父元素身上

子元素自动横向排列
子元素如果是行内元素，转变为块级元素
只有一个子元素时，在子元素上加 margin: auto 可实现该子元素水平、垂直自动居中

123_修改主轴方向

主轴默认水平方向排列
与主轴垂直的轴为侧轴

属性：

flex-direction: row(默认水平)/column(竖直)/row-reverse/column-reverse;

124_主轴侧轴对齐方式

属性：

justify-content(主轴对齐方式): flex-start/flex-end/center/space-between(两端对齐)/space-around(距离环绕);
align-items(侧轴对齐方式): flex-start/flex-end/center;

125_折行与行间距

属性：

flex-wrap: wrap;
align-content(调整折行后的行间距): flex-start/flex-end/center/space-between/space-around;

25_项目( flex 下的盒子)身上的属性设置

126_对齐方式

属性：

align-self: flex-start/flex-end/center/baseline/stretch(拉伸，不设置宽或高时默认拉伸);
弹性盒外面的大盒子叫容器，里面的小盒子叫项目

127_调整顺序

属性：

order: (默认0，正值向后调，负值向前调);

128_剩余宽高

设置在项目上
可用于三栏布局

属性：

flex: 1;
多个 flex 时，值为比例

129_

iconfont 使用
1. 选择图标添加至购物车
2. 添加至项目
3. 下载至本地
4. 使用
  - 引入 <link rel="stylesheet" href="testfont/iconfont.css">
  - <span class="iconfont icon-XXX"></span> (可用任意标签套)
当做一个普通的字体文件，可设置大小、颜色等

26_移动端布局

133_中

模拟器显示的像素是CSS像素(设备的独立像素)
物理分辨率是设备像素
设备像素比(dpr) = 物理像素/CSS像素
为了清晰的页面，所以设计稿需要按照物理像素提供
只提供一份设计稿
- 尽量使用百分比布局
- 尽量使用弹性盒布局
- 尽量使用 rem 布局

134_下

移动端开发(理想视口)：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

width=device-width 理想宽度等于设备宽度
initial-scale=1.0 缩放比为1
user-scalable=no 用户不允许缩放

138_

// 滚动条隐藏
::-webkit-scrollbar {
	display: none;
}

139_

两列单独滚动：

大盒子 overflow: auto;
左右两栏分别 overflow: auto;

140_横向滚动(水平方向滚动条)

ul {
	dispaly: flex;
	overflow: auto;
}

ul li {
	flex-shrink: 0; // 不允许挤压
}

141_多列布局(可做瀑布流效果)

属性：

column-count(显示的列数): 5;
column-gap(调整列间距): 30px;
column-rule(列边框): 2px solid red;
column-fill(列高度是否统一): balence(均匀)/auto;
column-width(调整列宽，容易与列数冲突): 500px;
column-span(横跨几列，加给要设置横跨的项目): none/all;

142_

break-inside: avoid; 禁止盒子内部折行

27_响应式布局

优点：

面对不同分辨率设备灵活性强
能快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下
代码冗余，会出现隐藏无用的元素，加载时间长
会受多方面因素影响而达不到最佳效果
一定程度上改变了网站原有布局结构，会出现用户混淆的情况

设计方法：

模块中内容：挤压-拉（布局不变）
模块中内容：换行-平铺（布局不变）
模块中内容：删减-增加（布局不变）
模块位置变换（布局改变）
模块展示方式改变：隐藏-展开（布局改变）

143_媒体查询

@media 设备 and (min-width: XXpx) {
	标签 {
		样式;
	}
}

设备类型：

all 所有设备
aural 听觉设备
braille 电子触觉设备
handled 便携设备，如手机、平板电脑
print 打印预览图等
projection 投影设备
screen 显示器、笔记本、移动端等设备==（常用）==
tty 如打字机或终端等设备
tv 电视机等设备类型
embossed 盲文打字机
and 是关键字，其他关键字还包括 not(排除某种设备)、only(限定某种设备)
(min-widtn: 400px) 是媒体特性
(min-width: 1000px) 大于1000时
(max-width: 1000px) and (min-width: 500px) 大于500，小于1000时
(max-width: 500px) 小于500时

144_横竖屏检测

// 竖屏
@media screen and (orientation: portrait) {

}

// 横屏
@media screen and (orientation: landscape) {

}

28_rem布局

146_em与rem

em：相对单位，相对于父元素的字体大小
rem(root em)：相对单位，相对于根元素(html)的字体大小

147_rem布局准备工作

<script>
	// fontsize 计算
	document.documentElement.style.fontSize = 
	document.documentEmement.clientWidth/750 * 16 + 'px'

	// fontSize = 当前设备的CSS布局宽度/物理分辨率(设计稿的宽度) * 基准font-size
	// rem则为 量多少后除基准font-size
</script>

插件 px to rem&rpx
XXXpx-
F1 -> 搜索cssrem
文件 -> 首选项 -> 设置 -> 搜索px

149_vh和vw

vh(view-height) 100vh === 视口的高度
vw(view-width) 100vw === 视口宽度

150_单位转换

1px = 100vw/CSS像素
将根节点 font-size 用 vw 表示
在设计稿上量取长度后需要除“设备缩放比”

没有滚动条时，100vw === 100%
100vw 包含滚动条
100% 刨除滚动条剩余空间占满

29_渐变

151_线性渐变

属性：

background: linear-gradient(方向, 颜色1 百分比, 颜色2 百分比, 颜色3 百分比, ……)
- 支持方向：to top/bottom/left/right/top right/……
- 支持角度写法：XXXdeg
- 支持多个颜色，百分比值表示到达此百分比后完全过渡为此颜色

152_径向渐变

属性：

background: radial-gradient(中心位置, 形状, 渐变大小, 颜色1 百分比, 颜色2 百分比, ……)
- 中心位置：两个百分比（默认 center）
- 形状：circle(圆)/ellipse(椭圆)
- 渐变大小(-webkit-radial-gradient，兼容性差，需要加当前浏览器内核的前缀)：closest-side(最近边)/farthest-side(最远边)/closest-corner(最近角)/farthest-corner(最远角)

153_重复渐变

属性：

background: repeating-linear-gradient()
background: repeating-radial-gradient()

30_过渡

155_动画过渡属性

属性：

transition: 要控制的属性, 动画时间, 动画效果, 延时;
要控制的属性：某个属性或者all
动画时间：s/ms
延时：s/ms
除了 display: none/block ，其余属性都可以控制（可改用高度值配合溢出隐藏实现）

156_动画过渡类型

linear(默认) 匀速
ease 逐渐慢下来
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
cubic-bezier.com 贝塞尔曲线

157_动画过渡单一属性

transition-property: 要控制的属性1 要控制的属性2 要控制的属性3;
transition-duration: 动画时间;
transition-timing-function: 动画效果;
transition-delay: 延时;

31_2D属性

158_平移

属性：

transform: translate();
- translateX(XXXpx) (如果用百分比是相对于自身的百分比)
- translateY(XXXpx)
- translate(X轴, Y轴)
设置 left 等属性会频繁造成浏览器回流重排，而 transform 和 opacity 属性不会，因为它们是作为合成图层发送到 GPU 上，由显卡执行渲染。

159_缩放

transform: scale(缩放比);
- 负值：倒向放大效果
- scaleX
- scaleY
改变中心点的位置：transform-origin: left top; 从左上角放大

160_旋转

transform: rotate(XXXdeg)
- 正值顺时针
- 负值逆时针
- rotateX()
- rotateY()
- roteteZ() === rotate()
- 改变绕着哪个点旋转 transform-origin

162_多值属性

transform: 值1, 值2, ……;
先位移再缩放、旋转
先缩放再位移会导致位移距离被缩放
先旋转再位移会导致坐标轴被旋转，位移方向改变

163_倾斜

transform: skew();
- skewX(XXdeg)
  - 正值：拽着右下角，向右边拉动，形成30deg夹角
  - 负值：拽着左下角，向左边拉动，形成30deg夹角
- skewY()
- skew(x, y)

32_关键帧动画

166_属性

属性：

animation: 定义的名字, 动画时间, 动画效果, 延时, 循环次数;

// 声明动画
@keyframes 名字 {
	from {
		初始的状态;
	}
	
	to {
		结束的状态;
	}
}

@keyframes 名字 {
	0% {
		初始的状态;
	}
	
	20% {
		结束的状态;
	}

	……
}

循环次数：数字/infinite(无限次执行)

167_单一属性

属性：

animation-name(动画名称):
animation-duration(持续时间):
animation-timing-function(过渡类型): linear/ease/ease-in/ease-out/ease-in-out
animation-delay(延迟时间):
animation-iteration-count(循环次数):
animation-play-state(运行状态): running{(默认)/paused;
animation-direction(动画方向，可做抽屉效果等): normal/reverse/alternate(正常交替)/alternate-reverse(反向交替);
animation-fill-mode(保留一帧): none/forwards(最后一帧)/backwards(初始一帧)

169_逐帧动画

将 animation-timing-function 属性值设置为 step(1, end)

end 保留当前帧，动画结束时看不到最后一帧 === step-end
start 保留下一帧，看不到第一帧，从第一帧很快跳到后一帧 === step-start

170_animate动画库

http://www.animate.net.cn/

引入文件 <link rel="stylesheet" href="地址">
使用 <div class="animated 动画名称自添加CSS样式"></div>

兼容性不好

33_3D

171_平移

属性
父盒子加：

transform-style: flat(默认2D)/preserve-3d(要想实现3D效果必须要加);
perspective(景深): XXpx; (默认无限远，要想看到Z轴平移效果习惯设置800—900)

自身加：

transform: translateZ(XXpx); === transform: translate3d(0, 0, XXpx);

172_旋转

属性：
父盒子加：

transform-style: preserve-3d;

自身加：

transform: rotateX();
transform: rotateY()
transform: rotateZ()
transform: rotate3d(0~1, 0~1, 0~1, XXdeg) (XXdeg的多少倍)

173_缩放

属性：
父盒子加：

transform-style: preserve-3d;
perspective: 800px;

自身加：

transform: scaleX();
transform: scaleY();
transform: scaleZ(20) rotateX(45deg); （配合旋转使用才能看出来效果）
transform: scaleZ(1, 1, 20);

34_网格布局

175_网格布局

flex 布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局
grid 布局是将容器划分为“行”和“列”，产生单元格，然后指定项目所在的单元格，可以看作是二维布局

属性：

display: grid; 块级网格
display: inline-grid; 行内块级网格

176_行列属性

属性：
给容器加：

grid-template-rows(每个行高): ;
- 固定值：200px 200px 200px;
- 百分比：25% 25% 25% 25%;
- repeat(3, 33.3%);
- repeat(auto-fill, 20%/300px);
- fr 片段：1fr 2fr 1fr;
- minmax：minmax(100px, 200px) 200px 300px;
- auto：100px auto 200px;
grid-template-columns(每个列宽): ;

177_间距

属性：

grid-row-gap: ;
grid-colum-gap: ;
grid-gap: 行间距列间距;

178_区域命名与合并

属性：
给容器加：

grid-template-areas: 'a a c'
					 'd e f'
					 'g h i'

给项目加：
grid-area: a;

180_对齐方式

属性：
控制项目在容器中的显示位置(给容器加)：

grid-auto-flow: column; 改变顺序
justify-content: start/end/center/stretch/space-around/space-between/space-evenly;
align-content: start/end/center/stretch/space-around/space-between/space-evenly;
place-content: justify-content align-content;

控制内容在项目中的显示位置(给容器加)：