• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

CSS的浮动以及盒子模型

技术杂谈 勤劳的小蚂蚁 4个月前 (01-04) 88次浏览 已收录 0个评论 扫描二维码
今天我们来了解一下浮动
我们之前说过div是一个块级元素单独占一行的,排版会很不方便,这就引出了我们今天要学习的内容:浮动
这是没加浮动的页面效果:
CSS浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
单独看上面的解释理解起来有点难度~,那么现在我们就来使用一下浮动
右浮动:
单独一个div块向右浮动
左浮动:
这样所有的元素就都在一行了
但是要注意一些情况:
当包含的框的宽度不够的时候会把最后一个div块挤到下一行,直到有足够的空间放下它
浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
还有就是:当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。就像下面这样~
这个时候就需要使用clear来清除浮动
clear 属性定义了元素的哪边上不允许出现浮动元素,上面的情况直接加在div1上面是没有效果的~
我们可以创建一个空的元素来清除浮动~
css的盒子模型
其实这些HTML页面上的元素其实就像一个个小盒子一样~

打个比方:
我们收快递的时候,打开快递盒子,盒子最中间的就是我们买的物品,也就是内容,然后盒子就是边框(border)自身也有一定的厚度,盒子到物品之间的距离就是内边距(padding),那么如果我们一次取了很多快递,快递盒子之间也会有一定的距离,这就是外边距(margin)
其中内边距、边框和外边距的数值都是可选的,默认值是零
CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加整个元素框的尺寸。
至于如何设置这些属性的值。
就不详细的说了~
伙伴们可以自己来实验一下

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:CSS的浮动以及盒子模型
喜欢 (0)
[247507792@qq.com]
分享 (0)
勤劳的小蚂蚁
关于作者:
温馨提示:本文来源于网络,转载文章皆标明了出处,如果您发现侵权文章,请及时向站长反馈删除。

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00