适于新手小白的CSS的学习讲解（四）

最新推荐文章于 2024-10-08 09:33:56 发布
最新推荐文章于 2024-10-08 09:33:56 发布
阅读量43 收藏
点赞数 1
分类专栏： css3 html5 css 文章标签： css 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gugyuenamelp/article/details/133953683
版权
html5 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
css
5 篇文章 0 订阅
订阅专栏
css3
4 篇文章 0 订阅
订阅专栏

适于新手小白的CSS的学习讲解（四）

目录

适于新手小白的CSS的学习讲解（四）

 - BFC属性的作用

 - 定位布局

- 定位流分类

1.1.静态定位

1.2.相对定位

1.3.绝对定位

1.4.固定定位

1.5.粘滞定位

1.6.z-index

- 1.1.静态定位（ Static positioning）

- 1.2.什么是相对定位?（ Relative positioning ）

- 相对定位注意点

- 相对定位应用场景

- 1.3.什么是绝对定位?（Absolute positioning）

- 绝对定位参考点

-绝对定位注意点

- 绝对定位-子绝父相

-绝对定位水平居中

- 1.4.固定定位（Fixed positioning）

- 1.5.粘滞定位（ Sticky positioning ）

使用条件：

- 1.6.z-index

这期主要讲BFC属性的作用

 - BFC属性的作用

1.避免外边距重叠

