AI 助理
备案控制台
开发者社区 云计算 文章 正文

CSS3第三课 浮动内容的介绍。本博客一案例为主。让读者在案例中学会对知识点的总结与介绍。

2023-02-19 114
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS3第三课 浮动内容的介绍。本博客一案例为主。让读者在案例中学会对知识点的总结与介绍。 




<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>4_1学院门户网站知识点一浮动</title>
    <style type="text/css">
      * {
        padding: 0px;
      }
      h2 {
        background-color: lightgreen;
      }
      h3 {
        background-color: #c1edb3;
      }
      div {
        height: 100px;
        width: 100px;
        background: lightblue;
        margin: 2px;
      }
      ol {
        height: 100px;
        width: 100px;
        background: yellow;
        margin: 2px;
        float: left;
      }
      span {
        /* 行内元素转换为 块级元素*/
        /* display: block; */
        height: 100px;
        width: 100px;
        background: red;
        margin: 2px;
      }
      i {
        /* 行内元素转换为 块级元素*/
        display: block;
        height: 100px;
        width: 100px;
        background: black;
        margin: 2px;
        float: right;
      }
      .one {
        background-color: #00CED1;
        height: 250px;
        width: 400px;
      }
      .two {
        background-color: bisque;
        height: 250px;
        width: 300px;
      }
      .tree {
        background-color: black;
        height: 250px;
        width: 200px;
      }
      .four {
        background-color: red;
        height: 250px;
        width: 100px;
      }
      .five {
        background-color: yellow;
        height: 250px;
        width: 300px;
      }
      article {
        float: left;
      }
    </style>
  </head>
  <body>
    <h1>4_1学院门户网站知识点一浮动的知识点与案例</h1>
    <hr>
    <h2>知识点一知识点一块级元素 和行内元素区别</h2>
    <!-- 知识点一块级元素 和行内元素区别 -->
    <!-- 块级元素 -->
    <div><img src="img/bng/kp1%20(2).jpg" /></div>
    <div><img src="img/bng/kp1%20(2).jpg" /></div>
    <div><img src="img/bng/kp1%20(2).jpg" /></div>
    <div><img src="img/bng/kp1%20(2).jpg" /></div>
    <div><img src="img/bng/kp1%20(2).jpg" /></div>
    <h3>总结:块级元素会独占一行，从上向下顺序排列;</h3>
    <!-- 行内元素 -->
    <span><img src="img/bng/kp1%20(4).jpg" /></span>
    <span><img src="img/bng/kp1%20(4).jpg" /></span>
    <span><img src="img/bng/kp1%20(4).jpg" /></span>
    <span><img src="img/bng/kp1%20(4).jpg" /></span>
    <span><img src="img/bng/kp1%20(4).jpg" /></span>
    <span><img src="img/bng/kp1%20(4).jpg" /></span>
    <h3>总结:行内元素会按照
      顺序，从左到右顺序排列，碰到父元素边缘则自动换行</h3>
    <h2>知识点二浮动如何浮动 向left浮动</h2>
    <ol>OL100111</ol>
    <ol>OL100112</ol>
    <ol>OL100113</ol>
    <ol>OL100114</ol>
    <br>
    <h2>知识点二浮动如何浮动 向right浮动</h2>
    <i>Ilou1</i>
    <i>Ilou12</i>
    <i>Ilou13</i>
    <i>Ilou14</i>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <h2>案例1</h2>
    <article style="border: 3px solid palevioletred;background-color:lavender;margin: 0.1875rem;">article的范围
      <div class="one" style="border: #0000FF 4px solid;float: left;">divone的范围1</div>
      <div class="two" style="border: #00FF99 5px solid;">divtwo的范围2</div>
      <div class="tree" style="border: #0000FF 4px solid;float: right;">divone的范围3</div>
      <div class="four" style="border: #00FF99 5px dotted;">divtwo的范围4</div>
      <div class="five" style="border: #0000FF 4px solid;">divone的范围5</div>
      <div class="six" style="border: #00FF99 5px dotted; float: left;">divtwo的范围6</div>
    </article>
    <article style="border: 3px solid palevioletred;background-color:cyan;margin: 0.1875rem;">article的范围
      <div class="one" style="border: #0000FF 4px solid;">divone的范围1</div>
      <div class="two" style="border: #00FF99 5px solid;float: left;">divtwo的范围2</div>
      <div class="tree" style="border: #0000FF 4px solid;">divone的范围3</div>
      <div class="four" style="border: #00FF99 5px dotted; float: right;">divtwo的范围4</div>
      <div class="five" style="border: #0000FF 4px solid;">divone的范围5</div>
      <div class="six" style="border: #00FF99 5px dotted;">divtwo的范围6</div>
    </article>
    <article
      style="border: 3px solid palevioletred;background-color:lightgoldenrodyellow;margin: 0.1875rem; float: left;">
      article的范围向右
      <div class="one" style="border: #0000FF 4px solid; float: right;">divone的范围1</div>
      <div class="two" style="border: #00FF99 5px solid; float: right;">divtwo的范围2</div>
      <div class="tree" style="border: #0000FF 4px solid; float: left;">divone的范围3</div>
      <div class="four" style="border: #00FF99 5px dotted; float: right;">divtwo的范围4left</div>
      <div class="five" style="border: #0000FF 4px solid; float: left;">divone的范围5left</div>
      <div class="six" style="border: #00FF99 5px dotted; float: right;">divtwo的范围6</div>
    </article>
    <article style="border: 3px solid palevioletred;background-color:lightcyan;margin: 0.1875rem; float: right;">
      article的范围向left
      <div class="one" style="border: #0000FF 4px solid;float: left;">divone的范围1</div>
      <div class="two" style="border: #00FF99 5px solid;float: right;">divtwo的范围2right</div>
      <div class="tree" style="border: #0000FF 4px solid; float: left;">divone的范围3</div>
      <div class="four" style="border: #00FF99 5px dotted;float: left;">divtwo的范围4</div>
      <div class="five" style="border: #0000FF 4px solid;float: left;">divone的范围5</div>
      <div class="six" style="border: #00FF99 5px dotted;float: left;">divtwo的范围6</div>
    </article>
  </body>
