一、浮动
1.块级元素未浮动不允许占行,浮动以后可以占行,上面的块级元素让位给下面的块级元素。
2.两个块级元素向同一个方向浮动,结果是两个块级元素浮动到了一起,若增加块级元素的宽度,本行不足以放下,就会自动换行。
3.多个块级元素同时浮动时,排列时除了往设置的那个方向靠之外,还会尽量向上靠。
4.clear可以清楚上面的块级元素浮动对下面的块级元素的影响。即,本来应该占领浮动后的区域,但是又有了清除命令,于是不能占领了。
二、定位
1.绝对定位:absolute
1. 当父元素绝对定位以后,子元素是按父元素来定位的,当父元素没有定位时,子元素是按body定位的。
2. 绝对定位没有考虑默认的margin和padding值,在设置top和left值之前,必须设置position:值u;
2.相对定位:relative
1. 相对最初的位置的移动
2. 其他类似于绝对定位
####3.固定定位:position:fixed
1. 子元素相对于窗口定位,不管父级元素有没有定位。
2. overflow:设置当元素的内容溢出其区域时发生的事情。
3. vertical-align:垂直对齐
4. z-index:设置元素的堆叠顺序。(值越大越会在上层显示)
4.定位的特性
1. 相对定位以后,元素原来的位置会被保留。
2. 绝对定位和固定定位以后,元素原来的位置会被清空
3. display:设置是否及如何显示元素。
1)block:块级;
2)inline:内嵌
3)none,不显示,占得位置被清除
4)visibility:hidden,占得位置没有被清除
4. 子元素绝对定位以离它最近的那个已经被定位的盒子为基础定位,若没有,就以body定位
5. overflow:hidden:解绑(子对父)
三、bfc
1.bfc:block formateing context:块级格式化上下文(环境)
2.布局规则
1)bfc内部所有盒子都会按照垂直方向排列(默认方式)。
2)相邻盒子在垂直方向上的margin值会重叠。
3)内部盒子会以bfc的左边线接触,浮动也一样。
4) bfc区域不会与浮动盒子重叠。
5)bfc环境中的子元素与外界分离,不会影响到外面的元素,而外面的元素也不会影响到bfc里面的元素。
6)bfc中浮动元素会参与计算。必须是块级的。
3.bfc的触发方式:
1)float不为none时,都会触发;
2)position:abusolute、fixed
3)display:inline-block,table-cell、table-caption,flex,inlline-flex
4)overflow:不为visible。
四、ifc
1.ifc:inline formateing content:行级格式化上下文(环境)
2.布局规则:
1)ifc中的元素会在一行上从左到右排列,不能有块级
2)在一行上的所有元素会在该区域形成一个行框
3)行框的宽度为包含框的宽度,高度为行框中最高元素的高度
4)浮动元素不会再行框中,并且浮动元素会压缩行框的宽度
5)行框的宽度容纳不下子元素时,子元素会换到下一行显示,并且会产生新的行框
6)行框内的元素遵循text-align和vertical-align