元素浮动
float特性:none不浮动
left/right:向左/向右浮动
熟练理解w3school中对浮动的讲解
定位
固定定位(fixed)
位置是相对于浏览器窗口变动的
相对定位(relative)
相对于它本身的位置进行位置变化的
绝对定位(absolute)
相对于第一个定过位的父元素(不包含使用margin等方式确定位置)位置进行定位的;当其父元素都没有定过位,则以body的位置开始定位。
1.在绝对定位中,要将元素内容放在某形状中,用到clip
clip(1px 2px 3px 4px)---依次表示上右下左方向的值
注意:上,左的值越大,形状越小,被裁减的越多;下,右的值越大,形状越大,被裁减的越少。
2.绝对定位中,处理溢出采用overflow,它的值有
visible(不裁剪,默认)
hidden(裁剪从而不显示超出部分的内容),
scroll(提供滚动条)
auto.(自动)
bfc(块级格式化上下文)和ifc(行级格式化上下文)环境
bfc
布局规则:
1.内部所有盒子按照垂直方向放置。
2.相邻的盒子 垂直方向上margin值会重叠。
3.与浮动相同,内部盒子会以bfc的左/右边线接触。
4.BFC的区域不会与浮动盒子重叠。
5.bfc环境中的子元素与外界分离,不会影响外面的元素,外面的元素也不会对立面的元素产生影响。
6.bfc中的浮动元素会参与计算。
触发方式:
1.float的值不为none
2.定位方式为绝对定位以及固定定位
3,display:值为inline-block;table-cell;table-caption;flex;inline-flex;
4.overflow不为visible.
ifc
布局规则:
1.内部所有盒子按照水平直方向放置。
2.一行上的所有元素会形成一个行框。
3.行框的宽度为包含框的宽度,高度则是以行框中元素最高的高度为准。
4.浮动元素不会在行框中,且浮动元素会压缩行框的高度。
5.当行框的宽度容纳不了子元素时,子元素会自动换到下一行,并且在下一行又形成一个行框。
6.行框内的元素遵循水平和垂直方向的对齐方式。