网站首页 > 知识剖析 正文
position:
position属性取值:static(默认)、relative、absolute、fixed、inherit、sticky。
- static: 没有定位,正常状态下。可以快速取消定位,让top、right、bottom、left 失效
- relative: 相对于其在正常流中的位置偏移,原本占据的空间依然会保留
- absolute: 相对于第一个position属性不为static的父类定位,会脱离正常文档流,不占据空间位置。
- fixed: 定位原点相对于浏览器窗口,而且不能变。
- inherit: 从父类继承position属性的值,但是任何版本的IE都不支持该属性
- sticky: 该元素并不脱离文档流,仍然保留元素原本在文档流中的位置,这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。
- 最后说一点,z-index属性是针对以上定位属性而出现的,它只在定位元素上有效。
display
display属性取值:none、inline、inline-block、block、flex、inherit。
1、display:none和visiability: hidden 都可以隐藏div,前者不占据文档的空间,后者占据文档的位置。
2、 inline: 行内元素,以水平方式布局,垂直方向的margin和padding都是无效的,大小和内容一样,且无法设置宽高。
3、 block: 块元素,独占一行,可以使用margin来控制元素之间间距
4、 inline-block: 既具有block的宽度高度特性又具有inline的同行特性。
5、display: flex 意为”弹性盒布局模型”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。采用flex布局的元素,称为flex容器。它的所有子元素自动成为容器成员,称为flex项目(flex item)。
- 上一篇: 权限管理系统 权限管理系统er图
- 下一篇: 终于搞懂了 CSS 中的百分比是基于什么工作的了
猜你喜欢
- 2024-11-12 原来隐藏一个DOM元素可以有这么多种方式,最后一种你肯定不知道
- 2024-11-12 你知道什么是BFC么 你知道什么是bfc么英语
- 2024-11-12 为什么我写的z-index不生效? z index无效
- 2024-11-12 开发人员在编写 HTML 和 CSS 时最常犯的六大错误
- 2024-11-12 css中如何让div水平居中(上) 怎么让div水平居中
- 2024-11-12 CSS 12个趣味小技巧大公开 | 原力计划
- 2024-11-12 谈谈工作中常用的设计模式 工作设计模型
- 2024-11-12 CSS 父元素中的绝对定位 父元素设置相对定位
- 2024-11-12 菜鸟学习记:第二十五天 菜鸟学习记
- 2024-11-12 响应式网页中的高度设计,你认真的吗?
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)