前端开发总是要先看设计稿的🐶看完设计稿你要想好用什么CSS样式完成合适且灵活的布局——甚至不止一种布局方法。

布局的发展

面试官：CSS3新增了哪些新特性？

最开始靠HTML

  • table

    CSS1

  • 浮动（FLoat）

CSS2 没什么

CSS3

按时间顺序，有链接的是相关阅读。

不能不提的 Flexbox 和 Grid ，这两太好用了。

Flexbox

适用于一维布局。
给父元素设置

  1. .parent {
  2.   display: flex;
  3. }

此时子元素就都被设置为了flex item。这意味着你可以很方便地控制他们的主轴和交叉轴的对齐方式、展示顺序、收缩或舒展程度。

  1. .parent div {
  2.  flex-grow: 1;
  3.  flex-shrink: 0;
  4.  flex-basis: auto;
  5.   //或是直接
  6.   flex:1 0 auto;
  7. }

Grid

利用网格，方便地进行二维布局。

  1. .parent {
  2.   display: grid;
  3.   grid-template-columns: repeat(12, 1fr);
  4.   gap: 1rem;
  5. }

这里1fr就是空间的1/2，gap就是间隙宽度。
在单项中还能通过设置grid-row``gird-column，设置某一个块的始末位置，用/隔开。

  1. .parent :first-child {
  2.   grid-row: 1/3;
  3.   grid-column: 1/4;
  4. }

普通流布局

如果你没有使用上面的两种布局方法，文档中的元素则会处在正常布局流（normal flow）。

block

  • block 元素独占一行，多个 block各自新起一行
  • 元素宽度默认自动填满其父元素宽度。
  • 可以设置 width、height

  • 可以设置 margin、padding

    inline

  • 不会新起一行，多个相邻的行内元素会排列在同一行里——默认情况下，排不下话则会换行

  • 宽度随元素内容变化
  • width、height设置无效

  • 水平方向padding、margin有效；垂直方向无效

    inline-block

    将对象呈现为 inline 对象，但是对象内容作为 block 对象。

  • 内联对象会被排列在同一行内

  • 前后无换行符

  • margin、padding 都有效

    Float

    1. img {
    2. float: right;
    3. }

    设置 float 后会使得兄弟元素“环绕”它，也就可以实现报纸上的文字围绕图片的效果。
    注意：
    浮动元素后的任何元素都有可能改变布局，并且可能带来一些不想要的效果。此时可以设置清除浮动，
    这里写两个简短的方法：
    给浮动元素后面的元素设置**clear: both**

    1. img+p{
    2. clear: both;
    3. }

    给父元素设置**display: flow-root**

    1. .parent{
    2. display: flow-root;
    3. }

    更多方法在这里就不说了。

    多列布局

    如果你设置了一个非常长的列表，里面就会有很多个<li>。这会消耗掉用户的很多滚动空间，以及一侧大量的留白。而在ul或是ol设置多列布局就可以解决这个恼人的问题。

    1. .list{
    2. column-count: 3;
    3.   column-gap: 1em;
    4. }

    比如上面这样设置就会将所有li分为三列，并设置列间距为1em。
    也可以直接设置列宽

    1. .list{
    2. width: 100%;
    3.   column-width: 130px;
    4.   column-gap: 1em;
    5. }

    这样列数就会随着页面可用空间宽度而变化，越宽列数自然也就越多。又是一个响应式设计的妙招呢

    定位

    通过设置 position改变元素在正常流中的行为以及与其他元素的关系。

    相对定位（relative）

  • 元素一开始将出现在本该出现的位置

  • 通过设置垂直水平方向上的位移，该元素就会相对于一开始的起点进行移动
  • 不论如何，元素都会占据原来的空间

  • 移动元素会导致其可能覆盖掉其他元素。

    绝对定位（absolute）

  • 位置相对于最近的已经定位了的元素，如果没有那就是<html>

    • 常与相对定位配合使用：子绝父相
  • 元素位置与文档流无关，因此不占据空间

  • 可能覆盖掉其他元素

    固定定位（fixed）

  • 相对于浏览器窗口是固定位置，窗口滚动它也不会移动

    • 大概就是父元素锁定为 html 的绝对定位
  • 与文档流无关，不占据空间

  • 可能覆盖其他元素

    粘性定位（sticky）

  • 一开始先按照普通文档流定位

  • 然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位

  • 元素定位表现为跨越特定阈值前为相对定位，之后为固定定位

    • 一开始行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。

      默认定位 （static）

  • 出现在正常的流中

  • 忽略 top、bottom、left、righ、z-index 的设置。

    继承 （inherit）

    从父元素中继承 position 属性的值。

    none

    从文档流中消失