浮动及案例

最新推荐文章于 2023-09-15 17:02:46 发布
最新推荐文章于 2023-09-15 17:02:46 发布
阅读量124 收藏
点赞数 1
分类专栏： web 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53609683/article/details/115758183
版权 
<!DOCTYPE html>
<html>
       <head>
               <meta charset="utf-8">
               <title></title>
               <style type="text/css">
                       .outerDiv{
                               border: 1px solid blue;
                               width: 1000px;
                               height: 500px;
                               margin: 0px auto;
                       }
                       #d1,#d2,#d3{
                               border: 1px solid red;
                               width: 400px;
                               height: 200px;
                               /*向右  浮动*/
                               /*float: right;*/
                               /*向左 浮动*/
                               float:  left;
                               margin-left:20px;
                               margin-bottom: 20px;
                       }
                       #d1{
                               background-color: greenyellow;
                       }
                       #d2{
                               background-color:aqua;
                       }
                       #d3{
                               background-color: blueviolet;
                       }
               </style>
       </head>
       <body>
               <div class="outerDiv">
                       <div id="d1">
                               <h1>1</h1>
                       </div>
                       <div id="d2">
                               <h1>2</h1>
                       </div>
                       <div id="d3">
                               <h1>3</h1>
                       </div>
               </div>
       </body>
</html>

案例

<!DOCTYPE html>
<html>
       <head>
               <meta charset="utf-8">
               <title></title>
               <style type="text/css">
                       .outerDiv{
                               border: 1px solid blue;
                               width: 1000px;
                               height: 500px;
                               margin: 0px auto;
                       }
                       #d1,#d2,#d3{
                               border: 1px solid red;
                               width: 400px;
                               height: 200px;
                               /*向右  浮动*/
                               /*float: right;*/
                               /*向左 浮动*/
                               float:  left;
                               margin-left:20px;
                               margin-bottom: 20px;
                       }
                       #d1{
                               background-color: greenyellow;
                       }
                       #d2{
                               background-color:aqua;
                       }
                       #d3{
                               background-color: blueviolet;
                       }
               </style>
       </head>
       <body>
               <div class="outerDiv">
                       <div id="d1">
                               <h1>1</h1>
                       </div>
                       <div id="d2">
                               <h1>2</h1>
                       </div>
                       <div id="d3">
                               <h1>3</h1>
                       </div>
               </div>
       </body>