</html





上面的案例请读者自行打印出来，学习的过程是自己不断总结的过程。

关键词：
CSS案例
CSS浮动
CSS知识点
CSS浮动知识点
t75yjb52rsccc
目录
相关文章
派大鑫的工作室
|
3月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
81 2
gudanhero2018
|
4月前
|
前端开发
CSS实现充电效果案例
CSS实现充电效果案例
gudanhero2018
94 1
你都不懂
|
6月前
|
前端开发
5.CSS学习（浮动）
【7月更文挑战第29天】
你都不懂
44 4
廖小凡
|
2月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
廖小凡
39 1
[HTML、CSS]知识点
html的七十二变
|
2月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局（Flexbox）：构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局（Flexbox）是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例，帮助读者快速掌握这一强大布局方法。
html的七十二变
193 3
雨溪-yuxi
|
2月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性，包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流，向左或右排列，周围元素随之调整。文章还详细讲解了清除浮动的方法，如使用clear属性、设置父元素高度、利用overflow属性、伪元素等，以解决因浮动导致的布局问题。最后，强调了浮动在创建复杂布局时的作用，并预告后续内容。
雨溪-yuxi
39 2
游客zi3qmblbcdexu
|
3月前
|
前端开发
CSS网页布局综合练习（涵盖大多CSS知识点）
CSS网页布局综合练习（涵盖大多CSS知识点）
游客zi3qmblbcdexu
34 3
游客zi3qmblbcdexu
|
3月前
|
前端开发
CSS网页布局综合练习（涵盖大多CSS知识点）
CSS网页布局综合练习（涵盖大多CSS知识点）
游客zi3qmblbcdexu
97 2
小徐在进步
|
4月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍，主要解决多个`&lt;div&gt;`标签在同一行显示的问题，即一个在左边，另一个在右边。文中介绍了标准流、浮动及flex布局的概念，重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法，包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法，并提供了示例代码帮助理解。
小徐在进步
52 6
bruce_xiaowei
|
3月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
bruce_xiaowei
43 0

热门文章

最新文章

  • 1
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 2
    CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
  • 3
    jQuery和CSS3滑动展开菜单按钮插件
  • 4
    探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
  • 5
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 6
    页面滚动触发css3动画js插件
  • 7
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 8
    纸屑飘落生日蛋糕场景js+css3动画特效
  • 9
    纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
  • 10
    在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
  • 1
    css结构伪类
    68
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    97
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    61
  • 4
    HTML5/CSS3粒子效果进度条代码
    80
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    146
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    66
  • 7
    CSS外边距重叠：原理、结果
    58
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    69
  • 9
    CSS常见用法 以及JS基础语法
    72
  • 10
    css设置内嵌样式阴影
    79

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • JavaScript 自学手册文档教程
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • Python爬虫实战

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 视频内容理解的研究与实践
  • Python第五讲——关于爬虫如何做js逆向的思路

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月