布局
1. 浮动 float
浮动的概念和实例
- float是css中的定位属性,用于设置标签对象(如:div标签盒子,span标签、a标签、em标签、html标签)的浮动布局。从其操作的标签上可知,所有的HTML元素都是支持浮动的。浮动后的元素display属性变为block
- 浮动也就是我们所说标签对象浮动居左(float:left)靠右(float:right)。浮动框可以向左或者向右移动,直到它的外边缘碰到body边框或者另一个浮动框的边框为止。(原则之一)
- 只要设置了浮动,元素就脱离了文本流,由于浮动框不在文档的普通流中,所以文档普通流中的块框表现的就像浮动框不存在一样。
练习:
在文本流(同一平面):
注意标准流中,文字要在背景的上面一层,因为能看到文件,所以证明背景是在下面一层的。HTML标签的生态系统。
让box1浮动:
注意:如果说box1浮动起来之后,脱离了文档流,那么box1的背景、文档,向上浮动一层。box2的背景自然就藏在了box1的下面,文字不会,因为浮动一层,所以背景和文字是同级,是挡不住文字的。而box2的文档和box1的背景是同级,所以box2被box1的背景顶在了下面
很明显box1的背景和box2的文本在一层
- 浮动什么时候停靠?
遇到浮动的block元素,遇到文档流边界。
清除浮动影响
给p标签加上背景,看p元素所占的位置:
可以发现浮动对P标签造成了影响,注意是后续盒子。
- 清除浮动
虽然清除了浮动,但是P标签默认有16的外边距,这是浏览器的默认行为。但是我们可以看到,这个外边距没有起作用,塌陷进去了。无论设置多大都会塌陷进去。
- 这个浮动是不能给p标签设置外边距,因为外边距的高低是由内容决定的,内容的多少,无法确定,所以不能固定。要想撑开可以使用内边距。
- 解决方法二:加一个br标签来清除浮动:
- 解决方法三:
- 解决方法二:加一个br标签来清除浮动:
子盒子浮动,父盒子缩为0;说明父盒子的高度如果不自己设置,是由内容撑高的。如果子盒子浮动是撑不起高度的。因为不在同一层,如果父盒子浮动起来,就又重新变为同一层,所以能撑起来
加一段文本:
overflow:hidden;重新计算高度后:
原理:box2和box3是box的两个子标签。当两个子标签浮动起来之后,浏览器要重新计算他们的高度,当计算出来高度后,赋予box对应高度。这个其实叫设置固定高度,是浏览器二次刷新时进行的。
父盒子又变为了120像素,注意这个只能是浮动用,定位用没有效果。因为他们两个就不是一个层级的东西。
浮动的几个特性
- 必须停靠的边的元素display属性必须是block;
a元素(内联元素)靠不住
内联块元素也靠不住:
只有块元素靠得住:
或者让内联元素浮动自动转换成为块,但此块非彼块,它的宽和高如果不设置是自动的,并不会占满整行。
- 如果内联元素浮动,那么内联元素会自动转换为block元素,可设置宽和高。
-
如果父元素的宽高未设置,那么父盒子将继承父元素的宽度,而高度只能由内容撑开。
如果子元素浮动,父元素不浮动,而父元素高度未设置,那么标签和背景都属于地面级别元素,子元素的背景就高于了父元素的背景和标签本身,自然撑不开了。父元素就会缩回去
如果父元素浮动,就变成了行内块元素,宽度就不继承了,也是自动撑开,而又和子元素变为了同级:
如果父元素只要有了宽高,那么子元素就会停靠。
不管子元素浮不浮动,它都会向它的父元素看起,前提是父元素需要有高度,这个高度如果是子元素撑起来的话,那么子元素浮动之后,父元素就没有高度,变为0,这时就没办法向父元素看起了。但凡有高度,子元素就不能逃出父元素,必须向父元素看起
-
浮动元素的外边界不能超过其浮动包含块的内边界。
如果说浮动元素外有父元素,那么父元素就是浮动元素的边界。浮动元素不可能超出父元素的内边距。 -
浮动元素的外边界是另一浮动元素的外边界。
也就是说浮动元素之间不能覆盖,浮动元素的边界可以是另一个浮动元素的停靠点。 -
浮动元素的顶端不能比之前出现的浮动元素的顶端更高。
浮动元素从上到下,从左到右。放不下另起一行 -
浮动元素顶端不超过当前行
实例
卡壳效果:
在父盒子上清除浮动,重新计算高度;
定位
- 三个定位之间的区别,参见 https://blog.csdn.net/gaoyuan1044704446/article/details/79463999
- 定位之后,relative的边界是相对于自己的。position的margin是相对于浏览器的
- 使用相对定位之后、绝对定位之后、固定定位之后,margin还是存在的,因为是盒子模型所以不可能不管用。但是如果设置了left,top,right,bottom属性,那么方位优先。但如果方位未确定,定位后的元素还是可以被顶开的。如下:
- 使用定位后,如何使得被定位的块居中?参见:https://blog.csdn.net/qq_37621289/article/details/82910652
方法2:
相对定位
- 使用相对定位的盒子,它会相对于它原本的位置,通过偏移到达新的位置。
- 使用相对的盒子仍在标准文本流中,它对父块和兄弟盒子没有任何影响。