HTMI CSS常规流和浮动

块盒在常规流的位置:

盒子在包含块的垂直方向上依次摆放:依次摆放:按照HTML元素的书写顺序,

才能跟上到下摆放 ,盒子在包含块中占据的尺寸是整个盒子的尺寸,垂直方向上,

若两个外边距相邻,则进行合并 ,水平方向:水平方向上的外边距不会合并 。

 

外边距相邻:两个外边距之间没有border,padding,content

合并:均为正数最大,均为负数最小,一正以负则相加

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

让区块水平居中:1.给固定宽
                          2.左右margin设置为auto

垂直方向:1.margin为auto:0px
                2.height为auto:适应内容的高度

 

 

浮动的盒子位置:1.左浮动的盒子向上向左排列
                           2.右浮动的盒子向上向右排列
                           3.浮动盒子的顶边不得高于上一个盒子的顶边
                           4.若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能够容纳盒子,然后再向左或向右移动

 

 

浮动:定义:当元素的float属性取值为left或right时,元素属于浮动定位

float:1.不可继承
          2.默认值:none
          3.取值:none/left/right

 

当常规流遇上浮动流:1.浮动盒子在摆放时,要避开常规流盒子

2.常规流盒子在摆放时,无视浮动盒子

 

posted @ 2018-07-22 23:30  Fen达  阅读(389)  评论(0编辑  收藏  举报