2022-08-23 第六小组 瞒春 学习笔记

前言

今天继续进行Javaweb的学习

目录

  • 前言
  • ✏️CSS
    • ✒️css三大特性
      • 层叠性
      • 继承性
      • 优先级
    • ✒️常用单位
    • ✒️字体大小
    • ✒️背景
    • ✒️列表
    • ✒️圆角
    • ✒️区块属性
    • ✒️盒子模型
    • ✒️定位
      • 文档流
    • ✒️浮动
    • ✒️练习
  • ✏️后端必须掌握

✏️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的字号决定的,页面的字号也会发生变化
百分比:相对于父元素的比例

✒️字体大小

​/* 字体大小 */

​font-size: 20px;
​/* 字体样式 /
​font-style: italic;
​/
字体粗细 /
​font-weight: bold;
​/
字体修饰 /
​text-decoration:line-through;
​/
字体 /
​font-family: monospace;
​/
复合属性 */
​font: 130px italic bolder ;

✒️背景

一般情况下不要既有背景颜色又有背景图片

​/* 背景颜色 */

​/* 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);

✒️圆角

        ​width: 200px;
       ​height: 200px;
       ​background-color: yellow;
       ​/* 圆角 */
       ​border-radius:15px;
       ​/* 左下圆角 */
       ​border-bottom-left-radius: 68px;
       ​/* 虚线 */
       ​border-style: dashed;

✒️区块属性

✒️盒子模型

        ​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;

image-20220823113747393

✒️定位

文档流

在网页中将窗体自上到下的分成多行
在每一行从左到右的顺序排列元素——即为文档流
网页默认的布局方式
定位position

static:文档流,默认的

absolute:绝对定位

相对于一个父元素的绝对定位
当设置了绝对定位之后,原来的元素脱离了文档流。会在页面上浮起来。
relative:相对定位

相对于上一个元素的位置的定位
fixed:固定定位

        ​/* 居中 */
       ​margin: center;
       ​/* 固定定位 */
       ​position: fixed;
       ​/* z轴的索引 */
       ​z-index:1080;

【子绝父相】

子元素是绝对定位
父元素是相对定位
【定位left与盒子模型margin-left有什么区别】

定位left是相对于父元素的位置,margin是相对于自己的位置
left是定位的属性
可见性
visibility:

        ​visibility: hidden; /*隐藏*/

​ /* 溢出策略 */
​overflow:scroll;
div{
width: 50px;
height: 500px;
overflow: hidden;
display: inline-block;

    }
    div:hover{
        overflow:visible;
        width:885px;
    }
image-20220823150500180

✒️浮动

清除浮动

Document
  • 1111
  • 2222
  • 3333
  • 4444
## ✒️动画 css3兼容性的问题

/延迟/
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;
    }

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;
   ​}
​
   ​
       ​
       ​
   ​
   ​
       ​
       ​
   ​

✏️后端必须掌握

选择器【十分重要】
css三大特征:层叠性,继承性,优先级
盒子模型
定位
浮动,清除浮动(****)
常见的属性——字体,背景,列表,边框等等
元素的隐藏,元素内容的溢出,【overflow,fisplay,visibility】
【开发中,推荐使用外部引入的方式】