前端学习记录（按照日期）

2024.5.5 今日总结

修饰符

•  a:hover  鼠标停留在上面时
•  a:active  当a链接被按住时
•  a:link  未被点击的装填
•  a:visited a被访问后

遵循：LVHA的准则 依次设置（即link - visited - hover - active)

background 设置背景图片

background(url(“图片链接‘) no-repeat fixed(scroll) center center)

background image color position attachment repeat

text

• text-indent 缩进符
• text-decoration 
• text-align 
• color 

line-height 设置和height 一样高 保证垂直居中

text-align 保证水平居中

display

inline-block block block

• inLine-block 可以设置行高和宽高 而且是在同一行上面
• block 可以设置行高和宽高 但不是在同一行 div p
• inline 不可以设置行高宽高 但是是在同一行上面

优先性

• !important 无穷
• 类 0010
• 普通 0001
• id 0100

继承的话权重为0

CSS的特性

• 继承性（text line color font) 
• 层叠性
• 优先性

盒子模型

border 边框

width style(solid dashed dotted) color

border(1px solid black)

border-top/right/left/bottom

border-collapse = collapse 去除重复的边界

margin 外边距

margin：auto；实现居中显示

padding 内边距

2个值 上下 左右

四个值 上左下右顺时针

padding margin

*{margin = 0 padding = 0} 最好在网页建立时就设置好

overflow:hidden 将溢出部分隐藏

2024.5.6今日总结

font：

• font-size 文字大小
• font-style(不加粗400 加粗700 normal bold)
• font-family 文字字体选择
• font-weight

ul - li - list-style：none 不显示无序列表的小圆圈

2024.5.7今日总结

浮动

① float:left/right 可以清楚浮动

②父级元素添加overflow hidden auto scroll

③添加after

.clearfix:after{

    content:"";

    display:block;

    height : 0;

    clear : both;

    visibility:hidden;

}

.clearfix{

    *zoom : 1;

}

④ 清除浮动

.clearfix:before,.clearfix:after{

    content:"";

    display:table;

}

.clearfix:after{

    clear:both
}

.clearfix{

    *zoom:1;
}

1. 在最后加一个div块级元素 写一个clear：all

2. 在父级里面定义一个clearfix:after

3. 在父级里面添加overflow:hidden

4. 父级 双位浮动

2024.5.8今日总结

导航栏

        实际开发中，我们不会直接使用链接a 而是用li 包含链接（li+a）的做法

        做了一个页面设置 总结一下感觉非常的繁琐 基本都是大盒子套用小盒子 div来嵌套 最好先写浮动 每个部分都是浮动的 在导航栏部分也要设置浮动 然后用margin/padding进行填充 想font-size line-height border shade text-align font-style font-weight都是比较常见的

        logo图片最好在background里面加ul里面嵌套li嵌套a span里面嵌套&gt = > 用span标签嵌套 得到float=right就可以靠右行驶了

2024.5.9今日总结

定位

• 绝对定位 根据原来自己的位置调整 top bottom right left position:relative 不会被别人抢占位置
• 相对定位 根据父盒子位置调整（父盒子也要添加定位） position:absolute 拖标 脱离标准流的 会被别人占有位子

子绝父相（孩子设置为position:absoluate，父亲设置为position:relative）

孩子如果绝对定位 父亲就一定要相对定位

• 固定定位 fix
• 相对定位relative
• 绝对定位absolute
• 粘性定位 sticky

fix在盒子旁边先定义left为50%再定义margin-left为盒子的一般宽度就可以了

2024.5.10今日总结

绝对absolute居中的盒子 不能用margin:auto解决

z-index

先 left：50% 再margin-left 自己盒子宽度的一半

元素的显示与隐藏

• display:none 隐藏 不会占有位置
• visibility:hidden visible 还是会 占有原有位置
• overflow 溢出 visible hidden scroll滚动（溢出部分显示滚动条）

