盒子的浮动与定位（上）

最新推荐文章于 2022-03-17 15:33:20 发布
最新推荐文章于 2022-03-17 15:33:20 发布
阅读量120 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fonyer/article/details/83119255
版权

盒子的浮动与定位（上） - 截拳道 - The future is in my

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{ 
   font-family:Arial;
   font-size:12px;
   }
.father{
    background-color:#ffff99;
 border:1px solid #111111;
 padding:5px
 }
.father div{
     padding:10px;
  margin:15px;
  border:1px dashed  #111111;
  background-color:#90baff;
  } 
.father p{
     margin:15px;
     padding:10px;  
     border:1px dashed  #111111;
  background-color:#ff90ba;
  clear:left
  }
.son1{
     float:left;
  }
.son2{
    float:left;
  }
.son3{
     float:right;
  } 
.father .clear{
     margin:0;
     padding:0;  
     border:0;
  clear:both
  }        
</style>
<body>
 <div class="father">
       <div class="son1">box-01</div>
       <div class="son2">box-02</div> 
    <div class="son3">box-03<br/>box-03<br/>box-03<br/>box-03<br/>box-03<br/></div>    
    <p>这里是浮动框外的文字;这里是浮动框外的文字;这里是浮动框外的文字;这里是浮动框外的文字;这里是浮动框外的文字;这里是浮动框外的文字;</p>
 </div>
</body>
</html>

 

 

盒子的浮动与定位---clear 属性
盒子的浮动与定位（上） - 截拳道 - The future is in my

.father .clear{
     margin:0;
     padding:0;  
     border:0;
  clear:both
  }        
</style>
<body>
 <div class="father">
       <div class="son1">box-01</div>
       <div class="son2">box-02</div> 
    <div class="son3">box-03<br/>box-03<br/>box-03<br/>box-03<br/>box-03<br/></div>    
    <div class="clear"></div>
 </div>
</body>

盒子的浮动与定位（上） - 截拳道 - The future is in my

fonyer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS float浮动 定位 盒子之间的布局 BFC overflow:hidden 浏览器差异 塌陷
HandsomeDanielWu的博客
07-01 158
CSS float浮动 定位 盒子之间的布局 BFC overflow:hidden 浏览器差异 塌陷
盒子的定位
阿牛哥的博客
10-21 2095
盒子的定位 一、 定位 （position） 定位position 说明： 设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。 定位 position 语法： position : static 、absolute 、relative、fixed 。 static : 称为静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 relative ：称为相对定位，使用相对的盒子的位置常以标准流动排版方式为基础，然后使盒子相对于它在原来的位置偏移指定的距离。相对
【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
weixin_30681615的博客
05-06 217
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框，每个框由元素的内容，内边距，边框和外边距组成。 2.如果在元素上添加背景，则背景是边框, 内边距和内容组成的区域. 3.在css中width和height指的是内容区域的宽度和高度。增加内边距，边框和外边距不会影响内容区...
盒子定位
ahui610324的博客
06-03 1174
在页面布局设计中，盒子定位是十分重要的内容。在 CSS中控制盒子的位置有多种方式：盒子的浮动定位，盒子的流动定位，以及通过 position属性控制盒子的位置。在此，主要介绍盒子的position定位。1.静态定位（static）：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响2.固定定位（fixed）：元素的位置...
HTML 布局 浮动 位置移动 和 边框盒子模型例子
06-24
HTML 布局 浮动 位置移动 和 边框盒子模型例子 通过这些文件例子的使用你基本可以了解布局的一些相关只是，通过例子自己尝试做出自己的页面
CSS面试须知盒子模型、浮动及定位.docx
07-08
3. 浮动的盒子参照父盒子的对齐，不会与父盒子的边框重叠，也不会超过父盒子的内边距 4. 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流 浮动的应用包括： 1. 让多个块级元素在一行显示 2. 让...
css的核心内容 标准流、盒子模型、浮动、定位等分析
01-19
1、块级元素：如：<div></div>2、行内元素：如：<span></span>从效果中看块级元素与行内元素的区别： 通过CSS的设置把行内元素转换成块级元素： 标准流：就是标签的排列方式。我的未来不是梦</div><span id=st ...
CSS元素的浮动与定位综合案例1源代码.pdf
07-10
本文档提供的“CSS元素的浮动与定位综合案例1”是一个关于如何使用CSS来创建画册式网页布局的实例，旨在帮助学习者深入理解CSS的浮动与定位概念。这个案例来源于喻浩的《DIV+CSS网页样式与布局从入门到精通》一书，...
CSS下盒子模型定位浅析.pdf
10-04
【CSS盒子模型定位浅析】 ...在实际应用中，还需要掌握浮动(float)、定位(position)等高级布局技巧，以应对更复杂的设计需求。通过熟练运用CSS布局技术，开发者可以打造出更具视觉吸引力和用户体验的网页。
盒子模型的布局-流动，浮动，层
第三食堂
04-27 1885
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。 在网页中，元素有三种布局模型： 1、流动模型（Flow）：流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征： 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因
【前端学习】前端学习第六天：盒子的浮动和定位详解
qq_49916504的博客
03-17 1800
一、浮动 float 通过浮动可以使一个元素向其父元素的左侧或右侧移动； 下面来介绍float的这三个属性值： 1、none：默认值，元素不浮动； 2、left：元素向左浮动； 3、right：元素向右浮动。 浮动的特点： 1、元素设置浮动后，水平布局的等式便不需要强制成立； 2、元素设置浮动后，将会从文档流中脱离，此后元素的一些特点也会发生改变。 脱离文档流的特点： 块元素： 1、块元素不再独占页面一行； 2、块元素的高度和宽度默认被内容撑开； 行内元素： 行内元素脱离文档流后
拖拽盒子在指定位置内移动
zhanghl150426的博客
08-28 1176
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style type="text/css"&gt;             #div1
（8）盒子的定位
weixin_30642305的博客
05-26 621
盒子的定位 一、 定位 （position） 定位position 说明：设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。 定位 position 语法：position : static 、absolute 、relative、fixed。 static : 称为静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 rel...
css盒子的浮动与定位
草根
02-18 458
1. 盒子浮动 float Float 属性： 默认是 none ，按照标准流来定位； Left：左悬浮； Right：右悬浮；   2. 使用 clear 清除浮动的影响 Clear 属性： 默认是 none，允许两边都可以有浮动对象； Left： 不允许左边有浮动对象 Right：不允许右边有浮动对象 Both：不允许有浮动对象   3. 盒子定位 position...
CSS-盒子的浮动与定位
cc098818的博客
08-13 765
1、盒子浮动 float Float 属性： 默认是 none ，按照标准流来定位； Left：左悬浮； Right：右悬浮； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子浮动float none</title> <style type="...
南昌航空大学考研17个学院，59个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
07-15
南昌航空大学考研17个学院，59个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
齐齐哈尔医学院考研，57个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
最新发布
07-15
齐齐哈尔医学院考研，57个专业课历年考试真题及答案汇总整理，备考资料题库视频.pdf
龙年吉祥开门红PPT模板，适用于年度总结，工作总结
07-15
【作品名称】：龙年吉祥开门红PPT模板，适用于年度总结，工作总结 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值