Lou Chen

布局样式常见知识点扫盲

Lou.Chen
大约 13 分钟

CSS

1.flex弹性布局

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlopen in new window

1.1 什么是弹性布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局：

.box{
  display: inline-flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

1.2 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

image-20220616165529403

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴(或者辅轴)的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴(辅轴)空间叫做cross size。

1.3 容器的属性
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
1.3.1 flex-direction(主轴排列方向)

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
image-20220616165810798

它可能有4个值。

  • row（默认值）：主轴为水平方向，起点在左端。(位置:左上)
  • row-reverse：主轴为水平方向，起点在右端，即从右往左排(位置:右上)
  • column：主轴为垂直方向，起点在上沿。(位置:左上)
  • column-reverse：主轴为垂直方向，起点在下沿,即从下往上拍(位置:左上)
1.3.2 flex-wrap(换行策略)

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行?

image-20220616171232001
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

  • nowrap（默认）：始终不换行。⚠️ 若容器内的子元素宽度超过了容器的宽度，那么子元素会按照比例缩小宽度来适应父容器

  • wrap：换行，第一行在上方。

    image-20220616172253122

  • wrap-reverse：换行，第一行在下方。

image-20220616172306404
1.3.3 flex-flow(排列方向和换行策略组合)

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap 不换行，水平排列。

.box {
  flex-flow: row nowrap ; 
}
1.3.4 justify-content(主轴空白分布策略)

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
image-20220616173153128

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start（默认值）：左对齐 若不设置元素间距则元素之间没有间距
  • flex-end：右对齐 若不设置元素间距则元素之间没有间距
  • center： 居中 若不设置元素间距则元素之间没有间距
  • space-between：每个项目之间的间隔都相等。最左和最右无空白
  • space-around：每个项目之间间隔相等。最左和最右的空白间隔为项目之间间隔的1/2
  • space-evenly: 每个项目之间间隔相等。最左和最右的空白间隔和项目之间间隔的距离相同
1.3.5 align-items(辅轴元素对齐策略)

align-items属性定义项目在交叉轴上如何对齐。⚠️ 假设横轴为主轴，当父容器高度大于容器里面元素的高度时，就可以对元素在交叉轴的方向进行自定义

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
image-20220616192836453

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果容器内元素项目未设置高度或设为auto，将占满整个容器的高度。若容器内元素设置了高度，那么会沿着交叉轴的起点对齐
1.3.6 align-content(辅轴空白分布策略)

align-content属性定义了多根轴线(**多行元素)**的对齐方式。

⚠️ 一般html和body的高度并不是占满全屏，而是为里面元素撑起来的高度。若想要实现该属性效果，则需要设置容器高度超过元素高度或者超过内部所有元素换行之后的总高度

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
image-20220616195324218
  • flex-start（默认值）：上对齐 若不设置元素间距则元素之间没有间距
  • flex-end：下对齐 若不设置元素间距则元素之间没有间距
  • center： 居中 若不设置元素间距则元素之间没有间距
  • space-between：每个项目之间的间隔都相等。最上和最下无空白
  • space-around：每个项目之间间隔相等。最上和最下的空白间隔为项目之间间隔的1/2
  • space-evenly: 每个项目之间间隔相等。最上和最下的空白间隔和项目之间间隔的距离相同
1.4 容器元素属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
1.4.1 order(顺序优先级)

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 ⚠️ 可以为负数

image-20220616204237083
1.4.2 flex-grow(主轴伸展系数)

flex-grow属性定义项目(容器剩余空间)的放大比例，默认为0,不放大。

⚠️伸展系数不会改变高度

image-20220617101843525
  • 若一个元素的值为1（占容器剩余空间的100%），其它元素默认为0,那么该元素则会使用整个容器的剩余空间作为自己的宽度
  • 若一个元素的值为2，其它元素全部为1，那么为1对元素占用容器剩余空间的都比为2对元素占用容器剩余的空间少1/2
  • 若所有元素值都相同且不为0，那么所有元素都对容器剩余空间均等分
1.4.3 flex-shrink(主轴收缩系数)

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

⚠️ 收缩系数对高度无效

.item {
  flex-shrink: <number>; /* default 1 */
}
image-20220617104340131

  • 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

  • 如果一个项目的flex-shrink属性为0，则不会收缩。

  • 负值对该属性无效。

1.4.4 flex-basis(占据主轴基础宽度)

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}
  • 如果主轴是横向的，则该值指定的就是元素的宽度，则width设置的值无效。
  • 如果主轴是纵向的，则该值指定的就是元素的高度，则height设置的值无效。
  • 默认值是auto,表示参考元素自身的高度或宽度
  • 如果传递的是一个具体的数值，则以该值为准 例如：flex-basis: 200px;
