前端学习 DAY04

Nancy在努力

已于 2022-07-22 09:36:01 修改

阅读量365

点赞数

分类专栏：前端学习文章标签：前端学习 css

于 2022-07-22 09:35:15 首次发布

本文链接：https://blog.csdn.net/Nancyuojuiivk/article/details/125658154

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS属性选择器

<!DOCTYPE html>
<html>
<head>
    <title>css属性选择器</title>
   <style>
       /*包含你title属性的所有元素设置样式*/
        /*   [title]{
             color: red;
         } */
     /*属性和值的选择器*/
     [title=baidu]{
         color: red;
      }

    /*包含指定值的选择器*/
    /*[title~=baidu]{
        color: red;
    }*/
    
    /* [lang|=en]{
        color: red;
     } 包含en的*/
    
    /*包含s的*/
     /*[title*=s]{
        color: red;
     }*/
    
    /*bai开头的*/
    /*[title^=bai]{
         color: red;
     }*/
     /*bai结束的*/
     /*[title$=ld]{
         color: red;
     }*/


    </style>
</head>
<body>
     <h1>标题1</h1>
     <h1 title="Hello">标题2</h1>
     <a title="baidu  hello"href="https://www.baidu.com">百度一下</a>
     <a title="baidu   world"href="https://www.baidu.com">百度一下</a>
     <a title="css" href="https://www.baidu.com">百度一下</a>
     
     <p lang="en">你好</p>
     <p lang="en-us">你好</p>
     <p lang="en-gb">你好</p>
     <p lang="us">你好</p>
</body>
</html>

CSS-display

<!DOCTYPE html>
<html>
<head>
    <title>display</title>
    <style>
        .hidden{
           /* visibility: hidden;*/ /*虽然元素隐藏了但是占据了空间影响力整个布局*/
           
           display: done;     /*隐藏元素并且从布局中删除元素*/  
        }
       
        /* display: block 将行列元素更改成块级元素*/
        span{
            display: block;
        }
      /*display:inline;将元素设为内联元素*/
      div{
            display: inline;
            background-color: aqua;
            width: 200px;
            height: 200px;
        }


       /*块级元素和内联元素结合*/
      /*div{
            display: inline-block;
            background-color: aqua;
            width: 200px;
            height: 200px;
        }*/
    </style>
</head>
<body>
    <h1 class="hidden">我是标题</h1>
    <h1>我是标题</h1>
    <span>1234</span>
    <span>5678</span>
    <div>div1</div>
    <div>div2</div>

</body>
</html>

CSS定位

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        h1{
            /*static正常布局行为,与原布局一样*/

           /* position:static;*/
        
        
        /* relative*在正常位置偏移给定的值，不影响其他元素
           相对定位并未脱离文档流
           元素发生偏移后，会在文档流未添加定位所在位置留下空白*/
        position: relative;
        top: 100px;
        left: 100px;
        
}
    
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <h2>我是标题</h2>
</body>
</html>

CSS绝对定位

<!DOCTYPE html>
<html>
<head>
    <title>绝对元素</title>
    <style>
        .box{
            display: inline-block;
            background-color: red;
            width: 100px;
            height: 100px;
        }
        /*position:absolute;m绝对定为原宿脱离文档流
        绝对定位元素相对于最近的非static祖先元素定位
        two元素不存在应用了定位祖先元素，相对于紧邻的祖先进行定位*/

        #two{
            position: absolute;
            top:20px;
            left: 20px;
        }
        
        .content{
            width: 500px;
            height: 500px;
            background-color: aqua;
            top:20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div class="content">
    <div class="box" id="one">one</div>
    <div class="box" id="two">two</div>
    <div class="box" id="three">three</div>
    <div class="box" id="four">four</div>
    
</body>
</html>

CSS固定定位

<!DOCTYPE html>
<html >
<head>
    <title>固定定位</title>
    <style>
        .box{
            background-color: aqua;
            width: 100px;
            height: 100px;
        }
        .outer{
            width: 500px;
            height: 300px;
        }
        #one{
            /*固定定位 相对于viewport视口 处于统一位置*/
            position: fixed;
            top: 80px;
            left: 10px;
        }
    </style>

