凉风有信,秋月无边。
亏我思娇的情绪好比度日如年。

DIV盒子中的float和margin的最详细分析

《DIV盒子中的float和margin的最详细分析》正文开始,本次阅读大概8分钟。

对于HTMl中的一些小疑惑,在这里进行解析一下。

一、div的理解

DIV是基于行,就是一个div占据一行,不会让别的元素,和自己同行。

span不是基于行的,就是一个span哪里有空哪里专,不会单独占用一行。

二、Float理解

Float:Css样式的float浮动属性,用于设置标签对象(如:div标签盒子、span标签、a标签、em标签等html标签)的浮动布局

DIV在float之后就失去了本个div基于行的性质。下一个元素的东西会移动过来。

float:right

关于两个div占据同一行的解决方法:http://www.tuicool.com/articles/fMneyuz

三、Margin 理解

①盒子模型:对于盒子模型的理解:

来一个明了的图。

一个div-c浮动之后就不属于div-a的成员了。

div浮动之后的margin的计算,是按照与自己靠近的元素为基础的。

②Margin英文解释:是某个对象的外延

Margin说明

margin是设置对象外边距外延边距离(里面元素到外右的距离)。而不是距离别的某个元素的距离。

margin的值有三种情况,可以为正整数和负整数并加单位如PX像素(margin-left:20px);可以为auto自动属性(margin-left:auto自动);可以为百分比(%)值(margin-left:3%)。

Margin延伸(单独设置四边间距属性单词)

margin-left对象左边外延边距(margin-left:5px; 左边外延距离5px)

margin-right对象右边外延边距(margin-right:5px; 右边外延距离5px)

margin-top对象上边外延边距(margin-top:5px; 上边外延距离5px)

margin-bottom对象下边外延边距(margin-bottom:5px; 下边外延距离5px)

同一个对象在外延距离遇到别的元素(不一定同一个元素)的时候会进行移动,来使我们的外延距离达到我们的要求。

这里仅仅是自己的几个只是疑惑点。如了解具体的可以去查询相关的API。

赞(271)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的内容,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。本博客资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。如果本文导致的版权问题以及内容纠错问题请联系站长QQ:1004619 | 点此给我发送邮件
本文标题:DIV盒子中的float和margin的最详细分析
本文地址:https://www.1004619.com/nn/divhzzdfloathmargindzxxfx.html