以下图片,详细清晰的讲明了盒子模型。
行内元素之间的水平距离
当两个行内元素并排紧邻时,它们之间的距离为margin-left和margin-right之和。
注意,对于行内元素,margin-top,margin-bottom无效果。
块级元素之间的竖直距离
两个块级元素之间的距离不是margin-bottom与margin-top总和,而是两者中的较大者。
盒子的浮动和定位
CSS 有三种基本的定位机制:普通流、浮动和定位。
浮动
浮动某元素,则要指定一个明确的宽度;否则,它们会尽可能地窄,没浮动前是100%。
浮动的框可以向左或向右移动,
如果它的外边缘碰到包含框或另一个浮动框的边框为止。
如果它的外边缘碰到非浮动框,则会换行到非浮动框的下面。
<style type="text/css">
#top{
border:thin solid #800000
}
#one{
border: thin solid red;
float:left;
}
#normal{
width:100px;
height:100px;
border:thin solid blue;
float:left
}
</style>
<div id="top">
<div id="normal">非浮动碰撞物</div>
<div id="one">阿大</div>
</div>
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
<div id="top">
<div id="normal">非浮动碰撞物</div>
<div id="one">阿大</div>
<div id="two">阿二</div>
</div>
阿二如果不浮动,就会占据阿大的位置,不过阿二的文本,会受到阿大的宽度影响。(浮动元素占据的空间,会对行内元素产生影响,从而形成文本环绕的效果)
如果浮动,则会紧挨在阿大旁边。
float 属性定义元素在哪个方向浮动。
以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS 中,任何元素都可以浮动。
对阿大、阿二都进行浮动,它们都脱离了标准流,宋词div马上占据了阿大和阿二的位置。
两个盒子有一定的空间把文字挤到一边,形成图文混排效果。(浮动元素占据的空间,会对行内元素产生影响,从而形成文本环绕的效果)
<div id="top">
<div id="normal">非浮动碰撞物</div>
<div id="one">阿大</div>
<div id="two">阿二</div>
<div id="text"><span>
谁道闲情抛弃久?每到春来,惆怅还依旧。日日花前常病酒,不辞镜里朱颜瘦。
河畔青芜堤上柳,为问新愁,何事年年有?独立小桥风满袖,平林新月人归后。
</span></div>
清除浮动
如果不想要文本div占据阿大阿二的位置而产生的文字环绕效果。可以对文本div使用.clear{ clear:both;}
注意:对clear属性的设置要放到文字所在的盒子里,而不是放到“浮动”的盒子里。
去掉文字div后,要解决高度自适应问题
去掉文字后,由于阿大和阿二都脱离了标准流,所以top DIV视阿大和阿二于无形。把高度收回。
解决方法是:在阿二后面加<div class=“clear”></div>,并对.clear{clear:both;}进行清除浮动。
定位
static (静态定位)
元素框正常生成。
relative (相对定位)
元素框偏移某个距离。它原本所占的空间仍霸占着。
absolute (绝对定位)
元素框从文档流完全删除,并相对于其包含块定位。(注意:包含块必须也是绝对定位/fixed)元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
fixed (固定定位)
元素框的表现类似于将position 设置为absolute,但其包含块是视窗本身。(不支持IE6)
CSS 相对定位
对一个元素进行相对定位,它将以起点为参照,垂直或水平移动。
div{
border:thin solid gray;
}
div>div{
margin:10px;
width:80px;
}
#relative{
position:relative;
top:20px;
left:30px;
}
#top{
float:left
}
<div id="top">
<div>div1</div><div id="relative">div2</div><div>div3</div>
</div>
注意: 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。注意,相对定位后,top div的宽度。因此,移动元素会导致它覆盖其它框。
绝对定位,元素不再保留原来占据的空间。
相关推荐
HTM是3D HEVC的标准测试模型,如果去官网(https://hevc.hhi.fraunhofer.de/svn/svn_3DVCSoftware/tags/)下载,则需安装SVN客户端。这里上传是HTM16
HTM是3D HEVC的标准测试模型,如果去官网(https://hevc.hhi.fraunhofer.de/svn/svn_3DVCSoftware/tags/)下载,则需安装SVN客户端。这里上传的是最新版(截止2018年10月)HTM16.3。
代码隐藏页模型与单文件页模型不同的是,代码隐藏页模型将事物处理代码都存放在cs文件中,当ASP.NET网页运行的时候,ASP.NET类生成时会先处理cs文件中的代码,再处理.aspx页面中的代码。这种过程被成为代码分离。 ...
HTM Cortical Learning Algorithms
基于视觉的自主导航与路径规划是移动机器人研究的关键技术,对基于视觉的计算机导航与同时定位及地图构建(SLAM)方法近三十年的发展进行了总结和展望。将视觉导航分为室内导航和室外导航,并详细阐述了每一种子类型...
可以访问https://ar.cnxfs.com.cn/girl.htm 等页面来体验AR本相机,目前可体验的页面有dragon.htm、girl.htm、mycar.htm、smoking_boy.htm和water_house.htm。对应的识别图片放在testAR\descriptors目录下,可以打开...
• 1.2.htm [removed]与 • 1.3.htm 调用外部JavaScript文件 • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 •...
1.盒模型 盒模型,就是 浏览器为页面中的每个 HTML 元素生成的矩形盒子。 这些盒子们都要按照 可见版式模型(visual formatting model)在页面上排布。可见的页面版式主要由三个属性控制: ...可以设置盒子内容区与
该存储库包含一个形状模型和一个灰度模型,这些模型在下面列出的数据集中的图像上进行训练,以及一个示例人脸。 该存储库包括用于手动标记新图像和训练新形状和灰度模型的代码,这意味着如果训练得当,它不仅可以...
Word2Htm是一款先进的Word转换Htm/Html的工具,该工具不像别的软件直接Word另存为Htm/Html,那样会产生很多垃圾代码,本软件可以智能分析Word中的代码,将Word文档转换为有条理、结构清晰、内容简洁的Htm/Html文档,...
机器学习 深度学习 pytorch tensorflow 贝叶斯 神经网络 算法
• 1.2.htm 与 • 1.3.htm 调用外部JavaScript文件 • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm ...
如何利用Jeff Hawkins的HTM神经网络模型进行异常检测。
万年历的算法.htm万年历的算法.htm万年历的算法.htm万年历的算法.htm万年历的算法.htm万年历的算法.htm万年历的算法.htm万年历的算法.htm万年历的算法.htm万年历的算法.htm万年历的算法.htm万年历的算法.htm万年历的...
HTM与UBB互转
漂亮按钮.htm 漂亮按钮.htm 漂亮按钮.htm
简洁大方的界面,集成一些优秀软件,实现直播、点播、音乐MV,高清软件下载、文件管理等...使用演示地址:https://item.taobao.com/item.htm?spm=686.1000925.0.0.32hJPi&id=528755893026。欢迎定制,qq:2219453535
机器学习 深度学习 pytorch tensorflow 贝叶斯 神经网络 算法
机器学习 深度学习 pytorch tensorflow