前端学习记录~2023.7.17~CSS杂记 Day9 浮动float 和amp; 定位position 和amp; 多列布局和amp; 响应式设计

山药泥拌饭

2024-04-22 帮助1人

前言

由于有很多知识非常符合直觉或者和其他语言有通用性，因此个人觉得不需要全部记下来，本篇只记录一些个人觉得需要注意或单独记忆的知识点。

同时为了提高效率和减少对不重要内容的时间投入，会考虑更加精简。

相比前两篇，本篇更详细记录了浮动、定位和多列布局。同时记录了响应式设计

一、浮动

float属性

1、使盒子浮动起来

在 CSS 规则中添加float属性，比如

.box {
    float: left;
    margin-right: 15px;
    width: 150px;
    height: 100px;
    border-radius: 5px;
    background-color: rgb(207,232,220);
    padding: 1em;
}

浮动元素会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间

margin-right把其他文字从浮动元素边推走了

我们可以在浮动元素上应用 margin，将文字推开，但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流，紧随其后的元素排布在它的“后方”。

2、清除浮动

一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响，我们需要停止它；这是通过添加 clear 属性实现的。

例如向浮动元素下方的第二个段落添加 cleared 类，然后向 CSS 文件中添加以下样式：

.cleared {
  clear: left;
}

应该看到，第二个段落已经停止了浮动，不会再跟随浮动元素排布了：
学新通

clear 属性接受下列值：

left：停止任何活动的左浮动
right：停止任何活动的右浮动
both：停止任何活动的左右浮动

3、清除浮动元素周围的盒子

如果存在一个盒子同时包含了很高的浮动元素和一个很短的段落，会出现下面的问题

<div class="wrapper">
  <div class="box">Float</div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
</div>

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
}

学新通
这是因为浮动元素处于正常文档流之外，停止紧随其后元素的浮动并不像之前那样奏效。如果你想让盒子联合包住浮动的项目以及第一段文字，同时让紧随其后的内容从盒子中清除浮动，这就是一个问题。

下面有三种方法可以处理这种问题，前两种在所有浏览器中均可以奏效（虽然看上去有点“小技巧”），最后一种是可以处理问题的较新的解决方案。

（1）clearfix 小技巧

传统上，这个问题通常由所谓的 “clearfix 小技巧” 解决，其过程为：先向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

这与在浮动盒子后手动添加诸如 div 的 HTML 元素，并设置其样式为 clear:both 是等效的

效果如下
学新通

（2）使用 overflow

一个替代的方案是将包裹元素的 overflow 属性设置为除 visible 外的其他值

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

这个例子之所以能够生效，是因为创建了所谓的块格式化上下文（BFC）。可以把它看作页面内部包含所需元素的一小块布局区域。如此设置可以让浮动元素包含在 BFC 及其背景之内。大部分情况下这种小技巧都可以奏效，但是可能会出现莫名其妙的滚动条或裁剪阴影，这是使用 overflow 带来的一些副作用。

（3）display: flow-root

一个较为现代的方案是使用 display 属性的 flow-root 值。它可以无需小技巧来创建块格式化上下文（BFC），在使用上没有副作用

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}

二、定位

定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。本节解释的是定位 (position) 的各种不同值，以及如何使用它们。

position属性

1、定位有哪些

静态定位（position: static）：元素默认属性，指放在文档布局流的默认位置
相对定位（position: relative）：允许我们相对于元素在正常的文档流中的位置进行移动，包括将两个元素叠放在页面上。这对于微调和精准设计非常有用
绝对定位（position: absolute）：将元素完全从页面的正常布局流中移除，类似将它单独放在一个图层中。我们可以将元素相对于页面的<html>元素边缘固定，或相对于该元素的最近被定位祖先元素。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板
固定定位（position: fixed）：与绝对定位类似，但它是将一个元素相对浏览器视口固定，而不是相对于另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用
粘性定位（position: sticky ）：一种新的定位方式，它会让元素先保持和 position: static 一样的定位，当它的相对视口位置达到某一个预设值时，它就会像 position: fixed 一样定位

2、top、bottom、left 和 right

top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。

需要注意的是，在相对定位中，这些值相当于向反方向给定一个推力，比如指定 top: 30px，会像是有一个力推动框的顶部使它向下移动 30px

在绝对定位中，他们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。所以在这种情况下，指定top: 30px，我们说的绝对定位元素应该位于从“包含元素”的顶部 30px

3、定位上下文

如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。

可以通过改变定位上下文来更改绝对定位的元素的相对位置元素。做法就是设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）

4、介绍 z-index

当元素开始重叠，可以通过z-index属性更改堆叠顺序。

默认情况下，定位的元素都具有 z-index 为 auto，实际上为 0。较高的值将高于较低的值，比如设置为 1 就会在更上面

需要注意，z-index 只接受无单位索引值

5、滚动索引

position: sticky 的另一种有趣且常用的用法，是创建一个滚动索引页面。在此页面上，不同的标题会停留在页面顶部。

这个需要用的时候再去专门查询吧。

三、多列布局

多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样本节记录怎么使用这一特性。

1、column-count

使用column-count 将创建指定数量的列

.container {
  column-count: 3;
}

2、column-width

