学习笔记"/>
千峰学习笔记
Day1
html和html5的区别
（都是用来设置网页） html5（html的第五个版本）通常说的html4 新增加了很多模块 html5不区分大小写）
站点：简单理解为一个文件夹，规划网站的所有内容和代码，整合资源。
页面的组成：结构（网页的结构部分）、表现（网页的样式）、行为（网页要实现的交互功能）。
web标准：网页制作的标准（大部分W3C（管结构和表现）起草发布，有部分ECMA（管行为）起草发布）
shift+tab 后退
标签
对标签（双标签）：<标签 属性=" 值 "></标签>
单标签（空标签）： <标签 属性=” 值 "/>
常用标签
标题标签
<h1>一级标题</h1>(标题标签 独占一行 文本默认加粗变大 依次变小 h1在同一个页面中只允许出现一次)
<h2>二级标题</h2>
<h3>..</h3>
<h4>..</h4>
<h5>..</h5>
<h6>..</h6>
倾斜标签（只占据自己内容大小的位置）
<i>倾斜的视觉效果</i> <em>倾斜的文本（具有对文本的强调 有利于搜索引擎优化）</em>
加粗标签（只占据自己内容大小的位置）
<b>视觉加粗效果</b>
<strong>具有强调的作用 有利于搜索引擎的优化</strong>
下划线标签（只占据自己内容大小的位置）
<u>下划线</u>
换行标签
<br/>换行功能
水平线
<hr>
上标
<sup>
下标
<sub>
段落标签 (p标签里面不能嵌套独占一行的元素)
<p>独占一行，只能放文本、图片 只占据自己内容大小位置的元素 也不能嵌套本身</p>
文本节点标签（小段文本标签）
<span> 文本节点标签 只占据自己内容大小的位置 通常结合css样式一块写</span>
盒子标签
<div>独占一行 用来搭建页面结构</div>
三大列表
无序列表(独占一行、默认小黑原点修饰、通常用来做导航)
<ul type=" disc( 小黑点 ) / circle( 空心圆) / square( 实心方块 ) ">
<li></li>
</ul>
有序列表
<ol type=" 1 / a / A / i / I " start="3"（表示从3开始）>
<li></li>
</ol>
自定义列表 【 dl >（父子关系） dt +(兄弟关系) dd 】
<dl>（独占一行 通常用来做双导航）
<dt>小标题</dt>（一个dl里面只有一个dt 可以有多个dd）
<dd>对小标题的解说</dd>
</dl>
a：超链接 （实现页面与页面之间的跳转 蓝色文本带有下划线 鼠标移入默认为小手 只占据自己内容大小的位置）
href=" # " 空地址 不跳转 只刷新一次
target=" _self（当前窗口打开 默认） / _blank（不断打开新窗口） / _new(新开窗口 但只开一个 后面再点击链接都是在之前开的新窗口刷新) "
title=" 鼠标悬停时2的提示文本 "
图片 只占据自己内容大小的位置
< img src =" .png /.gif /.ipg" width=“值” height=“值” title（不是必须属性 主要给用户看）=" 鼠标悬停时显示 " alt（必须属性 空的也写 主要给搜索引擎查看）= " 图片加载失败时显示的文本提示 " />
width：宽度 height：高度 (单设高度或者宽度 另一边会等比例缩放)
图片格式： jpg 普通格式
png 背景透明图
gif 动态图
图片路径：相对路径
src=" images/.jpg ../返回上级目录 ./当前目录 具有强调的意思"
绝对路径
从盘符出发
从域名地址出发
border边框
form表单（收集用户信息）
<from action=" 提交到页面要处理的地址" method=" 提交方式" >
用户名：<input type="text / password " name="name" placeholder="请输入用户名" value=“用来接收用户所输入的信息” >
<input type=" submit " value（留给用户看就写 不写用户可以自己输入）=" 登录 "/>
</from>
css
样式语法
选择器{
属性：值 ；
}
1、内部样式
2、外部样式
3、内联样式
<标签 style=" 属性：值；" ></标签>
样式优先级 ：
内联样式 > 内部样式 / 外部样式
内部样式和外部样式受到加载顺序的影响，后加载的会覆盖先加载的
公共样式（reset.css）表先引入 首页样式表后引入
选择器：选中指定的元素
类型选择器{ 元素选择器 标签选择器}：div p a img span i em...
类选择器（class选择器）<标签 class =" mz "></标签>
.mz{ } 注： 在同一个页面中可以有多个相同而值
在同一个class中可以有多个值
具有重用性，通常用来写样式
id选择器
<标签 id=" mz "></标签>
#mz{ } 注：在同一个页面中不能出现对此相同的值
在同一个id中只有一个值
具有唯一性，一般不用来写样式
通配符* 统统匹配 匹配所有的元素
*{ margin：0； padding：0； }
群组选择器
选择器1，选择器2，选择器3{ } 匹配1，2，3，共匹配了三个
包含选择器（后代选择器）
选择器1 选择器2 选择器3 { } 匹配1里面的2里面的3，最终匹配的是3
选择符权重
id选择器 （100）> class选择器（10） > 类型选择器（1）
后代选择器为权重之和
群组选择器为选择器本身
内联样式权重1000
继承样式权重为零
最高权重 !important
css属性
font-size：文本大小
12px 最小文本大小
16px默认文本大小
px 具体的像素单位
em 跟随最近的font-size值成倍数关系
rem 跟随根元素（html）的font-size值成倍数关系
color文本颜色
颜色单词：skyblue yellowgreen
三原色模式：
r红（0-255）g绿（0-255） b蓝（0-255） a透明度 0-1
rgb（0，0，0）
rgba（0，0，0，0~1）
十六进制：取值范围 #0-9 a-f #aabbcc 缩写 #abc
font-family字体
font-family：字体1，字体2，字体3；
注：中文字体需要添加引号
多个英文单词表示一个字体需要加引号
单个单词表示一个字体不需要加引号
多个字体之间用逗号隔开
font-weight文字加粗
font-weight：是否加粗
bold 加粗效果
bolder 粗体字
100-300 不加粗
400 == normal 常规文本 不加粗
500 不加粗
600-900 加粗
font-style:是否倾斜
italic 倾斜效果
oblique 斜体字
normal 常规文本
line-height 行高 ：文本垂直对齐
行高值 < 高度值 偏上
行高值 > 高度值 偏下
行高值 = 高度值 居中
注：没有负数
font （综合写法）
font：倾斜 加粗 文本大小/行高 字体类型
letter-spacing 字间距
word-spacing 词间距
text-align :文本水平对齐方式
left 左对齐
center 水平居中
right 右对齐
justify 两端对齐
text-decoration：文本修饰
overline 上划线
line-through 中划线(删除线)
underline 下划线
none 没有线
text-indent：首行缩进
px em
注：可以为负数
list-style列表属性
list-style:none ; == list-style-type:none ;取消列表修饰符
背景相关属性
background-color 背景颜色
background-image 背景图片
backwground-image：url（" 图片地址 "）--注 图片默认重复
background-attachment:背景关联；
scroll 滚动查看
fixed 固定不动
background-attachment: fixed:相对于窗口而言
scroll ：相对于盒子而言
精灵图
1、图片格式png
2、通过背景图插入图片
3、通过背景定位改变图片位置
浮动
继承（权重为0）
子元素未设置样式，父元素设置的样式作用到了子元素身上
盒模型的组成部分
内容区 ： width height
内边距区： padding
边框区域： border
外边距区： margin
边框
盒模型大小计算
文本溢出overflow
visible 默认值
hidden 溢出隐藏
scroll 滚动查看
auto 自适应
注：数字和英文不换行
文本格式white-space
normal 默认值
pre 原格式输出
pre-wrap 保留换行
pre-line 保留换行，不缩进
nowrap 强制不换行，遇到br换行
text-overflow：是否显示省略号
clip 剪裁
ellipsis 省略号
注：实现省略号步骤
width：；
white-space：nowrap；
overflow：hidden；
text-overflow：ellipsis;
块状元素（block） div p dl dt dd ul ol li...
1、能设置宽高
2、能正常设置内外边距
3、独占一行
4、矩形显示
5、通常作为容器
行级元素（inline）--span i em b strong br...
1、不能设置宽高
2、不能正常设置垂直方向的内外边距
3、在一行显示
4、非矩形显示，除了最小单位
5、通常不作为容器使用
行内块元素（inline-block）--img input...
1、能设置宽高
2、能正常设置内外边距
3、在一行显示
4、不作为容器
元素类型转换
display:;
inline 行级元素
block 块级元素
inline-block 行内块元素
none 隐藏
注：行内块元素 元素的话默认底部对齐 文字底部找文字底部对齐 文字底部找图片底部对齐
垂直对齐方式vertical-align （
vertical-align: top 顶部对齐
middle 中间对齐
bottom 底部对齐
注：主要针对行块级元素有效
标尺：
width：0；
height: 100%
display:inline-block;
vertical-align:middle;
父级元素设置text-align：center；
伪类选择器
a:link{未访问状态}
a:visited{访问过后状态}
a:hover{鼠标悬停状态}
a:active{鼠标按下状态}
.box1:hover{ }鼠标移入自己 改变自己
.box1:hover .box2{ } 鼠标移入自己，改变子集
小型大写字母 font-variant
文档流：
普通流：元素默认 从上往下 或 从左至右的排列顺序
浮动流：添加了浮动元素
定位流：添加了定位元素
定位：position
static: 默认定位 （不能改变元素的位置）
relative：相对定位 （1、能改变元素的位置
2、占据文档流
3、参考自身加载到页面中的初始位置）
absolute：绝对定位 （1、能改变元素的位置
2、脱离文档流
3、默认参考根元素改变自身的位置
4、或者参考最近的 有定位的 父元素，默认定位除外（html自带定位））
fixed: 固定定位 （1、能改变元素的位置
2、脱离文档流
3、参考浏览器窗口改变自身的位置
4、在页面中固定不动）
sticky：粘性定位（1、结合了相对定位和固定定位的特征 left top）
子绝父相 & 层级关系（z-index）
高度不继承 行高可以继承
加了绝对定位的元素宽度大小将有内容撑起来 解决：设置宽度 width：100%；
box1和con1和con2是两种定位居中方法
当con2的宽度大于con1 con2现在用的方法margin：auto；会无效 就要延用box1所用的方法
居中定位方法
锚点
<a href="#id">点击位置</a>
<标签 di="值"> 跳转位置</标签>
opacity 全局透明
opacity:(0-1)
filter:alpha(opacity=(0-100)); //给ie9（低版本）以下设置用（相差一百倍）
表格
表单（补充）
BFC
自适应
显示隐藏
W
伪对象选择器
清除浮动（清除高度塌陷问题）
父元素未设置高度，子元素浮动，会造成父元素高度塌陷
解决办法：
1、给父元素添加高度
缺点：不灵活
2、给父元素添加overflow：hidden；（触发为BFC）
缺点：超出父元素的内容将被隐藏（宽度）
3、给浮动元素最后添加一个块级兄弟元素，并设置clear: 'left right both
缺点：代码冗余
4、万能清除法
（zom:1是版本兼容可设置）
百分数写页面
HTML5新增标签
音视频标签
HTML5新增表单
浏览器前缀兼容
线性渐变（至少两个颜色之间的平滑过渡/从一个方向到另一个方向）
线性渐变：linear-gradient(方位、颜色1、颜色2.。。)
方位：left、right、top、bottom to left to left top 角度deg
颜色：颜色单词 十六进制 rgb（） rgba（） transparent
起始位：后一个起始位的值必须比上一个起始位的值要大
径向渐变（从中心点向四周的方向扩散）
background：radial-gradient（圆心点坐标，形状，大小，起始颜色1、起始颜色2。。。）
坐标：
默认中心点
px %
left、right、top、 bottom
形状： 跟元素的形状有关
circle 圆 ellipse 椭圆（默认）
大小：closest-side：最近边；
farthest-side：最远边；
closest-corner：最近角；
farthest-corner：最远角；
颜色：颜色单词 十六进制 rgb（） rgba（） transparent
起始位：后一个起始位的值必须比上一个起始位的值要大
重复渐变
重复线性渐变：repeating-linear-gradient（）
重复径向渐变：repeating-radial-gradient（）
过渡（由一个状态到另一个状态的平滑效果，通常改变的是css的属性值）
transition：过度属性 过渡时间 延迟时间 动画类型；
transition-property：过度属性；
具体属性：
all 所有属性
2D（transform）
2D位移：
2D缩放：
2D旋转：
2D倾斜
2D变换基点
3D
景深：近大远小的效果
perspective：；900-1200px 给父元素设置 子元素出现效果
3d环境：
transform-style: ;
flat 默认值 2d环境
preserve-3d 3d环境
3d功能函数：
位移：
translateZ（）
translate3D（x，y，z）
旋转：
rotateZ（）
rotate3D（x，y，z，deg）
x y z的取值范围 0-1
deg 角度
缩放：
scale（）
scale3D(x,y,z)
[注] 单独使用没有明显效果，需要结合其他的功能函数一块使用
3D观测角度：
transform-origin：水平 垂直；
left center right
top center bottom
px %
动画：
1、创建动画
方式一：
@keyframes mz{
from{ } 起始位置
to{ } 结束位置
}
方式二：
@keyframes mz{
0%{ }
50%{ }
100%{ }
}
调用动画
animation：；
animation-name：动画名字；
animation-duration：动画时间；
animation-timing-function：动画类型；
linear
ease
ease-in
ease-out
wase-in-out
step-start 一步一跳
animation-delay：延迟时间；
animation-iteration-count：执行次数；
infinite 无限循环
number 具体次数
animation-direction：运动方向；
normal 默认运动方向
reverse 反向运动
alternate 先正后反
alternate-reverse 先反后正
animation-play-state：暂停或运动；
paused 暂停
runnight 运动
综合写法：
animation：名字 运动时间 延迟时间 动画类型 运动次数 运动方向 是否暂停；
动画库：
1、引入官方提供的css地址
2、复制类名
transition 和 animation的区别 ： （都能实现动画效果 ）
transition需要触发方式
animation 调用可以直接显示
css3选择器属性
结构伪类选择器
div：only-child{ } 选中div ，且div是唯一的一个子元素
div：not（.box）{ }否定选择器，选中div，但是排除calss为box的那个div
div：empty{ } 空元素选择器，选中内容为空的div
html：root{ }根元素选择器
目标伪类选择器
：target{ }
UI状态伪类选择器
：enabled{ }可用状态
：disabled{ }禁用状态
：checked{ }选中状态
用户行为选择器
：focus{ }获取光标状态
动态伪类选择器
：link{ }未访问状态
：visited{ }访问过后状态
：hover{ }鼠标移入状态
：active{ }鼠标按下状态
【注】顺序要求 LoVe--HAte 主要针对a的文本颜色
层级选择器：
e > f{ } 子元素选择器，选中儿子，不选孙子
e + f{ } 相邻兄弟选择器，选中e后紧挨着的那一个兄弟元素f
e ~ f{ } 通用兄弟选择器， 选中e后的所有兄弟元素f
css3属性：
文本阴影:
text-shadow:水平 垂直 模糊度 阴影颜色；
盒子阴影：
box-shadow：水平 垂直 模糊度 阴影大小 阴影颜色 内部阴影；
内部阴影 ： inset
背景相关属性
background-origin: 背景图起始位置；
padding-box 内边距区域（默认值）
border-box 边框区域
content-box 内容区域
background-clip：背景图剪裁区域；
border-box 边框区域（默认值）
padding-box 内边距区域
content-box 内容区域
background-size：背景图大小；
px %
cover 等比例缩放，图片有可能超出元素
contain 等比例缩放，元素有可能留白
【拓展】 background：url（），url（）；多背景图设置
颜色模式：
rgb（0，0，0，0）
hsl（0，0%，0%）
hsla（0，0%，0%）
h：色调 0-360
s： 饱和度 0-100%
l：亮度 0-100%
a：透明度 0-1
图片边框模式：
border-image 属性是一个简写属性，用于设置以下属性:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移(不加单位)。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-outset 边框图像区域超出边框的量(值是一个倍数)
border-image：url（图片地址）垂直偏移量 水平偏移量 填充方式 / 图片大小 / 图片扩张倍数；
填充方式:
round:从一边到另一边
repeat 从中间到两边
stretch 拉伸（默认值）
圆角：
border-radius：10px(圆角)
border-radius：10px / 20px;( 水平圆角 / 垂直圆角 )
px % em
计算模式：
calc（100%-200px）
用于不同单位之间的运算
运算符前后必须有空格
穿透模式：
pointer-events：none；
盒模型：
标准盒模型：
w = width + 左右内边距 + 左右边框 + 左右外边距
H = height + 上下内边距 + 上下边框 +上下外边距
box-sizing ：content-box；
怪异盒模型（IE盒模型）：
w = width（包括了边框和内边距） + margin
H = height（包含了边框和内边距） + margin
box-sizing：border-box；
触发成为怪异盒模型方式：
方式一：box-sizing：border-box；
方式二：或者丢失<!doctype html>，在ie低版本浏览器下呈现怪异盒模型
弹性盒子：
1：分为容器（父元素）和项目（子元素）
2：设置为弹性盒后，浮动 清除浮动 vertical-align都失效
3：分为容器属性和项目属性
容器属性：
1：display：设置为弹性盒子；
flex
inline-flex
2：flex-direction：设置主轴方向；
row 水平主轴
row-reverse 反向水平主轴
column 垂直主轴
column-reverse 反向垂直主轴
3： flex-wrap：是否换行；
nowrap 不换行（默认值）
wrap 换行
wrap-reverse 反向换行
4： flex-flow:主轴方向 是否换行；
5：justify-content：主轴对齐方式；
flex-start 起始位置
center 居中
flex-end 结束位置
space-around 两端平分
space-between 两端对齐
space-evenly 平均分配
6：align-items：侧轴对齐方式；
flex-start 起始位置
center 居中
flex-end 结束位置
stretch 拉伸（默认值）
baseline 文本底部对齐
7：align-content：多根侧轴对齐方式；
flex-start 起始位置
center 居中
flex-end 结束位置
space-around 两端平分
space-between 两端对齐
space-evenly 平均分配
stretch 拉伸（默认值）
项目属性：
1：align-self：侧轴对齐方式；
flex-start 起始位置
center 居中
flex-end 结束位置
stretch 拉伸
auto 跟随容器的align-items的值一致（默认值）
2：order：反向排序；
数字越大，越靠后，反之靠前
可以为负数
3：flex：缩小 放大 长度；
flex-grow：放大；
flex-shrink：缩小；
flex-basis：长度；
多列布局：主要设置大量文本的排版布局
column-count：分列；
column-gap：列间距；
column-rule：列边框 边框形态 边框颜色；
column-fill：填充方式；
auto 优先填满上一列
balance 尽可能平均分
column-span：是否跨列；
none 不跨列
all 横跨所有列
column-width：列宽度；
columns：列数 列宽度；（要么同时满足两个条件、要么尽量满足一个条件）
媒体查询：
@medial 媒体类型 and （条件表达式）{
选择器{属性：值；}
}
媒体类型：
all 所有媒体
screen 电脑 移动端 显示屏。。
条件表达式：
min-width： 值从小到大排列
max-width： 值从大到小排列
移动端准备：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
设备像素比 （dpr）= 物理像素 / 逻辑像素
常见的设计稿尺寸：
750px dpr=2 测量出来的尺寸需要除以2，再写到css中
640px dpr=2 测量出来的尺寸需要除以2，再写到css中
1080px dpr=3 测量出来的尺寸需要除以3，再写到css中
常见单位：
px 具体像素单位
% 百分比单位
em 跟随最近的font-size的值成倍数关系
rem 跟随根元素（html）的font-size的值成倍数关系
vw 跟随浏览器窗口的宽度变化而变化 100vw = 满屏
vh 跟随浏览器高度的变化而变化
vmin 浏览器窗口的宽高谁小就跟随谁的变化而变化
vmax 浏览器窗口的宽高谁大就跟谁的变化而变化
移动端页面写法
1、<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2、设置html的font-size：；
（640px--37.5vw）
（1080px--22.222vw）
（750px--32vw）
（img.listImg 是img同时有listImg的类名）
px转换为rem的vscode快捷键：alt+z
网格布局
容器属性：
1：display：；
grid
inline-grid
2：grid-template-columns：分列；
grid-template-rows：分行；
px % fr auto
repeat（数目，大小）
数目：具体数字 auto-fill
minmax（最小值，最大值）
3：grid-row-gap：行间距；
grid-columns-gap：列间距；
grid-gap：行间距 列间距；
gap：行间距 列间距
4：grid-template-area："分区1 分区1 分区2 分区2 分区3 "
"分区1 分区1 分区4 分区5 分区5"；
【注】跟项目属性grid-area：调用分区；一起使用
分区名称遵循命名规则
grid-template-columns：[网络线1] 分列 [网络线2]；
grid-template-rows：[网络线1] 分列 [网络线2]；
5：grid-auto-flow：填充方式；
column 优先填满上一列
row 优先填满上一行（默认值）
6：justify-items：内容在单元格内的水平对齐方式；
align-items：内容在单元格内的垂直对齐方式；
综合写法：place-items：垂直 水平；
start 起始位置
center 居中
end 结束位置
stretch 拉伸（默认）
7：justify-content：网格整体在容器内的水平对齐方式；
align-content：网格整体在容器内的垂直对齐方式；
综合写法：place-content：垂直 水平；
start 起始位置
center 居中
end 结束位置
stretch 拉伸（默认）
space-between 两端对齐
space-around 两端平分
space-evenly 平均分配
项目属性：
1：grid-area；调用分区；
【注】跟容器属性 grid-template-areas：分区；一起上使用
2：grid-colums-start：列起始网线格；
grid-columns-end：列结束网格线
grid-row-start：行起始网格线；
grid-row-end：行结束网格线；
综合写法：
grid-column：列起始线 / 结束线；
grid-row：行起始线 / 结束线；
Day2
结构：写在body里面
表现：修饰结构 有自己的书写位置
外部样式：
1、创建一个独立的css文件 后缀为.css
2、在html的head标签中引入
<link rel="stylesheet" type="text/css" href="css文件地址" />
css语句：选择器{属性：值；}
选择器：选中指定的元素
类选择器（class选择器）
1、给标签添加属性 class=" name"
<标签 class=" name "></标签>
2、在css样式中作为选择器使用
.name{ 属性：值 ;}
注意：在同一个页面中可以出现多次相同的class值
在一个class中可以有多个值
浮动：
让原本竖着排列的元素横着排列
float：
left 左浮动
right 右浮动
none 不浮动（默认值）
注意：添加浮动后，元素将脱离文档流
文档流：元素默认从上至下，从左至右的排列顺序
浮动子元素的总宽度超过父元素的宽度，子元素会换行显示
盒模型的组成：
内容区域： width height
内边距区域（所有内边距不能为负数）： padding
边框区域： border
外边距区域（能为负数，不会撑大元素的大小，有auto，表示自适应）： margin
文本垂直对齐：行高 = 高度（行高比高度小 偏上 反之偏下）
height = line-height
无序列表 <ul>(取消小黑点 list-style:none;)
<li></li>
</ul>
背景图：background-image:url("../images/xxx.jpg")
背景图不重复：background-repeat：no-repeat;
ctrl+f 查找
box-sizing:border-box;(怪异和模型：边框融入盒子，就不会宽度不够导致盒子掉下来)
cursor:pointer;（设置botton后显示小手）
更多推荐
千峰学习笔记
发布评论