2024.5.11今日总结

字体图标基础定义

@font-face {

font-family: 'icomoon';

src: url('fonts/icomoon.eot?7kkyc2') ;

src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype') , url('fonts/icomoon.ttf?7kkyc2') format('truetype') , url('fonts/icomoon.woff?7kkyc2') format('woff') , url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg') ;

font-weight: normal;

font-style: normal;

}

精灵图

background: url() no-repeat -xxpx -xxpx

字体图标

font在主文件 引入@font-face 定义span一般都是这样的（打开demo.html） 在style里面定义 font-family:'icomoon' span font-size color

追加图标

打开文件的select.json 重新加载就可以了

css用户鼠标样式

• cursor:default 默认模式
• pointer 手抓模式
• move 移动样式
• text 文本样式
• not-allowed 禁止样式

button：pointer

input: outline:none  没有input的外边框了

textarea: resize:none 就不能随意调整文本框大小了

垂直选项

vertical-align:top bottom middle

省略号

• white-space:nagrap
• overflow:hidden
• text-overflow:ellipsis

边框重叠去重

margin:-1px

hover更换边框颜色

position:relative

z-index:1

css三角

border:1px solid transparent width=0 height=0 border-top-color:pink

tips 一定要讲width height设置为0

2024.5.12今日总结

• header头部
• section区域
• nav导航栏
• footer尾部
• article文章
• aside侧边栏

video

• autoplay 自动播放，一般谷歌是不会的
• muted 静音播放
• control 控制界面显示
• width 宽度
• loop 是否循环播放
• poster 如果不播放时 显示的海报图像

audio

• autoplay
• controls
• loop

input(几种新的样式)

• email
• date
• week
• year
• month
• tel
• search
• color
• url
• time
• number

form

• required 必须要填写该表单
• placeholder 占位符，比value更加智能
• autofocus 自动聚焦（将鼠标自动放置在此处）
• autocomplete 自动完成
• multiple 可以上传多个文件

input

• input[text] 选择input里面的text
• input[text^=auto] 
• input[text=auto]
• input[text$=auto]
• input[text*=auto]

child/type

• first-child
• last-child
• nth:child(n) even odd
• first-of-type
• last-of-child
• nth-of-child

box-sizing:border-box就不会被padding和border调整大小

*{

    margin=0;

    padding=0;

    box-sizing:border-box

}

图像模糊

filter blur()

比例宽度

width:calc(100% -30px) 中间一定要有空格 保证子盒子的宽度永远比父盒子小30px

过渡曲线

transition  过渡单位（all）过渡时间 运动曲线（ease/ease-in/ease-out/linear/ease-in-out)

2024.5.13

无忧购项目

TDK优化 title description网站说明 keywords

shortcut w fl fr

line-height可以继承

.arrow-icon::after{

font-family:'icomoon',content='\e916' margin-left:6px}

2024.5.14

怎么把不需要的去掉 使用text-indent:'-9999px' overflow:hidden

header部分

logo SOG优化：h1->a->index.html->品优购商城

2024.5.16

CSS3的新特性

平移

tranlate(x,y) translateX(x) translateY(y)

怎么让一个盒子水平垂直居中

加定位Position top50% left50% translate(-50%,-50%)

旋转

rotate(……deg)

css三角

border-right border-bottom 1px solid #000

transform:rotate(45deg)

transition:all 0.6s

更换中心点

transform-origial:给父盒子加 eg transform-original:left bottom

2D旋转

首先定义一个div 在div里面添加before元素 记得div里面要添加overflow:hidden 然后在before里面加入transform-original transimit 在hover里面添加transform 从180度旋转回原位0度

scale缩放

transform:scale(x,y) 里面的x，y不添加单位 是指的缩放的倍数

scale不会影响其他盒子 而且可以设置缩放的中心点

translate 水平移动

2d移动总结

transform: scale() translate() rotate(deg)

transform-original

transition