使用column-width，浏览器将按照你指定的宽度尽可能多的创建列；任何剩余的空间之后会被现有的列平分。这意味着你可能无法期望得到你指定宽度，除非容器的宽度刚好可以被你指定的宽度除尽。

3、给多列增加样式

这样创建的列无法单独的设定样式。不存在让单独某一列比其他列更大的方法，同样无法为某一特定的列设置独特的背景色、文本颜色。

有两种方式更改列的样式：

column-gap：改变列间间隙
column-rule：在列间加入一条分割线

column-rule 是 column-rule-color 和 column-rule-style的缩写，接受同 border 一样的单位

例如：

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

效果如下：
学新通
值得一提的是这条分割线本身并不占用宽度。它置于用 column-gap 创建的间隙内。

4、设置 break-inside

break-inside属性定义页面、列或区域发生中断时候的元素该如何表现。

break-inside: auto;元素可以中断
break-inside: avoid;元素不能中断

四、响应式设计

这节会涉及到，在建立响应式站点的时候，你可能会用到的各式 Web 平台的特色功能。

1、媒介查询

媒介查询允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将 CSS 选择性地适应用户的需要应用在样式化页面上。媒介查询也是响应式设计新兴起来的原因。

例如，下面的媒体查询进行测试，以知晓当前的 Web 页面是否被展示为屏幕媒体（也就是说不是印刷文档），且视口至少有 800 像素宽。用于.container选择器的 CSS 将只会在这两件前提存在的情况下应用。

@media screen and (min-width: 800px) {
	.container {
		margin:1em 2em;
	}
}

可以在一张样式表上加入多条媒体查询，调整整个页面或者部分页面以达到适应各式屏幕尺寸的最佳效果。

媒体查询，以及样式改变时的点，被叫做断点（breakpoints）。

使用媒体查询时的一种通用方式是，为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在你知道你有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局。这经常被描述为移动优先设计。

2、灵活网格

响应式站点不只是在断点之间改变它们的布局，它们是建立在灵活网格上的。一个灵活网格意味着你不需要适配每个可能使用的设备尺寸。

早年间进行响应式设计的时候，我们唯一的实现布局的选项是使用float。灵活浮动布局是这样实现的，让每个元素都有一个作为宽度的百分数，而且确保整个布局的和不会超过 100%。在他对于液态网格文章的原文中，Marcotte 详细描述了一种布局的法则，通过使用像素并把布局转化为百分数的方式设计。

target / context = result

例如如果我们的预期栏尺寸为 60 像素，而且它所在的上下文（或者容器）为 960 像素，我们在将零点二的空间移动到右边以后，用 960 去除 60，得到我们能够使用在我们的 CSS 上的值

.col {
  width: 6.25%; /* 60 / 960 = 0.0625 */
}

3、现代布局技术

（1）多个列

也就是之前提到的column-count和column-width

（2）伸缩盒

也就是弹性盒子 flex 相关内容

（3）CSS网格

也就是 grid 网格相关内容

（4）响应式图像

最简单的一个是诸如设定图像max-width: 100%，但弊端就是图像有可能会显示得比原始尺寸少很多，浪费带宽。或希望在移动端更小尺寸时展示不同的图片，也无法实现。

使用<picture>元素和<img> srcset和sizes 特性，解决了这两个问题

可以在 HTML 章节的响应式图片一节仔细看

（5）响应式排版

例如我们只想在大些的屏幕上有个超大的标题，那我们先弄个小点的标题，再使用媒体查询，在我们知道用户使用至少1200px的屏幕的时候，拿大些的尺寸覆写它。

@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

一个有趣的方式是使用视口单位vw来实现响应式排版。1vw等同于视口宽度的百分之一，即如果你用vw来设定字体大小的话，字体的大小将总是随视口的大小进行改变。

问题在于，当做上面的事情的时候，因为文本总是随着视口的大小改变大小，用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用 viewport 单位设定文本。

这里有一个解决方法，它使用了calc()，如果你将vw单位加到了使用固定大小（例如em或者rem）的值组，那么文本仍然是可放缩的。基本来说，是vw加在了放缩后的值上。

h1 {
  font-size: calc(1.5rem   3vw);
}

（6）视口元标签

如果你看看一张响应式页面的 HTML 源代码，你通常将会在文档的<head>看到下面的<meta>标签。

<meta name="viewport" content="width=device-width,initial-scale=1">

这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的 100%，在移动端以你所希望的为移动优化的大小展示文档。

你应该在你的文档头部总是包含上面那行 HTML！

和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的：

initial-scale：设定了页面的初始缩放，我们设定为 1
height：特别为视口设定一个高度
minimum-scale：设定最小缩放级别
maximum-scale：设定最大缩放级别
user-scalable：如果设为no的话阻止缩放

应该避免使用minimum-scale、maximum-scale，尤其是将user-scalable设为no。用户应该有权力尽可能大或小地进行缩放，阻止这种做法会引起访问性问题。

总结

只记录了 CSS 的部分内容

这篇好文章是转载于：学新通技术网

前端学习记录~2023.7.17~CSS杂记 Day9 浮动float 和amp; 定位position 和amp; 多列布局 和amp; 响应式设计

前言