随笔档案

CSS 布局之 —— display + position + float + 盒状模型

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。具体介绍如下：

1. Display 属性

　　Html 元素分为：块级元素（block element）和行内元素（inline element）

block element

作者：波斯汪
链接：https://www.imooc.com/article/26510
来源：慕）和内联元素两种。

2. Position（定位）属性

　　　static 定位： Html 元素 position 属性的默认值，不受 top、bottom、left、right 影响；

　　　relative 定位：相对定位元素的定位是相对其正常位置（移动相对定位元素时，它原本所占的空间不会改变）；

　　　absolute 定位：绝对定位的元素的位置相对于最近的已定位（position 属性设置为 relative/absolute/fixed）的父元素，

　　　　　　　　　　　如果元素没有已定位的父元素，那么它的位置相对于<html>；

　　　fixed 定位：元素的位置相对于浏览器的窗口是固定位置，即使窗口是滚动的它也不会移动；

　　　sticky 定位：元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，

　　　　　　　　　　换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

　　　注1：除了 static 定位，其它定位方式中元素可以使用 top、bottom、left、right 属性进行定位。

　　　注2：重叠的元素

　　　　元素指定为 absolute/fixed 定位后，其定位与文档流不再相关（不再占有其原本所占的空间），且覆盖页面上通过文档流定位的其它元素。

　　　　通过 z-index 属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序。

3. Float（浮动）属性

4. 盒子模型

5. 滚动条

块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

作者：波斯汪
链接：https://www.imooc.com/article/26510
来源：慕课网

块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

作者：波斯汪
链接：https://www.imooc.com/article/26510
来源：慕

6. 隐藏元素：display:none（隐藏的元素不会占用任何空间）

　　　　　　 visibility:hidden（隐藏的元素仍需占用与未隐藏之前一样的空间）

posted on 2020-12-14 18:11 青叶煮酒阅读(273) 评论(0) 编辑收藏举报

随笔档案