学习笔记(前端版)
前端
这次是真的要干前端了，猛猛学......
托6少偷偷找了个430的工位当黑户
（9/12）从9月6号坐这里，学了有6天（9/12）了吧，黑马pink老师学到125集.......
顺便把之前没写的东西大概总结一下
Beggin
html
block 和 inline-block
block： 独占一行，可以嵌套，比如： p、h、div 。
inline-block： 一行可以多个，不能嵌套block，可以嵌套其他inline， 比如： string、em、a。
( 默认元素之间有一个空格，可以给父元素一个 font-size:0 来解决 )
列表ul ol dl
ul：顺序无关紧要,只有li
ol：有序列表，type: i、I、A、a
dl：标记一组项目及相关描述,会自动缩进的结构
gap给子元素之间间距(px)
list-style:none; 则无小数字
table表格
table 表格容器
tr 行
td 单元格
th 表头单元格
单元格合并：在<td colspan="4"> 合并4行单元格 。（另rowspan）
form表单
<form action="url">将数据交由url
<input type="text" placeholder="请输入账号" name="username" accesskey="s" autocomplete="off">
placeholder 提示信息
accesskey：使元素获得焦点的快捷键
input
<input type="text" placeholder="请输入账号" name="username" accesskey="s" autocomplete="off">
placeholder 提示信息
accesskey：使元素获得焦点的快捷键
<type="checkbox">
name： 表单名称实现分组
value: 表单值
checked： 是否默认选中
<input type="file">
multiple: 允许选择多个文件
accept: 规定选择的文件类型，逗号隔开
textarea
name： 表单名称
placeholder： 提示信息
rows： 行
cols： 列
select
提供选项的下拉选择控件
<select>
<option value="">
<option value="">
</select>
button
<button disabled>注册</button> 表示按钮不可用
label
用户界面某个元素的说明
<input type="checkbox" id="">
<label for="id">内容</label>
或者
<label><input type="checkbox"> 文字</label>
CSS
选择器
.box p
后带选择器，选择box后的p(不限层级)
h2>p
子代选择器，仅限一层
h2+p
选中h2后同级第一个p
h2~p
选中h2之后同级所有p
.box .item:hover ~ .item 选中item当前hover对象的所有后边的同级item
font-family
font-family: Arial, Helvetica, sans-serif;
浏览器会选择第一个可以使用的字体
text-indient
块级元素的首行缩进 2em
letter-spacing
字符间距
line-height
文本每行之间的高
text-align
文本对齐
ol li:nth-chile(odd)
(odd)选择单数行
(even)选择双数行
block 和 inline
block inline
会换行 不会换行
默认撑满父容器 根据内容元素设置大小
width和height起作用 宽高不起作用
padding和margin会撑大元素 垂直 margin和padding 无 效果
水平 margin和padding 有 效果
div、p、h、ul、table span、em、a、strong
padding 和 margin
内边距 padding
外边距 margin
(上下，左右)（上，左右，下）(上，右，下，左)
border-box
padding和margin都会导致box变大
设置box-sizing: border-box
background-attachment
scroll(默认)、fixed随页面滚动
背景是否随页面滚动（基于视口）
background-img
background: url(./img) no-repeat 50%/cover
背景不重复，置于中间50%处，cover裁切铺满
渐变 radient
linear-gradient 线性渐变（方向可控）
radial-gradient 径向渐变（形状和位置可控）
box-shadow
X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色
默认外阴影 内阴影要写 inset
display
block: 独占一行
flex：（拉伸） （伸缩） （初始宽度）
弹性布局（购物网站常用，eg：京东）
diplay:flex (父盒子不要给高度，让子元素撑开)
justify-content: （横向）
flex-start 左对齐
flex-end 右对齐
centerd 居中
space-between 两端对齐
space-aroung 项目两侧间隔相等(不包括开头结尾)（相当于给子元素加一个margin）
space-evenly 每个元素之间间隔相等(包括开头结尾)
align-items: （竖向）
flex-start 左对齐
flex-end 右对齐
centerd 居中
stretch 项目拉伸填充整个容器(需要子项目无固定高度)
flex-direaction:
row 默认值，从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
flex-wrap: wrap 换行
align-content: 仅flex-wrap: wrap 且内容换行时生效
flex-start 上对齐
flex-end 下对齐
center 居中
space-between 两端对齐(可以和around一起用)
space-around 周围距离相等（给子元素加一个margin）
space-evenly 元素之间距离相等(包括开头结尾)
display: grid
justify-content: （列轨道的水平分布）
start 左对齐
end 右对齐
center 居中
space-between 两端贴边,子元素中间有相等间隔
space-aroung 项目两侧间隔相等(不包括开头结尾)（相当于给子元素加一个margin）
space-evenly 每个元素之间间隔相等(包括开头结尾)
grid-template-columns
grid-template-colums:160px 160px 160px;
表示有三列宽160px的表格
or
grid-template-colums: repeat(3,160px);
grid-template-rows
grid-template-rows:1fr 1fr 1fr
表示3行高为160px的表
grid-template-rows: repeat(3,1fr);
grid-auto-flow
自动填充
column; 竖向
row; 横向
repeat
repeat(次数，轨道尺寸)
次数：
- autofill 尽可能多创建列
- autofit 尽可能拉伸填满容器(会合并空白，最小不小于minmax的最小值)
minmax(最小值，最大值) minmax（200px,1fr）
object-fit
css中用以控制替换元素(如img、、video等外部加载元素)内容适应期尺寸的
fill: 默认值，拉伸以完全填充容器，有可能变形
contain: 保持宽高，保证内容完全可见
cover: 保持宽高，有一部分看不见，但可以填满容器
flexbox 子元素属性
flex-grow: 定义子元素剩余空间分配放大比例 默认0
flex-shrink：定义子元素剩余空间分配缩小比例 默认0
flex-basis: 定义项目在主轴方向上的初始大小 默认auto
flex: 上边三个的简写
align-self: 覆盖容器align-items
order: 定义排序顺序
垂直对齐
浏览器行内元素(行内块元素)排版存在对齐用的baseline，可以选择将内容转化为block，
或者
vertical-align:top 来消除内容最下面的空白
想要内容垂直居中 可以用vertical-align: middle
定位
position: relative
相对定位，保留原对象位置，相对原位置进行位移
通过top、bottom、left、right进行定位
优先top、left，同时存在则覆盖bottom、right
position: absolute
绝对定位，脱离文档流，相对于已定位的祖先元素位移。
通过top、bottom、left、right进行定位
优先top、left，同时存在则覆盖bottom、right
让box垂直居中
position: absolute
top: 50%
margin-top: -xxpx (一般的box高度)
要去最左边： left: 0；
要去最右边： right: 0;
::before
属于行内元素。但是给了position可以定义宽高
overflow-x
overf-x:scroll; 加入横向滚动条（目前特指ul之类的）
scrollbar-width
scrollbar-width: none; 隐藏滚动条
ul::-webkit-scrollbar{
display: none;
}
照顾到大部分浏览器
scrollbar-behavior
scrollbar-behavior: smooth; 滚轮平滑
position:fixed
固定定位
脱离文档流，相对于视口定位
position:sticky
吸顶效果
break-inside
break-inside: avoid-column 强制不跨列分割
transform
rotate()
transform: rotate() 2D旋转
rotate3D
transform: rotateX(15deg)
transform: rotateY(15deg)
transform: rotateZ(15deg)
perspective
透视
transform: perspective(1400px) 数值越大3D效果越不明显，越小越明显
transform-origin
transform-origin: center center center
transform-origin: X Y Z
scale
transform: scale(1.1)
translate
transform: translate(x,y) 实际元素位置不变
复合写法
transform: A() B() C();
执行顺序从右到左 C-B-A
transform: translateX(600px) rotate(360deg) ;
skew
skewX、 skewY、skewZ 倾斜
transition
transition: all 1s linear 1s;
对象 持续时间 速度曲线 延迟时间
速度曲线
ease 慢、快、慢
linear 线性速度
ease-in 慢速开始
ease-out 减速运动
ease-in-out 慢开始慢结束
cubic-bezier(x1,x2,y1,y2) 贝塞尔曲线
translate3d
1、给直接父元素定义perspective-3d 为儿子开启3d空间
transform-style: perspective-3d;
2、然后给需要突出的元素
transform: translateZ(60px);
or
transform: translate3d(0, 0, 60px);
animation
animation: 名称 时长 速度曲线 延迟时间 播放次数 播放方向 播放完以后的状态
@keyframes move{
0%{}
50%{}
100%{}
}
.box{
animation: move 1s
}
svg
去图标网站 下载素材 复制svg代码进去
fill: 填充颜色
stroke: 描边颜色(颜色值，渐变，图案)
stroke-width: 描边宽度 (px、百分比、em等)
stroke-dasharry: 虚线模式 (实现长度+虚线长度)（无单位）
stroke-dashoffset: 调整虚线与间隔的起始位置 (无单位) (增大stroke-dashoffset会增大起始点距离，视觉上像擦除)
clip-path 裁剪图片
clip-path: polygon(50% 0%,0% 100%, 100% 100%); 三角形 (可以设置成四/5/6/7/8...角的)(逗号隔开)
clip-path: circle(50% at 82% 47%); 靠近右侧的圆形（部分溢出）
filter
filter: blur()
高斯模糊
filter: brightness()
元素亮度(初始100% or 1)
filter: contrast()
对比度
filter: sturate()
背景饱和度
filter: grayscale()
灰度
filter: hue-rotate()
色相( deg)
filter: sepia
深褐色（复古效果）（70% or 1（初始值））
filter: drop-shadow()
类似box-shadow ， 但是支持更多形状 filter: drop-shadow(5px 5px 5px #669)
animation-timeline
animation-timeline: scroll() 随滚动执行,写上之后本来的时间就无效了
animation-timeline: view() 视口滚动到了就执行
变量
定义
--name：属性 （定义变量名）
定义：
--color:#000
赋值:
color: var(--color)
backgroung-color: var(--bgcolor)
作用域
1. 全局变量：
:root{
--color：#000;
}
2. 局部变量：
.box{
--color：#000;
}
局部变量可以定义在html 的style中，然后在.item{}中使用。
cal
变量计算
width: cal(100% - 20px);
height: cal(-base-size * 1.5 );
vh/vw
根据视口计算宽高
height: 100vh 则相当于视口高度的100%
em
大小单位：em
用于font-size，则表示x倍父元素的font-size大小
用于其他，则表示x倍自身元素的大小
评论
