CSS position属性
序号 | 属性值 | 描述 |
---|---|---|
1 | static | static是position的默认值,指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。。 |
2 | relative | 元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(),,通过top、right、bottom、left 属性来相对于其原来的位置进行移动,可以设置外边距(margin),且不会与其他边距合并。 |
3 | absolute | 不为元素预留空间,通过指定元素,来确定元素位置,。绝对定位的元素可以设置外边距(margin),且不会与其他边距合并。 |
4 | fixed | ,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置,fixed相对于window固定,滚动浏览器窗口并不会使其移动,。。打印时,元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先,可以使用 top、right、bottom、left 属性是元素偏移位置 |
5 | sticky | 盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table元素的效果与 position: relative 相同。 |
6 | inherit | 从父元素继承 position 属性的值。 |
CSS display属性
序号 | 属性值 | 描述 |
---|---|---|
1 | inline | 默认值,将设置该元素的标签像普通文本一样插入文档流,不会自动换行或者设置宽度和高度。 |
2 | block | 将绑定该属性的标签以块的形式插入到文档流中,即会自动设置宽跟高并且会换行,可以设定margin 跟padding。 |
3 | inline-block | 将绑定该元素的标签以inline内联样式插入到文档流中,然后它本身拥有block块的属性,可以设置宽度跟高度。 |
4 | none | 将该元素隐藏,不会再文档流中出现。 |
CSS float属性 (引用:https://www.cnblogs.com/lrzw32/p/4948514.html)
float需要遵守的一些规则
- 浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。设置了float属性元素变成了一个块级元素的感觉,可以设置width和height属性。
- 包含块:浮动元素的包含块就是离浮动元素最近的块级祖先元素,浮动元素的浮动位置不能超过包含块的内边界.
- 如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象。
- 如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻,如果包含块的宽度不够大,则后面浮动的元素会向下浮动。
5.如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会不会高于非浮动元素。 - 浮动元素会尽可能地向顶端对齐、向左或向右对齐。
float的特殊情况
- 浮动元素的延伸性:浮动元素高度大于父级元素,如果父级元素没有设置浮动,会出现浮动元素超出了父元素的底端的情况,只要将父元素也设置为浮动的就可以这就这个问题。可以理解为元素被设置成浮动后,该元素会进行延伸进而包含其所有浮动的子元素。
- 浮动元素超出父级元素的padding
clear属性
- 确保当前元素的左右两侧不会有浮动元素。
- 。
清除浮动
清除浮动的目的是解决高度塌陷的问题。