<!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>
    .cube:first-child{
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
      background-color: red;
    }
    .cube:last-child{
      width: 100px;
      height: 100px;
      margin-top: 20px;
      background-color: blue;
    }
    .container{
      /* 给父元素开启BFC */
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="cube"></div>
  </div>
  <div class="cube"></div>
</body>
</html>

2.清除浮动

<!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>
    .parent{
      border: 10px solid red;
      /* 给父元素开启 BFC */
      overflow: hidden;
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blue;
      float: left;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
    <!-- 清除浮动 -->
    <!-- <p style="clear:both"></p> -->
  </div>
</body>
</html>

3.阻止元素被浮动元素覆盖

<!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>
    .one{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .two{
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
</html>

4.两行布局

<!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>
    .left{
      background-color: red;
      width: 300px;
      float: left;
    }
    .right{
      background-color: blue;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="left">左侧定宽</div>
  <div class="right">
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
    右侧自适应右侧自适应右侧自适应右侧自适应
  </div>
</body>
</html>

5.三列布局

<!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>
    .left,.right{
      width: 300px;
      height: 300px;
      background-color: red;
    }
    .left{
      float: left;
    }
    .right{
      float: right;
    }
    .center{
      margin: 0 auto;
      overflow: hidden;
      height: 600px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</body>
</html>

 - 定位布局

- 定位流分类
1.1.静态定位
1.2.相对定位
1.3.绝对定位
1.4.固定定位
1.5.粘滞定位
1.6.z-index

- 1.1.静态定位（ Static positioning）

      是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

      position: static;

- 1.2.什么是相对定位?（ Relative positioning ）

       相对定位就是相对于自己以前在标准流中的位置来移动 ​ 

       position: relative; ​

       使用top,right,bottom,left来控制

- 相对定位注意点

  • 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

  • 在相对定位中同一个方向上的定位属性只能使用一个

  • 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

  • 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局

- 相对定位应用场景

  • 用于对元素进行微调

  • 配合后面学习的绝对定位来使用

<!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>
    div{
      width: 100px;
      height: 100px;
      /* 静态定位 */
      position: static;
    }
    div:first-child{
      background-color: red;
    }
    div:nth-child(2){
      background-color: blue;
      /* 相对定位 relative  与定位配合的属性 top bottom left right
        特点：不脱离文档流  参照自身在浏览器位置进行定位 
        注意：同一方向属性不可以同时设置 top bottom left right只设置其中一个
      */
      position: relative;
      top: 20px;
      left: 20px;
    }
    div:last-child{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

- 1.3.什么是绝对定位?（Absolute positioning）

         绝对定位就是相对于body来定位 ​ position: absolute;

- 绝对定位参考点

      1.规律 ​ 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

      2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。

          ​ 2.1只要是这个绝对定位元素的祖先元素都可以 ​

           2.2指的定位流是指绝对定位/相对定位/固定定位 ​

          2.3定位流中只有静态定位不行

      3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

-绝对定位注意点

          1.绝对定位的元素是脱离标准流的 ​

          2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素 ​

          3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为     参考点, 而不是以整个网页的宽度和高度作为参考点 ​

          4.一个绝对定位的元素会忽略祖先元素的padding

- 绝对定位-子绝父相

相对定位弊端: ​

                      相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面 ​ 绝对定位弊端: ​

                      默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化 ​ 子绝父相 ​ 子元素用绝对定位, 父元素用相对定位

-绝对定位水平居中

            只需要设置绝对定位元素的left:50%; ​

            然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

<!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>
    div.parent{
      width: 100px;
      height: 100px;
    }
    .parent:first-child{
      background-color: red;
    }
    .parent:nth-child(2){
      position:relative;
      background-color: orange;
    }
    .child{
      width: 50px;
      height: 50px;
      background-color: blue;
      /* 绝对定位 position:absolute  
        特点：1.脱离文档流 原先位置不保留 飘在文档流上方 
        2.无论有没有父元素或者祖先元素 参照浏览器视口区域进行定位
        3.如果父元素或者祖先元素也设置了定位 参照父元素或者祖先元素进行定位
      */
      position: absolute;
      top: 50px;
      left: 50px;
    }
    .parent:last-child{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="parent"></div>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="parent"></div>
</body>
</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>
    .parent{
      width: 220px;
      height: 260px;
      background-color: red;
      /* 水平居中 */
      margin: 0 auto;
      /* 1.2 */
      /* border: 1px solid red; */

      /* 2.1给父元素设置padding */
      /* padding: 80px 60px; */
      /* 2.2将父元素设置为border-box */
      /* box-sizing: border-box; */

      /* 3.1给父元素设置相对定位 */
      /* position: relative; */

      /* 4.1给父元素设置相对定位 */
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blue;
      /* 1.1通过margin挤压 父元素高-子元素高/2 上下外边距
       父元素宽-子元素宽/2 左右外边距 */
      /* margin:80px 60px; */

      /* 3.2子元素绝对定位 配合属性全部为0 margin:auto */
      /* position: absolute;
      top: 0;
      bottom: 0;
      left:0;
      right: 0;
      margin: auto; */


      /* 4.2给子元素绝对定位width height以子元素为准 top:50% left:50% margin-left:-width/2 margin-top:-height/2 */
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>
- 1.4.固定定位（Fixed positioning）

1.什么是固定定位? ​

         position: fixed; ​

         固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定 定位可以让某个盒子不随着滚动条的滚动而滚动。

注意点: ​ 1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间

              2.固定定位和绝对定位一样不区分行内/块级/行内块级

<!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>
    .fixBox{
      width: 100px;
      height: 100px;
      background-color: yellow;
      /* 固定定位 position:fixed 
        特点：
          1.脱离文档流 原先位置不保留 飘在文档流上方 
          2.参考浏览器视口区域定位
      */
      position: fixed;
      bottom: 20px;
      right: 20px;
    }
    .two{
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div>段落标签</div>
  <div class="fixBox">
    <a href="#">回到顶部</a>
  </div>
  <div class="two"></div>
</body>
</html>
- 1.5.粘滞定位（ Sticky positioning ）

position: sticky;

            结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

           元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

           设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

           当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

           亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上

移动（此时相当于fixed定位）。

设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件：

        父元素不能overflow:hidden或者overflow:auto属性。

        必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

        父元素的高度不能低于sticky元素的高度

        sticky元素仅在其父元素内生效

<!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>
    .container{
      width: 1200px;
      margin: 0 auto;
    }
    .container>div{
      width: 1200px;
      height: 700px;
    }
    .container>div:nth-child(odd){
      background-color: pink;
    }
    .container>div:nth-child(even){
      background-color: #fff;
    }
    aside.left,aside.right{
      width: 200px;
      height: 500px;
      background-color: red;
      /* 粘滞定位：position:sticky 不脱离文档流 
        relative + fixed组合 没有达到阈值前是相对定位 达到阈值后固定定位
      */
      position: sticky;
      top: 50px;
    }

    aside.right{
      float: right;
    }
  </style>
</head>
<body>
  <div class="container">
    <div></div>
    <!-- 侧边栏 -->
    <aside class="right"></aside>
    <aside class="left"></aside>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>
- 1.6.z-index

1.什么是z-index属性?

            ​ 默认情况下所有的元素都有一个默认的z-index属性, 取值是0. ​

             z-index属性的作用是专门          用于控制定位流元素的覆盖关系的

2.默认情况下定位流的元素会盖住标准流的元素 ​

3.默认情况下定位流的元素后面编写的会盖住前面编写的

​ 4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面 ​

注意点: ​

           1.从父现象 ​

                  1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上 面。

                   1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说 谁的父元素的z-index属性比较大谁就会显示在上面。

兄弟元素堆叠顺序：

<!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>
    div:first-child{
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      z-index: 10;
    }
    div:last-child{
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-left: 50px;
      margin-top: -50px;
      position: relative; 
      z-index: -20;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
</body>
</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>
    .parent{
      width: 200px;
      height: 200px;
      background-color: red;
      position: relative;
      /* z-index:1000 ; */
    }
    .child{
      width: 100px;
      height: 100px;
      background-color: blue;
      position: relative;
      z-index: 100;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>
Carrymao
关注
专栏目录
05 Python学习：数据类型转换
百锦再的博客
03-14 2万+
ord() 函数是 chr() 函数（对于8位的ASCII字符串）或 unichr() 函数（对于Unicode对象）的配对函数，它以一个字符（长度为1的字符串）作为参数，返回对应的 ASCII 数值，或者 Unicode 数值，如果所给的 Unicode 字符超出了你的 Python 定义范围，则会引发一个 TypeError 的异常。mapping – 元素的容器，映射类型（Mapping Types）是一种关联式的容器类型，它存储了对象与对象之间的映射关系。将对象的数据类型转换为所需的数据类型。
机器学习分类算法之随机森林（集成学习算法）
迷茫与徘徊只会让你陷入绝境，欢迎私信博主，带你开始提升变现价值！
02-11 7346
目录 什么是集成学习？ 随机森林 随机森林的生成算法 随机森林的随机性 随机森林的优势 随机森林的参数详解 随机森林模型提高方法 最大特征数（max_features） 子树的数量（n_estimators）最重要的 最大深度（max_depth） 内部节点再划分所需最小样本数（min_samples_split） 叶子节点最少样本数（min_samples_leaf） 叶子节点最小的样本权重（min_weight_fraction_leaf） 最大叶子节点数（max_leaf.
HTML, CSS学习笔记（完整版）
u011925500的专栏
10-02 7402
第一章 div布局 前几课内容 .htm是早期的后缀，因为那时只能支持长度为3的后缀，因此html与htm是一样的。 shtml是服务器先处理然后再交给浏览器处理   #HTML小知识#之#XHTML与HTML的区别#XHTML是更严谨更纯净的 HTML 版本。XHTML目标是取代HTML。更详细的介绍 XHTML 教程 http://t.cn/h94BV   #HTML小知识#
第4版 网页设计与制作 HTML5+CSS3+JavaScript(赵丰年 编著）学习笔记
我是一只蘑菇17的博客
07-20 1万+
第1章 HTML5基础 1.万维网（World Wide Web,WWW)由大量的Web服务器构成。我们通过浏览器访问这些服务器上的网页。不同的网页通过超链接联系在一起，构成了WWW的网状结构。 2.HTML是表示网页的一种规范，它通过标记符定义了网页内容的显示，并使用属性进一步控制内容的显示。 3.Web标准包括结构.表现和行为3部分。 4.最基本的HTML标记符包括：HTML标记符<html>和<html>,首部标记&lt...
计算机组成原理（第三版）唐朔飞-第四章存储器-课后习题
热门推荐
weixin_45735391的博客
10-14 12万+
计算机组成原理（第三版）唐朔飞-第四章存储器-课后习题
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
qq_44891434的博客
01-29 1万+
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs） 一. HTML 1. 盒子模型 是什么：每个元素被表示为一个矩形的盒子，有四个部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。 盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。 两种盒模型的区别：标准盒模型内容大小就是content大小、而IE
深度学习：卷积神经网络CNN
皮皮blog
08-02 6119
http://blog.csdn.net/pipisorry/article/details/76571670 Convolutional Neural Networks卷积神经网络 卷积神经网络是人工神经网络的一种，已成为当前语音分析和图像识别领域的研究热点。它的权值共享网络结构使之更类似于生物神经网络，降低了网络模型的复杂度，减少了权值的数量。该优点在网络的输入是多维图像时表...
机器学习常见算法优缺点
学习AI算法，请关注微信公众号：机器学习算法全栈工程师……
12-28 3860
1. K近邻       算法采用测量不同特征值之间的距离的方法进行分类。 1.1 优点 简单好用，容易理解，精度高，理论成熟，既可以用来做分类也可以用来做回归； 可用于数值型数据和离散型数据； 训练时间复杂度为O(n)；无数据输入假定； 对异常值不敏感。 1.2 缺点 计算复杂性高；空间复杂性高； 样本不平衡问题（即有些类别的样本数量很多，而其它样本的数量很少）； 一般数值很大的时候不用
深度学习面试题
weixin_42010722的博客
08-13 1万+
深度学习面试题1.深度学习常用算法，及相应应用场景有哪些2.什么数据集不合适做深度学习3.如何确定CNN卷积核通道数和卷积输出层的通道数4.什么是卷积5.什么是CNN的池化层（pool）6.CNN常用的几个模型7.CNN的特点以及优势8.卷积神经网络CNN中池化层作用9.常见的激活函数，激活函数有什么作用10.简述一下sigmoid函数11.CNN关键层有哪些12.什么是梯度爆炸13.梯度爆炸会引发什么问题14.如何确定是否出现梯度爆炸15.如何修复梯度爆炸问题重新设计网络模型使用 ReLU 激活函数使用长
时间序列分类01：人类活动识别深度学习模型综述
stay hungry, stay foolish
04-11 1万+
本文介绍了人类活动识别相关领域的建模方法和理论研究。
(适于新手学习的)软件测试中的功能测试用例的书写方式
03-23
功能新手(适于新手学习的)软件测试中的功能测试用例的书写方式1.测试的来源，即测试的需求测试用例的主要来源有：1）需求说明”及相关文档2）相关的设计说明（概要设计，详细设计等）3）与开发组交流对需求理解的...
功能测试用例的书写方式(适于新手学习)
03-23
功能性测试用例1.测试的来源，即测试的需求测试用例的主要来源有：1)需求说明”及相关文档2)相关的设计说明(概要设计，详细设计等)3)与开发组交流对需求理解的记录(可以是开发人员的一个解释) 　功能性测试用例 　1....
Molex新款四通道小型可插拔接口适于计算和电信应用
11-22
Molex公司提供的四通道小型可插拔（QSFP）产品，是适用于计算和电信应用中的高性能交换机、路由器、服务器和主机总线适配器的四路热插拔接口。QSFP将四个10G高速信道集成于一个可插拔互连系统中，获得四倍于SFP的...
适于专家系统的机器学习模型与过程.pdf
09-24
适于专家系统的机器学习模型与过程.pdf
OpenGL画五角星，可变大变小。cpp文件，适于新手上手练习。
06-25
OpenGL画五角星，可变大变小。cpp文件，适于新手上手练习。二维实现
前端学习——CSS——李白代表作品页面(3)
2301_80073593的博客
10-02 1653
在一个无序列表中，列表项的标志是指出现在各列表项旁边的圆点或其他符号。
【CSS】水平垂直居中
小秀的博客
10-02 467
容器设置position: relative。子元素设置 position: absolute;left: 50%;需要给子元素设置 position: absolute;设置固定宽度和高度;top、left、bottom、right都设置为0;margin设置为auto；给容器设置 display: flex;子项设置 margin: auto;给父盒子设置属性 flex。给父盒子和子盒子设置属性。flex:1 的作用。
66. three.js Canvas画布布局
最新发布
Miller777_的博客
10-08 262
Canvas是HTML的元素之一，Canvas元素的CSS布局规律和div、img等其它HTML元素相似，webgl就是依赖于canvas实现，threejs是基于webgl封装的，自然也要依赖canvas，具体说就是把三场场景渲染到canvas画布上。案例源码“CSS布局案例.html”的布局效果，你也可以用CSS其它方式实现，不一定和课程中一样，CSS布局是前端知识，这里不展开讲解，咱们把重点放在threejs上面。
HTML的修饰(CSS) -- 第三课
ZxVSaccount的博客
10-01 1073
前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!
Atmega16中文寄存器详解，适于 AVR 单片机学习
" AVR中文寄存器表，数据手册包含了Atmega16单片机的详细寄存器信息，便于学习和理解AVR单片机的使用。" 在AVR单片机系列中，Atmega16是一款常见的微控制器，其寄存器配置是理解和操作该芯片的关键。该数据手册提供...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值