Java教程

2022-08-23 day33 第一小组 王鸣赫

本文主要是介绍2022-08-23 day33 第一小组 王鸣赫，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录
  • CSS三大特性
    • 1、层叠性
    • 2、继承性
    • 3、优先级
      • 常用单位
    • 字体
    • 背景
    • 列表属性
    • 盒子模型
      • display的inline、block、inline-block的区别
    • 文档流
      • 定位
      • 定位的left和top、right和bottom和margin-left.....的区别
      • 浮动
    • 可见性
    • 动画
      • transition和animation区别
    • 作业

CSS三大特性

1、层叠性

一个标签可以有多个CSS样式
浏览器处理冲突的能力，如果一个属性通过两个相同的选择器设置到这个元素上，样式的层叠规则
按照样式的声明顺序来层叠，就近原则，样式不冲突，不会层叠
前提：选择器必须是同一种

2、继承性

子标签会继承父标签的某些样式

3、优先级

权重
继承的权重0-------最低
行内样式100
权重相同，就近原则
!important命令 无限大
css权重公式：贡献值
继承、*----0,0,0,0
标签选择器----0,0,0,1
类、伪类选择器----0,0,1,0
ID选择器----0,1,0,0
行内样式----1,0,0,0
!important----无穷大
width,height,max-width,max-height,min-width,max-height----大于无穷大
权重不能被继承

贡献值不能进位

常用单位

px(像素)：最常用
em：绝对单位，比如说父级的字号16px,我们可以设置成2em
rem：由整个html的字号决定。当浏览器的字号发生改变，页面的字号会随之改变
百分比：相对父元素的比例

字体

  /* 字体大小 */
  font-size: 20px;
  /* 字体样式 */
  font-style: italic;
  /* 字体粗细 */
 font-weight: normal;


  /* 字体修饰 */
  text-decoration: underline;
  /* 字体 */
  font-family: monospace;
  /* 复合属性 */
  font: 30px italic bold;

背景

/* 背景颜色 */
background-color: rgb(25, 55, 77);
width: 200px;
height: 200px;
/* 背景图片 */
background-image: url(地址);
/* 背景图片大小 */
background-size: 200px;
/* 背景图片位置 */
background-position: center;
/* 指定如何重复背景图像 */
background-repeat: no-repeat;

列表属性

div ul li {
/* list-style-type 属性设置列表项标记的类型 */
list-style-type: decimal;
list-style-position: outside;
/* list-style-image: url(img/libai.jpeg); */
            }

盒子模型

		* {
            /* *号选择器初始化 */
            /* 初始化浏览器默认的内外边距 */
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: orange;
            /* 外边距 */
            margin-top: 100px;
            margin-left: 100px;
            border: 10px solid red;
            /* 内边距 */
            padding: 20px;
            /* boder-box：保证盒子的大小是300*300，外边距不包括 */
            box-sizing: border-box;
            /* content-box：保证当前div的尺寸是300*300，不包括内边距和边框线 */
            /* box-sizing: content-box; */
        }

display的inline、block、inline-block的区别

display:block就是将元素显示为块级元素----->独占一行，高度，行高以及顶和底边距都可控制；
display:inline就是将元素显示为行内元素----->和其他元素都在一行上，高，行高及顶和底>边距不可改变，宽度就是它的文字或图片的宽度，不可改变----->
display：inline-block 行内块元素----->和其他元素都在一行上，高度，行高以及顶和底边距都可控制

文档流

在网页中将窗体自上而下分成好多行，并在每行从左到右的顺序排列元素，即为文档流（网页默>认的布局方式）

定位

static：文档流，默认的
absolute：绝对定位------>相对于一个父元素的绝对定位，当设置了绝对定位之后，原来的元素会脱离文档流，在页面上浮起来
relative：相对定位------>相对于上一个元素的位置
fixed：固定定位
当设置了定位之后，原来的元素会脱离文档流，在页面上浮起来

子绝父相
子元素绝对定位
父元素相对定位

点击查看代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                /* *号选择器初始化 */
            	/* 初始化浏览器默认的内外边距 */
                margin: 0;
                padding: 0;
            }
            .div1 {
                width: 300px;
                height: 300px;
                background-color: orange;
                position: absolute;
                left: 150px;
                top: 50px;
            }
            .div2 {
                width: 200px;
                height: 200px;
                background-color: skyblue;
                /* 绝对定位 */
                position: absolute;
                /* 坐标 */
                left: 150px;
                top: 400px;
            }
            .container {
                width: 600px;
                height: 800px;
                background-color: pink;
                position: relative;
                top: 100px;
                left: 200px;
            }
            .nav {
                width: 100%;
                height: 100px;
                background-color: red;
                /* 水平居中 */
                margin: auto;
                position: fixed;
                /* z轴的索引 */
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div class="nav">我是导航栏</div>
        <div class="container">
            <div class="div1"></div>
            <div class="div2"></div>
        </div>
    </body>
</html>

定位的left和top、right和bottom和margin-left.....的区别

定位的left等是相对于父元素的位置，margin是相对于自己的初始位置，margin是盒子模型的属性
在开发中，尽量统一使用
visibility: hidden---->使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”

浮动

float: left;向左浮动
float: right;向右浮动

可见性

display: none---->使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值
visibility: hidden---->使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”

动画

点击查看代码 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div1 {
                /* 引用自定义动画，延迟时间 */
                animation: myAnim 5s;
            }
            /* 先声明动画，再使用 */
            @keyframes myAnim {
                0% {
                    width: 100px;
                    height: 100px;
                    background-color: orange;
                }
                25%{
                    width: 200px;
                    height: 200px;
                    background-color: blue;
                }
                50% {
                    width: 400px;
                    height: 400px;
                    background-color: red;transform: rotate(45deg);
                }
                75% {
                    width: 200px;
                    height: 200px;
                    background-color: blue;transform: rotateZ(180deg);
                }
                100% {
                    width: 100px;
                    height: 100px;
                    background-color: orange;transform: rotate3d(270deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="div1">123</div>
    </body>
</html>

transition和animation区别

transition是一个过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行；
animation是一个动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。

作业

点击查看代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 50px;
            height: 307px;
            overflow: hidden;
            display: inline-block;
        }

        div:hover {
            width: 410px;
            overflow: visible;
        }
    </style>
</head>
<body>
    <div>
        <img src="./1.jpg">
    </div>
    <div>
        <img src="./1.jpg">
    </div>
    <div>
        <img src="./1.jpg">
    </div>
    <div>
        <img src="./1.jpg">
    </div>
</body>
</html>
这篇关于2022-08-23 day33 第一小组 王鸣赫的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航