前端学习--CSS布局

学习文档介绍 CSS 布局 - 学习 Web 开发 | MDN

本学习笔记尚未补充完整。

CSS布局简介

Flexbox布局（弹性盒子 display: flex）

        弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的控件，收缩以适应更小的控件。（可跨浏览器兼容）弹性盒子使更多布局任务变得更加容易。

flex模型说明

• 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
• flex 容器（flex container）：设置了 display: flex 的父元素（在本例中是 <section>）。 ​
• flex 项（flex item）在 flex 容器中表现为弹性的盒子的元素 （本例中是 <article> 元素）。

• 指定元素的布局为flexible

  即指定该元素的子元素作为flex项，使用display：flex（块级）、display：inline-flex（行内元素） 

水平和垂直对齐

align-items 控制 flex 项在交叉轴上的位置。 

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

• 默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。
•   在上面规则中使用的 center 值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。
•   也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。

可以用 align-self 属性覆盖 align-items 的行为。

button:first-child {
  align-self: flex-end;
}

justify-content 控制 flex 项在主轴上的位置。

• 默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
• 你也可以用 flex-end 来让 flex 项到结尾处。
• center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
• 而我们上面用到的值 space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
• 还有一个值是 space-between，它和 space-around 非常相似，只是它不会在两端留下任何空间。

flex项排序

        改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。

button:first-child {
  order: 1;
}

效果“Smile”按钮移动到了主轴的末尾。

• 所有 flex 项默认的 order 值是 0。
• order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
• 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是 2，1，1 和 0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
• 第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。
• 可以给 order 设置负值使它们比值为 0 的元素排得更前面。

flex嵌套

         设置一个元素为 flex 项，那么他同样成为一个 flex 容器，它的孩子（直接子节点）也表现为弹性盒子。

section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button

定位（position: absolute / relative / fixed）

        定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。

文档流

        正常的布局流（在布局介绍文章中提到）是将元素放置在浏览器视口内的系统。默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。

        内联元素不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。

        如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠,

 定位种类

静态定位（position: static）

         静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置——这里没有什么特别的。

.positioned {
  position: static;
  background: yellow;
}

相对定位（position: relative）

        与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。

        使用属性 top、bottom、left、right来指定要将定位元素移动到的位置

.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}新位置位于原位置，下方30px，右方30px处

绝对定位（position: absolute）

        绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。

        即，该元素在文档流中的间隙不再存在，上下文会紧邻在一起。 

 .positioned {
  position: absolute;
  top: 30px;
  left: 30px;
}

 z-index

        解决元素重叠时的显示层，可以为负数，元素按照z-index数值从大到小，依次从顶层到地层堆叠。（例如  z-index: 1;  z-index: 2;）

固定定位（ position: fixed;）

        与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位将元素固定在相对于其位置最近的祖先。（如果没有，则为初始包含它的块）而固定定位固定元素则是相对于浏览器视口本身。可以创建固定的有用的 UI 项目，如持久导航菜单。

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}标题保持固定，内容显示向上滚动并消失在其下。目前标题下面挡住一些内容的开头。这是因为定位的标题不再出现在文档流中，所以其他内容向上移动到顶部。

p:nth-of-type(1) {
  margin-top: 60px;
}通过在第一段设置一些顶部边距来使标题不挡住内容的开头

position: sticky（用于滚动索引）

        允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

滚动索引

<h1>Sticky positioning</h1>

<dl>
  <dt>A</dt>
  <dd>Airplane</dd>
  <dt>B</dt>
  <dd>Bird</dd>
  <dt>C</dt>
  <dd>Calculator</dd>
</dl>

dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}
后面出现的<dt>会覆盖之前的<dt>

浮动

        float属性

Grid布局（网格）

响应式设计

媒体查询入门