</html>
AloneDrifters
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
关于浮动和边距的一个综合案例
点点的java小栈
08-02 487
本文主要来带大家实现一个案例，案例会用到浮动和边距的知识点，因为浮动和边距是html中比较重要的一部分，所以希望大家能够在吸纳知识点的同时，自己去写一写代码，练一练，以巩固住所学到的知识。而不是一看而过，这样学习是没有意义的。
前端 盒子浮动布局
qq_55061257的博客
07-25 208
<!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>浮.
浮动案例
qq_44888570的博客
11-05 322
一个网页的小小案例，主要用到浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实训2</title> <link rel="stylesheet" href="../css/4-2.css"> </head> <body> <!--总体--> <d
css之浮动案例。
qq_43198727的博客
11-01 1218
浮动 浮动可以实现让多个元素排在同一行，并且给这些元素设置宽度与高度！浮动可以让元素脱离标准文档流 就可以实现让多个元素排在同一行，并且可以设置宽高 浮动:他是通过一个(float)浮动属性来实现 float left 向左浮动 向左移动 float right 向右移动 浮动元素的特性 1.浮动元素它可以脱离标准文档流 他不再占用空间了 2.我们可以把浮动元素理解为 “漂”浮动元素他的层级要比标准文档流里面的元素层级要高，它们会将标准文档流中的元素给压盖住 3.浮动元素他会向左或者向右移动。 4.浮动元
浮动及应用案例
m0_45659764的博客
03-17 928
三、标准流 目标：能够认识标准流的默认排布方式及其特点 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素 常见标准流排版规则： 块级元素：从上往下，垂直布局，独占一行 行内元素 或行内块元素：从左往右，水平布局，空间不够自动折行 四、浮动 1.1 浮动的作用 早期的作用：图文环绕 现在的作用：网页布局 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右 2.1 浮动的代码 属性名：float 属性值： .
浮动窗口的案例
03-16
在“Sample--浮动窗口”这个案例中，可能包含的是一个演示如何创建和管理浮动窗口的实例代码或者设计示例。通过分析和学习这个案例，开发者可以更好地理解和掌握浮动窗口的实现方法，从而在自己的项目中灵活运用。 ...
CSS元素的浮动与定位综合案例3.pdf
07-10
6. **字体和颜色样式**：通过`font-size`、`color`和`background-color`等属性控制文本和背景的颜色及大小。 7. **浏览器兼容性处理**：例如使用`html>body`选择器来解决不同浏览器之间的兼容性问题。 理解并熟练...
WEB前端-案例汇总
11-08
案例可能涉及盒模型、选择器、浮动、定位、响应式设计等，让学习者能够创建美观且适应不同设备的页面。 3. JavaScript交互：JavaScript是前端开发的核心，提供动态效果和用户交互。案例可能包含事件处理、DOM操作、...
project案例
12-28
此外，利用“松弛时间”和“浮动时间”概念，可以更灵活地处理项目时间表。 六、跟踪与报告 Project提供了强大的跟踪和报告功能。你可以实时查看项目的进度，比较实际与计划，找出偏差并采取纠正措施。此外，生成...
HTML CSS案例教程
08-05
CSS 教程案例, CSS盒模型,Css浮动,Css定位等
CSS浮动详解及案例
小洋人最happy的专栏
07-14 3874
浮动的规则 规则一 元素一旦浮动后 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或其他元素的边界为止 定位元素会层叠在浮动元素上面 示例 <style> .box { height: 500px; background-color: green; } span { background-color: hotpink; } strong background-color: khaki;
浮动案例--常用的网页布局
一夜奈何梁山
02-01 675
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-23 1743
一、案例效果 二、核心要点说明 1、网页默认样式 2、盒子模型居中显示 3、设置渐变背景 4、设置列表浮动 5、设置文本水平垂直居中 6、设置链接文本样式 7、设置鼠标经过的样式 三、完整代码示例
浮动补充
weixin_44932552的博客
10-15 87
浮动会脱离文档流，不占文档流的位置，会影响其他（后面的/下面的）文档流的位置，浮动只有左右浮动。 1.浮动的元素不会超过内边距，不会贴着边框。 2.一行显示： 3.设置浮动后会使元素显示有行内块元素的特性。 块元素设置浮动后贬称行内块元素，行内块元素浮动后变成块元素。 父元素一定是文档流，块元素，独占一行。 ...
前端学习 css（5）圆角边框，盒子阴影，文字阴影，浮动布局
最新发布
Flyoungbuhu的博客
09-15 354
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框。语法：选择器 { float：属性值；none元素不浮动left元素向左浮动right元素向右浮动。
CSS浮动布局案例
weixin_33701564的博客
09-05 360
CSS浮动布局案例 这里介绍下float布局的几种常见布局方式，如果对基础知识有疑问可以去看一下上一篇文章CSS浮动基础知识 流体布局 顾名思义流体布局就是布局格式可以随着窗口大小的变化而变化，具体实现如下 代码演示(后续CSS代码均在此代码基础上进行修改) <body> <div class="container clearfix"> &l...
css浮动案例
前端小99的博客
04-13 2149
彼此相邻的浮动元素清除浮动 - 使用 clear元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊：使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。事例案列：&lt;style&gt;* {    box-sizing: border-box;}body {    ma...
float浮动以及案例演示
Globalizationa的博客
08-10 258
浮动元素会影响后边的元素，但不会影响前边的元素 清除浮动： 方法一：在浮动元素后面添加一个空元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width:100px; h...
frameset（框架）嵌套
wyy的博客
04-16 876
<html> <head> <meta charset="utf-8"> <title></title> </head> <frameset rows="210px,*,100px" > <frame src="index.html"/>
网页布局案例浮动
05-24
以下是一个简单的网页布局案例，使用了浮动来实现多列布局： ```html <!DOCTYPE html> <html> <head> <title>Floating Layout Example</title> <style> .container { width: 1000px; margin: 0 auto; } .col { float: left; width: 33.33%; padding: 20px; box-sizing: border-box; } .header { height: 150px; background-color: #ccc; } .sidebar { height: 500px; background-color: #eee; } .main { height: 500px; background-color: #fff; } .footer { height: 150px; background-color: #ddd; clear: both; } </style> </head> <body> <div class="container"> <div class="header col">Header</div> <div class="sidebar col">Sidebar</div> <div class="main col">Main Content</div> <div class="footer col">Footer</div> </div> </body> </html> ``` 这个布局将页面分为四列，分别是 header、sidebar、main 和 footer，每一列的宽度都是页面宽度的三分之一。每一列都使用了 `float: left` 来浮动到左侧，这样就可以实现多列布局。注意到每一列都有一个固定的高度，这是为了确保布局的稳定性。最后，为了清除浮动带来的影响，我们给最后一列 `footer` 添加了 `clear: both` 属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AloneDrifters

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值