1.4.5 flex(伸展收缩基础宽度组合)

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

  • initial ( 0 1 auto)
  • auto (1 1 atuo)
  • none (0 0 auto)
1.4.6 align-self(自身辅轴对齐策略)

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
image-20220617105733385

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

2.html/body默认高度

html元素和body元素均为块级元素

  • 未设置<!DOCTYPE html>当前文档类型，默认启用兼容模式，兼容模式下的html、body元素的高度即为窗口的高度，

  • 设置了<!DOCTYPE html> 启用标准模式，而标准模式下的html、body元素的高度均为0。

示例：

<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <title>demo</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            height: 30%;
            border: red 1px solid;
        }
    </style>
</head>
<body>
<!--标准模式：高度占比无效
    非标准模式：占整body个的30%-->
<div class="container"></div>
</body>
</html>

3.vh、vw单位

  • vw： 视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
  • vh： 视窗高度的百分比（ 1vh 代表视窗的高度为 1%）
  • vmin：当前 vw 和 vh 中较小的一个值
  • vmax：当前 vw 和 vh 中较大的一个值

vw、vh与 % 的区别：

  • % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
  • vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

4.浮动

浮动可以设置一个元素向其父元素的左侧或者右侧移动。块级元素和行内元素都可以设置浮动

float有以下取值：

  • none(默认) 不浮动
  • left 向左浮动
  • right 向右移动

**浮动元素的特点：**元素设置浮动以后，会脱离文档流，即不会占据文档的位置，所以还在文档流中的元素会自动向上移动

  • 浮动元素默认不会从父元素中移出
  • 浮动元素向左或者向右移动时，不会超过它前边的其他浮动元素
  • 浮动元素不会超过它上边的浮动的兄弟元素，最多就和它一样高
  • 浮动元素不会盖住文字(行内标签若没有设置浮动，则永远会在浮动元素的后面)

脱离文档流的特点：

  • 块元素：
    • 块元素不会独占一行
    • 块元素的高度和宽度默认被内容撑开
  • 行内元素：
    • 行内元素脱离文档流后变成块元素，特点和块元素一样

所以，脱离文档流后，不需要再区分块和行内了

5.定位

position 属性指定了元素的定位类型。

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

定位元素：即当前自身元素

定位位置：自身元素偏移 前的上一个位置

偏移量offset：

  • top 定位元素和定位位置上边的距离
  • bottom 定位元素和定位元素下边的位置
  • left 定位元素和定位元素左边的位置
  • right 定位元素和定位元素右边的位置

⚠️ 注意：若同一个偏移属性设置多次，则只会取最后一次设置的值，即一般一次性设置完毕

5.1 relative相对定位

相对定位特点：

  • 元素开启相对定位后，如果不设置偏移量元素不会发生任何变化
  • 相对定位是参照于元素在文档流中的位置进行定位的
  • 相对定位会提升元素的层级
  • 相对定位不会使元素脱离文档流(即还是会占用元素的原来位置)，并且会覆盖在移动后的元素之上。
    • 若有多个相对定位元素，并且偏移的位置相同，那么会后声明的元素会覆盖在先声明的元素之上
  • 相对定位不会改变元素的性质。块还是块，行内还是行内
5.2 absolute绝对定位

绝对定位特点：

  • 开启绝对定位后，如果不设置偏移量元素的位置，则不会发生变化
  • 开启绝对定位后，元素会从文档流中脱离，会覆盖在该元素之下的元素。并且还在文档流中的元素会自动向上移动。
    • 若有多个决对定位元素，并且偏移的位置相同，那么会后声明的元素会覆盖在先声明的元素之上
  • 绝对定位会改变元素的性质，行内变成块，块的宽高被撑开
  • 绝对定位会提升一个层级
  • 绝对定位的相对位置是其为有相对定位relative的父级块元素
    • 若块级父级元素没有开启相对定位，则会一层层向外查找是否有开启相对定位块级父元素,若没有找到则会使用根元素（body）作为绝对位置
5.3 fiex固定定位

固定定位特点：

  • 固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样
  • 固定定位永远会参照与浏览器的视口(可视窗口)进行定位，也不会参照任何父元素。即不会随着浏览器的滚动条进行滚动。永远以浏览器的视角固定。
5.4 sticky粘滞定位

粘滞定位特点：

  • position: sticky; 基于用户的滚动位置来定位。

    粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

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

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

    这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

例如：

position: sticky;

top:0;

设置top为0时，元素自身不会移动，而是有下拉滚动条时，向下拉动，元素距离上边为0的时候，会固定不动

5.5 static静态定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。