一html 模型分为两种:
1.1 盒模型 margin padding border
个人理解这种模型是由外向内的,外部元素决定内部元素的位置,大小,长宽,
1.2 line box 模型
个人理解这种模型是由内向外的,内部元素决定外部元素的长宽,大小
二 line box 模型分析
2.1 inline box
这东西就是行内元素,比如span 比如 img 比如 i 比如 文字 这些东西都是 inline box 他们之间的组合是inline boxes 这些东西的共同点就是按行排列,底线对齐,出现文字的话,文字在基线上,其他元素的底和文字底对齐,
2.2 line box
这东西是一行inline box 组成的,line box的高度是 所有的 inline box中最高的那个的高度
2.3 contain box
这东西官方比喻叫坐标系,比如一个div 里面都是 line box组成的,那这些linebox的line-height加在一起组成contain box 的高。
三 display 的三种属性
3.1 inline
设定本元素不管以前是什么现在都是行内元素,对应上面的line box模型 也就是 inline box ,该元素没有高度,没有长度,他的长宽将由内部的contain box来决定
3.2 block
设定本元素不管以前是什么现在都是块级元素,可设置长宽,如果内部的contain box的height 超出了block的宽度,block不会被挤大,而是不变,contain box会超出block
3.3 inline-block
行内块元素,性质是行内排列,但是可以设置长宽,如果contain box 的height 超出了inline-block的height inline-block也不会被撑大,contain box 会挤出去
四float 具体作用
4.1 将display属性设置为 inline-block
分为两种情况
1 本身元素属性是 inline
本身元素属性是inline ,本元素和其他inline元素组成line box ,元素被float,元素的display被变为 inline-block,元素不再可以组成line box,不再遵循基线对齐的规定,而是根据float的left属性,移动到contain box的最左侧,原本的line box 因为失去了图片,导致高度塌陷,此时元素本身不再属于line box,float规定float占据行内元素的空间不占据块级元素的空间 ,这时 inline-block 属于行级元素,不会被覆盖掉。
2 本身元素属性是block
本身元素属性是 block 只是忽略掉上面的高度塌陷的部分,其他的都和inline元素一样
4.2 按float的方向将元素移动到相应位置
4.3 将元素脱离文档流