【CSS】定位、多列布局及响应式布局

msmxsd

已于 2022-07-14 15:46:15 修改

阅读量1k

点赞数

分类专栏： web前端开发文章标签：前端 css css3 vscode

于 2022-03-23 23:44:05 首次发布

本文链接：https://blog.csdn.net/qq_45943210/article/details/123668418

版权

根据MDN网站学习记录笔记

定位

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为。

有许多不同类型的定位，您可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用position属性

定位(positioning)能够让我们把一个元素从它原本在正常布局流(normal flow)中应该在的位置移动到另一个位置。

注意：定位的标题不再出现在文档流中，所以其他内容向上移动到顶部。

定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素。

当多个元素因为都设置了定位而重叠时，可以使用z-index属性改变堆叠顺序。z-index只接受无单位索引值。

z-index是对z轴的参考，z轴可以想象成屏幕到使用者脸部的一条直线，正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。

固定定位：与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
粘性定位：让元素先保持和position: static一样的定位，当它的相对视口位置达到某一个预设值时，他就会像position: fixed一样定位。

.container {
   
  column-count: 3;
}

.container {
   
  column-width: 200px;
}

Multicol 创建的列无法单独的设定样式。

.container {
   
  column-width: 200px;
  column-gap: 20px;
}

用 column-rule 在列间加入一条分割线。
类似于border属性，column-rule是 column-rule-color 和 column-rule-style的缩写，接受同 border 一样的单位。

.container {
   
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}

把内容放入多列布局容器内，内容被拆成碎块放进列中，内容折断。

关注

专栏目录