首页 > 其他 > 详细

盒子常规流和浮动基础

时间:2018-06-25 00:55:21      阅读:236      评论:0      收藏:0      [点我收藏+]

块盒在常规流下的位置

  • 盒子在包含块的垂直方向上摆放
  • 依次摆放:按照HTML元素的书写顺序从上到下摆放
  • 盒子在包含块中占据的尺寸是整个盒子的尺寸

  • 垂直方向上若两个外边相邻,则进行合并(折叠)

  • 垂直方向:水平方向上外边距不会合并
  • 外边距相距:两个外边距之间没有border、padding和content

  • 合并:均正取大,均负取小,一正一负相加

盒模型中的auto值-水平方向

常规流盒子水平方向上的尺寸,必须等于包含块的宽度

垂直方向

margin为auto:0px

height为auto:适应内容的高度

浮动

当元素属性取值为left、right时,元素属于浮动定位。

     float:不继承
            默认值为none
            取值none(不动)left(左浮动)right(右浮动)
盒子位置

右浮动 先向上再向右

左浮动 先向上再向左

浮动盒子的顶边不得高于上一个盒子的顶边

若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动

盒子常规流和浮动基础

原文:https://www.cnblogs.com/liuyizhou/p/9222209.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!