-
2022-08-23 第六小组 瞒春 学习笔记
🚩前言
🌻今天继续进行Javaweb的学习
✏️CSS
✒️css三大特性
📌层叠性
一个标签可以有多个css样式
浏览器处理冲突的能力，如果一个属性通过两个相同的选择器设置到这个元素上，会根据样式的层叠规则
样式的层叠规则——按照样式的声明顺序来层叠的【就近原则】
选择器必须是同一种
样式不冲突不会层叠📌继承性
子标签会继承父标签的某些样式，比如文本颜色和字号
📌优先级
权重
继承的权重是0——最低
行内样式的权重是100
权重相同的——就近原则
！important命令——无限大
css权重公式——贡献值
继承、*——0000
标签选择器——0001
类、伪类选择器——0010
id选择器——0100
行内样式——1000
！important——无穷大
width，height——大于无穷大
权重不能被继承
贡献值是没有进位的
如果同时有！important与max-width，max-height
！important是不管用的✒️常用单位
px像素：最常用
em：绝对单位，由父类的字号决定，比如父级的字号是16px，可以设置成2em（32px）
rem：绝对单位，由整个html的字号决定的，页面的字号也会发生变化
百分比：相对于父元素的比例✒️字体大小
/* 字体大小 */- 1
font-size: 20px;
/* 字体样式 /
font-style: italic;
/ 字体粗细 /
font-weight: bold;
/ 字体修饰 /
text-decoration:line-through;
/ 字体 /
font-family: monospace;
/ 复合属性 */
font: 130px italic bolder ;✒️背景
一般情况下不要既有背景颜色又有背景图片
/* 背景颜色 */- 1
/* background-color: rgba(255,255,0); /
/ 设置颜色可以用——英语、十六进制、如果部、rgb、rgba /
width: 1200px;
height: 1200px;
/ 背景图片 /
background-image: url(…/…/2022-8-22/morning/img/a.webp);
/ 背景大小 /
background-size: 1200px;
/ 背景图片不重复 /
background-repeat:no-repeat;
/ 背景的位置 */
background-position: center;✒️列表
list-style-type:lower-greek; list-style-image: url(../../2022-8-22/morning/img/a.webp);- 1
- 2
✒️圆角
width: 200px; height: 200px; background-color: yellow; /* 圆角 */ border-radius:15px; /* 左下圆角 */ border-bottom-left-radius: 68px; /* 虚线 */ border-style: dashed;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
✒️区块属性
✒️盒子模型
width: 300px; height: 300px; background: rgb(238, 107, 107); /* 外边距 */ margin : 100px; /* 盒子的边框线宽度,颜色,边框线 */ border: 10px blueviolet solid; /* 内边距 */ padding-top: 10px; /* 保证盒子的大小是300*300 盒子的外边距是 不包括的 */ box-sizing: border-box; /* 保证当前div的尺寸是300*300 不包含内边距和边框线 */ box-sizing: content-box;- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
image-20220823113747393
✒️定位
📌文档流
在网页中将窗体自上到下的分成多行
在每一行从左到右的顺序排列元素——即为文档流
网页默认的布局方式
定位positionstatic：文档流，默认的
absolute：绝对定位
相对于一个父元素的绝对定位
当设置了绝对定位之后，原来的元素脱离了文档流。会在页面上浮起来。
relative：相对定位相对于上一个元素的位置的定位
fixed：固定定位/* 居中 */ margin: center; /* 固定定位 */ position: fixed; /* z轴的索引 */ z-index:1080;- 1
- 2
- 3
- 4
- 5
- 6
【子绝父相】
子元素是绝对定位
父元素是相对定位
【定位left与盒子模型margin-left有什么区别】定位left是相对于父元素的位置，margin是相对于自己的位置
left是定位的属性
可见性
visibility：visibility: hidden; /*隐藏*/- 1
/* 溢出策略 */
overflow:scroll;
div{
width: 50px;
height: 500px;
overflow: hidden;
display: inline-block;} div:hover{ overflow:visible; width:885px; }- 1
- 2
- 3
- 4
- 5
image-20220823150500180
✒️浮动
清除浮动
Document - 1111
- 2222
- 3333
- 4444
/延迟/
div{
/* 针对于火狐浏览器 /
/ -moz-transform: ; /
/ 针对于Safari 和Google /
/ -webkit-transform: ; /
/ 针对于Opera /
/ -o-transform: ; *//* Transition -延迟转换*/ width: 100px; height: 100px; background-color: orange; transition: width 1s 3s,height 3s ease-in,background-color ease-out 3s; } div:hover{ width: 500px; height: 500px; background-color: aqua; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
transition与animate的区别
transition只能通过固定的属性来开始与结束值
animate可以一帧一帧的去实现效果✒️练习
image-20220823113902141
.size { width: 200px; height: 200px; border-top-right-radius: 65px; border-bottom-left-radius: 65px; background-color: green; position: relative; left: 100px; top: 100px; } .size1 { width: 200px; height: 200px; border-bottom-right-radius: 65px; border-top-left-radius: 65px; background-color: orange; position: relative; left: 100px; } .size2 { width: 200px; height: 200px; border-bottom-right-radius: 65px; border-top-left-radius: 65px; background-color: blue; position: relative; right: 0px; top: 100px; } .size3 { width: 200px; height: 200px; border-top-right-radius: 65px; border-bottom-left-radius: 65px; background-color: red; } .a { width: 300px; height: 300px; background: rgb(5, 230, 5); border-top-left-radius: 50px; } .b { width: 300px; height: 300px; background: rgb(12, 101, 235); border-top-right-radius: 50px; } .c { width: 300px; height: 300px; background: rgb(246, 136, 33); border-bottom-left-radius: 50px; } .d { width: 300px; height: 300px; background: rgb(238, 107, 107); border-bottom-right-radius: 50px; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
✏️后端必须掌握
选择器【十分重要】
css三大特征：层叠性，继承性，优先级
盒子模型
定位
浮动，清除浮动（****）
常见的属性——字体，背景，列表，边框等等
元素的隐藏，元素内容的溢出，【overflow，fisplay，visibility】
【开发中，推荐使用外部引入的方式】- 相关阅读:
JAVA学习——基础部分4【笔记】
【配电网重构】基于粒子群算法求解配电网重构问题附matlab代码
跟艾文学编程《Python基础》PyCharm 安装
CompletableFuture 异常与事务【无标题】
脚本合集部分源码
2023/9/24总结
开发APP的流程是怎样的
复习C部分://1.练习：打印1000~2000的闰年 //2.写一个代码，打印100~200之间的素数 3.goto 跳去哪里
Linux性能模拟测试
TOGAF之架构标准规范（一）
- 原文地址：https://blog.csdn.net/weixin_49405762/article/details/126491361
