CSS布局和定位

隋鑫
342 阅读5分钟

布局是什么：

把页面分成一块一块，按左中右，上中下等排列。

布局分类:

  • 固定宽度布局，例如淘宝网， 一般宽度960/1000/1024px。
  • 不固定宽度布局，例如手机端，主要靠文档流原理布局。 文档流本身就是自适应的，不需要额外添加样式。
  • 响应式布局，pc上固定宽度，手机上不固定宽度，是一种混合布局。

布局思路：

  • 从大到小:先定大局，再完善每个小布局。
  • 从小到大:先完成小布局，再组合成大布局，推荐新手。

三种布局套路：

  • float布局：

    1. 子元素上加float：left和width。
    2. 在父元素上加.clearfix。

    例如：

    Notes：

    • 有时最后一个元素不加width，留些空间，可加上最大宽度max-width：100px；若加上width会出现下图情况:

    • 不需要做响应式，float布局专为IE准备。

    • 解决IE6/7存在双倍margin的bug，

      1. 针对IE6/7，把margin减半，如下图，则IE上显示5px乘2，正常浏览器上显示10px：
      2. 加一个display：inline-block；

    • 若图片下有多余的东西： 添加 vertical-align: top; 或者vertical-align: middle;

    • 有时border调试会干扰width，可用outline调试。

    • 如果有块级元素且width固定，则左右margin的auto可让元素自动居中。

    • 关于平均布局，计算出x，y的值，必要时中间加一层div，用到负margin，值为y的值。

  • flex布局：

    flex container（容器）样式：一般作父元素

    • 让一个元素变成flex容器：

    1. justify-content属性：将flex元素与主轴对齐。

      • flex-start: 元素和容器的左端对齐
      • flex-end: 元素和容器的右端对齐
      • center: 元素在容器里居中
      • space-between:元素之间保持相等的距离
      • space-around:元素周围保持相等的距离

    2. align-items属性：在交叉轴上对齐多个元素。

      • flex-start: 元素与容器的顶部对齐
      • flex-end: 元素与容器的底部对齐。
      • center: 元素纵向居中
      • baseline: 元素在容器的基线位置显示
      • stretch: 元素被拉伸以填满整个容器

    3. flex-direction属性:决定主轴的方向。

      • row: 元素摆放的方向和文字方向一致
      • row-reverse: 元素摆放的方向和文字方向相反
      • column: 元素从上放到下
      • column-reverse: 元素从下放到上

    4. flex-wrap属性：定义元素必须在一行，或者自动换行。

      • nowrap: 所有的元素都在一行
      • wrap: 元素自动换成多行
      • wrap-reverse: 元素自动换成逆序的多行

    5. flex-flow属性： flex-flow属性包括flex-direction和flex-wrap两个属性，这个缩写属性接受两个属性的值，两个值中间以空格隔开。

      例如：flex-flow: row wrap;设置行并自动换行。

    6. align-content属性：决定行与行之间的间隔，而align-items决定元素整体在容器的什么位置。

      • flex-start: 多行都集中在顶部。
      • flex-end: 多行都集中在底部。
      • center: 多行居中。
      • space-between: 行与行之间保持相等距离。
      • space-around: 每行的周围保持相等距离。
      • stretch: 每一行都被拉伸以填满容器。

    flex items（项目）样式：一般作子元素

  1. order属性:决定flex元素的顺序，元素的属性默认值为0，还可设置属性为正数或负数。

  2. flex-grow属性：决定flex元素的拉伸程度，元素的属性默认值为0，还可设置属性为正数。

  3. flex-shrink属性：决定了 flex 元素的收缩程度，flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink的值，属性默认值为0，还可设置属性为正数。

  4. flex-basis属性：决定了flex元素的基准宽度，如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸，属性默认值为auto。

  5. flex-grow、flex-shrink和flex-basis属性可以缩写，例如:

       flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 100px;

    可以写成：

       flex： 1 0 100px;

  6. align-self属性：在交叉轴上对齐一个元素，其值和align-items相同，但会覆盖align-items属性值。

推荐一款flex青蛙游戏，轻松愉快学习flex布局，以上flex元素属性解释也参考此游戏，详细可访问https://flexboxfroggy.com/#zh-cn。

  • grid布局：功能最强大的布局方案，但目前兼容性还不好。也分container和items样式，使用 grid-template-rows 和 grid-template-columns 属性来定义网格的 columns 和rows，也可使用grid-column-start, grid-column-end, grid-row-start和 grid-row-end属性定位网格线。 例如：
.container {
           display: grid;
           grid-template-columns: 1fr 1fr 1fr;
           grid-template-rows: 100px 100px;
         }
.items{
     grid-column-start: 1;
     grid-column-end: 2;
     grid-row-start: 1;
     grid-row-end: 2;
 }

grid尤其适合不规则的布局。

CSS定位：

  • position

    • static：默认值，待在文档流里

    • relative：相对定位，未脱离文档流，可在不改变页面布局的前提下调整元素位置。

      1. 现在已经很少用作位移，常用作absolute父元素。
      2. 配合z-index：默认值auto，不创建新层叠上下文，还可取正负数。

    • absolute：绝对定位，相对于祖先元素中最近的一个定位元素定位的，定位基准是祖先非static的定位元素。

      1. 脱离原来位置，另起一层，如对话框关闭按钮或鼠标提示。
      2. 配合z-index。
      3. 和relative父元素配合使用。

    Notes：

      1.white-space:nowrap;文字内容不准换行。
  2.善用left：100%。
  3.善用left：50%；加负margin。
  4.有些浏览器不写top/left会位置错乱。

    • fixed：固定定位，定位基准是viewport，手机上尽量不要用这个属性（坑）。

      1. 用于烦人的广告或者回到顶部按钮。

      2. 配合z-index。

    • sticky：沾滞定位，适合导航，目前兼容性很差。

avatar
文章
阅读
粉丝