</head>
<body>
    <div class="outer">
        <p>
            7月4日，蚂蚁集团宣布面向全球开发者正式开源可信隐私计算框架“隐语”，采用 Apache-2.0 协议，代码托管至 GitHub、Gitee 两大平台。
            2016 年，“隐语”作为一个“实验项目”在蚂蚁诞生，从矩阵变换技术踩下第一个脚印，到可信执行环境（TEE），再到多方安全计算（MPC）、
            联邦学习（FL）等，一路以来不断丰富自身技术内涵，在金融、医疗等领域实际应用场景中有成功的落地应用经验。
            尽管隐私计算理论发展四十余年，在应用层面，至今依然存在着诸多行业必须跨越的障碍：
            隐私计算技术方向多样，不同场景下有其各自更为合适的技术解决方案；
            隐私计算学习曲线很高，非隐私计算背景的用户使用困难；
             隐私计算涉及领域众多 需要领域专家共同协作。
             隐私计算现阶段依旧是相对新兴的跨学科领域，涉及密码学、机器学习、数据库、可信硬件等多个领域，包含多方安全计算（MPC）、
             联邦学习（FL）、可信执行环境（TEE）、可信密态计算（TECC）等多种技术路线，涉及众多专业技术栈，要实现完善并保障安全并非易事。
             “隐语”的设计目标，是使得数据科学家和机器学习开发者无需了解底层技术细节，就可以非常容易地使用隐私计算技术进行数据分析和机器学习建模。

          <p>“隐语”通过良好可扩展的架构设计，用一套通用框架统一支持了包括 MPC、TEE、FL、HE、DP 在内的多种主流隐私计算技术，
              可以对多种技术进行灵活组合，针对不同应用场景提供不同的解决方案。
           
          </p>
          <div class="box" id="one">one</div>
</body>
</html>

CSS粘性定位

<!DOCTYPE html>
<html lang="en">
<head>
    <title>粘性定位</title>
    <style>
        * {
            box-sizing: border-box;

        }
        dl{
            margin: 0;
            padding: 24px 0 0 0;
        }
        dt{

            /*
            粘性定位需要指定top，right，bottom，left其中之一，才可以使粘性定位生效
            元素在跨越特定阀值前为相对定位，之后为固定定位*/
            position: sticky;
            top:-1px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <dl>
        <dt>A</dt>
        <dd>andrew</dd>
        <dd>apparat</dd>
        <dd>arcade</dd>
        <dd>at</dd>
    </dl>
    <dl>
        <dt>B</dt>
        <dd>andrew</dd>
        <dd>apparat</dd>
        <dd>arcade</dd>
        <dd>at</dd>
    </dl>
    <dl>
        <dt>C</dt>
        <dd>andrew</dd>
        <dd>apparat</dd>
        <dd>arcade</dd>
        <dd>at</dd>
    </dl>
    <dl>
        <dt>D</dt>
        <dd>andrew</dd>
        <dd>apparat</dd>
        <dd>arcade</dd>
        <dd>at</dd>
    </dl>
</body>
</html>

css浮动

 <style>
        #fater{
         background-color: aqua;
         width: 1000px;
         /*第二种方式 手动设置父元素高解决塌陷*/
         height: 200px;  
         /*第三种方式 父级添加overflow属性*/
         overflow: hidden;

        
        }
        .box{
            background-color: red;
            width: 100px;
            height: 100px;
            display: inline-block;
        }
        #two{
            float:right;   /*向左向右浮动*/
        }
        #one{
            float:right;
        }
        /*第一种方式 浮动元素下面添加空的div 设定clear:both清除浮动 解决边框塌陷*/
        .clear{
            clear:both;
        }
         /*第四种 父级添加伪类*/
         .clear::after{
              content: '';
              display: block;
              clear: both;
         }
    </style>

推荐使用第四种

z-index

z-index用来调整元素以及子元素在z轴上的顺序
z-index值较大的元素覆盖较低的元素
默认值是auto 可以设置正数，也可以设置负数

7阶层叠水平
1.最底层 background/border
2.负z-index
3.block块状水平盒子
4.float 浮动盒子
5.inline/inline-block 水平盒子
6.z-index：auto 或者z-index:0
7.最顶层正z-index
后来居上原则:先画的在下面，后画的在上面

css层叠

<!DOCTYPE html>
<html >
<head>
    <title>2D转换</title>
    <style>
        div{
            position: relative;
            width: 500px;
            height: 500;
            background-color: aqua;
        }
        p{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: red;
            /*移动不影响其他元素的位置
            transform: translate(-50%,-50%); 代表x轴 y轴的移动距离*/
            transform:translateX(200px);
            transform:translateY(200px);
            /*旋转  角度为45度*/
            transform: rotate(45deg);
            /*设置旋转中心*/
            transform-origin: 20px 20px; 
            /*缩放 只写一个参数 第二个参数和第一个参数一样*/
            transform: scale(2);
        }
        span{
            /*对行内标签没有效果*/
            transform: translate(200px);
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
    <span>123</span>
</body>
</html>

css动画

<!DOCTYPE html>
<html>
<head>
    <title>动画</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: brown;
            position: relative;/*移动起来需要添加*/
            animation:myfirst 5s;  /*设置时间*/
        }
        @keyframes  myfirst {
            0%{background-color: brown;}
            25%{background-color: aqua;}
            50%{background-color: aquamarine;}
            100%{background-color: blanchedalmond;}
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>