面试CSS布局面经

最新推荐文章于 2024-04-11 16:30:18 发布

Peace_day

最新推荐文章于 2024-04-11 16:30:18 发布

阅读量444

点赞数 1

文章标签：定位 html css html5 css3

本文链接：https://blog.csdn.net/qq_31674679/article/details/114383116

版权

1 display

display 是 CSS 布局中很重要的一个属性，它定义了元素生成的显示框类型，常见的几个属性值有：block、inline、inline-block、inherit、none、flex。inherit 表示这个元素从父元素继承 display 属性值；none 表示这个元素不显示，也不占用空间位置；flex 是 flex 布局重要的属性设置，我们留到后面详细讲解，这边先介绍前面三个属性值。

每个元素都有默认的 display 属性，比如 div 标签的默认 display 属性是 block，我们通常称这类元素为块级元素；span 标签的默认 display 属性是 inline，我们通常称这类元素为行内元素。

块级元素总是独占一行，从上到下显示，行内元素则是从左到右显示。这是因为块级元素前后有换行符，而行内元素前后没有换行符。

block 块级元素：

没有设置宽度时，它的宽度是其容器的 100%；
可以给块级元素设置宽高、内边距、外边距等盒模型属性；
块级元素可以包含块级元素和行内元素；
常见的块级元素有：div h1~h6 p ul ol dl table address form 等。

inline 行内元素：

行内元素不会独占一行，只会占领自身宽高所需要的空间；
给行内元素设置宽高不会起作用，margin 值只对左右起作用，padding 值也只对左右起作用；
行内元素一般不可以包含块级元素，只能包含行内元素和文本；
常见的行内元素有 a b label span img em strong i input 等。

inline-block 行内块元素：

和相邻行内元素在同一行，但是之间会有空白缝隙。
默认宽度是他本身内容的宽度。
宽度、高度、行高、外边距以及内边距都可以手动设置。

给 img 标签设置宽高是可以影响图片大小的，这是因为 img 是可替代元素，可替代元素具有内在的尺寸，所以宽高可以设定。HTML 中的 input、button、textarea、select 都是可替代元素，这些元素即使是空的，浏览器也会根据其标签和属性来决定显示的内容。

给行内元素设置宽高不起作用，我们通过上面的代码已经感受到了，那为什么设置 margin、padding 只有左右起作用呢？我们来看下面的列子。

<div>div 1</div>
<span>span 1</span>
<span>span 2</span>
<div>div 2</div>
div {
    width: 100px;
    height: 100px;
    text-align: center;
    background-color: #94E8FF;
}
span {
    background-color: #FFB5BF; 
    padding: 10px;
    margin: 10px;
}

运行效果如下：

（在 span 标签前后添加 div 标签在浏览器中的运行结果）

在上图中可以明显看到 span 1 只添加了 margin-left 和 margin-right，但 margin-top、margin-bottom 均不起作用。虽然上下的 padding 看上去都起作用了，但是通过添加 div 标签，我们可以看到有重合的部分，所以 padding-top、padding-bottom 的设置从显示效果上是增加的，但对周围元素不会产生影响。

inline-block

结合了inline和block的特征，不仅可以设置宽度和高度，也可以拥有inline的不换行的特性。

但是：换行显示或空格分隔的情况下元素间会有间距。

div 之间会有空隙，这是因为浏览器会将 HTML 中的换行符、制表符、空白符合并成空白符，关于消除中间空隙的办法。font-size=0

<div class="space">
    <a href="##">惆怅</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

<style>
    .space {
    font-size: 0;
}
    .space a {
    font-size: 12px;
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}
</style>

另一种消除间隙的方法：闭合标签

在HTML5中，我们直接：
<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血
</div>

方式三：直接消除空格

2 position

视频介绍 https://www.bilibili.com/video/BV1FK4y1J7KQ?from=search&seid=2157100894469560233

在布局中很重要的因素就是定位，position 属性就是用来定义元素的定位机制。position 的常用属性值有：

static：默认值，没有定位属性，元素正常出现在文档流中；
relative：相对定位，相对于元素的正常位置进行定位；
absolute：绝对定位，相对于除 static 定位以外的元素进行定位，脱离文档流
fixed：固定定位，相对于浏览器窗口进行定位，网站中的固定 header 和 footer 就是用固定定位来实现的；脱离文档流
inherit：继承父元素的 position 属性值。
sticky：粘性布局

上文出现了文档流（normal flow）的概念，按理来说应该翻译成普通流，文档流是大多数人的叫法。“流”可以想象成流动的水，当我们打开屏幕，浏览网页，滚动鼠标，网页的内容就像是水流一样滑过。文档流便是指从上到下，从左往右的文档布局。当我们给元素的 positon 属性设置 absolute、fixed 时便会脱离文档流，不再遵循从上到下，从左到右的规律了。

static

默认值。
特点：设置了该属性后，top left right bottom将不起作用。

relative

设置该属性后，还是会占据文档流

<div class="common box_1">box 1</div>
<div class="common box_2">box 2</div>
<div class="common box_3">box 3</div>
.common {
    width: 100px;
    height: 100px;
    text-align: center;
}
.box_1 {
    position: relative;
    background-color: #FFB5BF;
}
.box_2 {
    position: relative;
    background-color: #94E8FF;
    left: 10px;
    top: 10px;
}
.box_3 {
    background-color: #8990D5;
}

（position 为 relative 示例）

从上图中我们不难发现，设置 position 为 relative，但是不添加额外属性（left，right，top，bottom 等），它表现的如同 static 一样，如 .box_1。属性 left，right，top，bottom 会使元素偏离正常位置，如 .box_2。元素的偏移会覆盖相邻元素，如 .box_3。

absolute 示例

相对于上级设置了relative absolute 的元素定位，如果上级没有设置就一直往上找到满足的为止。
如果没有设置，则相对整个页面进行定位。
特点：脱离文档流

<div class="relative">
    relative
    <div class="absolute">absolute</div>
</div>
.relative {
    width: 200px;
    height: 200px;
    border: 2px solid #FFB5BF;
    position: relative;
}
.absolute {
    width: 100px;
    height: 100px;
    border: 2px solid #94E8FF;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

（position 为 absolute 示例）

absolute 会相对于最近的除 static 定位以外的元素进行定位，在使用时要注意设置父元素（或祖先元素）的 position 属性，若父元素（或祖先元素）都没有设置定位属性，absolute 会找到最上层即浏览器窗口，相对于它进行定位了。

fixed 示例

fixed 是相对于浏览器窗口的定位， 一旦位置确定，元素位置也不会改变，不像 absolute，它的位置与父元素息息相关，父元素移动它也会跟着动。从上图我们可以看出，fixed 元素是脱离文档流的，之后的元素会“无视”它，不会给它腾出空间。

特点：会导致元素的位置不随页面滚动而变化
脱离文档流

sticky 示例

粘性定位，可以说它是relativd和fixed的结合体，如：页面滚动的后，让xxx固定在页面的顶部
特点：必须结合top等属性

3float

float 属性定义元素在哪个方向浮动，常用属性值有 left、right，即向左浮动和向右浮动。设置了 float 的元素，会脱离文档流，然后向左或向右移动，直到碰到父容器的边界或者碰到另一个浮动元素。块级元素会忽略 float 元素，文本和行内元素却会环绕它，所以 float 最开始是用来实现文字环绕效果的。

<div class="container">
    <div class="box_1">box 1</div>
    <div class="box_2">The young applicant is described as confident and courageous. His résumé, at 15 pages, is glittering, ...</div>
</div>
.container {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
}
.box_1 {
    width: 100px;
    height: 100px;
    text-align: center;
    background-color: #FFB5BF;
    float: left;
}

（文字环绕效果）

当不给父元素设置宽高时，父元素的宽高会被子元素的内容撑开。但是当子元素设置浮动属性后，子元素会溢出到父元素外，父元素的宽高也不会被撑开了，称之为“高度塌陷”，我们通过代码来体验一下这个差异。

<div class="container">
    <div class="box_1 float">box 1</div>
    <div class="box_2 float">box 2</div>
</div>
.container {
    border: 3px solid #8990D5;
}
.box_1 {
    height: 100px;
    width: 100px;
    text-align: center;
    background-color: #FFB5BF;
}
.box_2 {
    height: 100px;
    width: 100px;
    text-align: center;
    background-color: #94E8FF;
}
.float {
    float: left;
}

（浮动的子元素不能撑开父元素）

如何解决这个问题呢？解决这个问题便是要清除浮动，在下面我们给出了几种常规解决方案。

清除浮动4种方式

通过添加额外的标签，利用 clear 属性来清除浮动

clear 属性用来定义哪一侧不允许其他元素浮动，常见的值有 left 、right、both，分别表示左侧不允许浮动元素、右侧不允许浮动元素、左右两侧均不允许浮动元素。

<div class="container">
    <div class="box_1 float">box 1</div>
    <div class="box_2 float">box 2</div>
    <div class="clear"></div>
</div>
.clear {
    clear: both;
}

（使用 clear: both 后把父元素撑开了）

使用 br 标签

br 自带 clear 属性，clear 属性有 left、right 和 all 三个属性值可选。

<div class="container">
    <div class="box_1 float">box 1</div>
    <div class="box_2 float">box 2</div>
    <br clear="all"></br>
</div>

该方法同上一个方法添加空标签一样，也达到了清除浮动的目的，同上一个方法相比，语义化明显些了，但是也存在结构样式行为分离的问题，不推荐使用。

给父元素设置 overflow

<div class="container overflow">
    <div class="box_1 float">box 1</div>
    <div class="box_2 float">box 2</div>
</div>
.overflow {
    overflow: hidden;
    zoom: 1;   /* 兼容 IE6、IE7*/
}

添加 overflow 不仅减少了代码量，还不存在语义化的问题，但是也可能因为内容增加导致超出尺寸的内容被隐藏。前面两个方法带有 clear 关键字，很好理解，但是仅仅设置 overflow: hidden; 为什么就能清除浮动呢？

这里要引入一个概念：BFC（Block Formatting Context），块级格式化上下文。BFC 的一个特性便是可以包含浮动元素，设置 overflow 为 hidden 满足了创建一个 BFC 的条件，利用BFC的规则去渲染页面：浮动的元素也参与运算。
4. 使用 after 伪元素

<div class="container clearfix">
    <div class="box_1 float">box 1</div>
    <div class="box_2 float">box 2</div>
</div>
.clearfix::after {
    content: '';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
.container {
    border: 3px solid #ccc;
    zoom: 1;   /* 兼容 IE6、IE7 */
}

该方法本质也是在末尾添加一个看不见的块元素来清除浮动。这个方法也不存在语义化的问题，是目前的主流清除浮动的方法。

4 两列布局

视频网站：https://www.bilibili.com/video/BV1EA411j7fE?from=search&seid=12163375982364841004

左列定宽，右列自适应

先给出基础部分的代码：

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    height: 150px;
    background-color: #94E8FF;
}

设置 display 为 inline-block

inline-block 兼具块级元素可以设置宽高和行内元素不独占一行的特性，设置了 inline-block 的两个 div 之间会有间距，记得消除。由于左边是固定的，总的宽度是 100%，要计算右边的宽度，可以使用 calc 来计算。

.container {
    font-size: 0;    /* 消除间距 */
}
.left, .right {
    display: inline-block;
}
.right {
    width: calc(100% - 100px);   /* 计算宽度，运算符号左右一定要有空格 */
}

使用 float

float 变化多端，下面给出三种利用浮动的特性来达到上图两栏布局的方法。

我们知道，处于文档流中的块级元素无法感知到浮动元素的存在，如果设置 .left 为左浮动，.right 会当 .left 不存在，由于块级元素的默认宽度是父级元素的 100%，此时 .right 的宽度就已经是 100% 了，无需再计算。别忘了设置 .right 的 margin 值来给 .left 预留空间，让两者看起来是和谐相处的。这便是第一种方法，代码如下：

.left {
    float: left;
}
.right {
    margin-left: 100px;   /* 为 .left 留出空间 */
}
.container {
    overflow: hidden;    /* 别忘了清除浮动 */
}

浮动元素会脱离文档流，直到它碰到父元素的边框或另一浮动元素为止，因此，我们可以还设置 .left、.right 均左浮动，这时，它们便会紧贴着排列在一行。因为 .right 是浮动的，所以需要计算宽度。这是第二种方法：

.left {
    float: left;
}
.right {
    float: left;
    width: calc(100% - 100px);
}
.container {
    overflow: hidden;
}

.left 浮动的时候，.right 会无视 .left，有没有不无视，留出位置的可能？有的，让 .right 形成 BFC，.right 就不会和 .left 重合了。BFC 不会忽视浮动元素，这也是它的特点之一。这是第三种方法：

.left {
    float: left;
}
.right {
    overflow: auto;    /* 形成 BFC */
}
.container {
    overflow: hidden;
}

使用 absolute

设置 .left 的 position 为 absolute，.left 脱离了文档流，.right 会无视 .left 的存在。

.container {
    position: relative;
}
.left {
    position: absolute;
}
.right {
    margin-left: 100px;
}

使用 flex

.container {
    position:flex;
}
.left {
   width:300px
}
.right {
    flex:1；
}

使用 table

.container {
   width:100%;
   display:table;
}
.left {
   width:300px
   display:table-cell;
}
.right {
    flex:1；
    display:table-cell;
}

左列不定款，右列自适应

1.flex
2.浮动+bfc
与上述一致，只需要去点width 就可以了。

5三列布局

圣杯布局

首先将布局的基础框架搭出来，在下面代码中，父 div 包含了三个子 div，我们将 .center 写在最前面，方便最先渲染。为了保证窗口缩小时仍然能展示，我们给 body 设置了最小宽度。

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
body {
    min-width: 630px;
}
.center {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
}

刷新浏览器，效果如下：

（基本框架效果图）

不出所料，三个子 div 各占一行显示了，此时我们给三者都加上左浮动看看效果。

.container {
    overflow: hidden;   /* 清除浮动 */
}
.center, .left, .right {
    float: left;
}

（设置了左浮动后的效果）

由于 .center 设置了 100% 的宽度，所以 .left 和 .right 都被挤到下面去了，此时我们要解决的问题就是，如何让它两上去，这就要用到 margin 的负值了。我们知道 margin-left: 10px; 是设置 10px 的左外边距，左边要多空出一点，视觉效果上就是向右移动了 10px，那如果 margin-left: -10px; 呢？左外间距要减少 10px，自然是向左移动 10px 了。

我们回到要解决的问题中，因为 .center 的宽度是 100%，所以 .left 和 .right 排在了第二行，可以理解为排在了 .center 的后面。这个时候，.left 要回到 .center 的最左边，便是要向左移动 .center 的宽度，即 100%，.left 移动了之后，.right 会自动补上 .left 的空位，此时，.right 想要达到 .center 的最右边，只需要向左移动它自己本身的宽度就可以了，即 200px。

.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}

（通过使用 margin-left 让左右两边元素上移）

这个时候貌似是实现了圣杯布局，仔细一看发现，.center 的文字被遮挡了，此时 .left、.right 都覆盖在 .center 的上面，我们要给两者留出位置。

圣杯布局的做法是先设置父元素 .container 的 padding 属性，给 .left、.right 留出空间，两者需要的空间大小便是两者的宽度，然后利用定位属性使其归位。我们先设置 padding 看看效果。

.container {
    padding-left: 100px;
    padding-right: 200px;
}

（父元素设置 padding 给左右两边的元素留空间）

由于父元素设置了 padding，所有子元素都往中间挤了，此时只需将 .left、.right 分别向左向右拉到准备的空位就好了。首先将定位属性设置为 relative，即相对自己定位，.left 要向左移动 100px，.right 要向右移动 200px，所以 .left 只要设置 left: -100px; 、.right 设置 right: -200px; 便能达到效果。

.left {
    position: relative;
    left: -100px;
}
.right {
    position: relative;
    right: -200px;
}

（使用相对定位让左右两边元素归位）

到这里，圣杯布局便完成了，它的核心思想是使用浮动布局，用 padding 为左右元素留空间，灵活使用 margin 的负值和相对定位让元素移动到相应的位置。完整的代码如下：

<div class="container">
     <div class="center">center</div>
     <div class="left">left</div>
     <div class="right">right</div>
</div>
body {
    min-width: 630px;
}
.container {
    overflow: hidden;
    padding-left: 100px;
    padding-right: 200px;
}
.center {
    width: 100%;
    height: 150px;
    background-color: #94E8FF;
    float: left;
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}

双飞翼布局

双飞翼布局与圣杯布局的前部分一样，在给左右两边元素留出位置的思路有区别。圣杯布局是设置了父元素的 padding 留出空间，之后利用 relative 来归位。双飞翼则是多加了一个 div，将中间自适应部分包裹起来，利用子 div 的 margin 来给左右元素留空间。

<div class="container">
    <div class="center-container">
        <div class="center">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">left</div>
<div>
body {
    min-width: 630px;
}
.container {
    overflow: hidden;
}
.center-container {
    width: 100%;
    float: left;
}
.center-container .center {
    height: 150px;
    background-color: #94E8FF;

    margin-left: 100px;        /* 新添加的属性 */
    margin-right: 200px;       /* 新添加的属性 */
}
.left {
    width: 100px;
    height: 150px;
    background-color: #FFB5BF;
    float: left;
    margin-left: -100%;
}
.right {
    width: 200px;
    height: 150px;
    background-color: #8990D5;
    float: left;
    margin-left: -200px;
}

（双飞翼布局效果图同圣杯布局完全一致）

同样的问题，双飞翼布局通过多加一个 div 并使用了 margin 来实现，圣杯布局则是使用 padding、相对定位（relative）、设置偏移量（left、right）来实现，相对来说，双飞翼布局更容易理解。在圣杯布局中，无限缩小屏幕（假设没有设置 body 的最小宽度），当 .main 的宽度小于 .left 时，会出现布局错乱。

6. 什么是BFC？

BFC全称为Block Formatting Context，即“块级格式化上下文”，它是页面中相对独立的一块渲染区域，它决定了内部的子元素如何进行摆放和定位，以及区域内部元素和区域外部元素之间的相互作用关系。

BFC有什么特点？

当一个元素容器创建BFC后，主要有以下表现特点：

BFC可以包含浮动元素（闭合浮动）
BFC所确定的区域不会与外部浮动元素发生重叠
位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠
位于不同BFC下的相邻元素之间不会发生margin重叠

将以上特点一言以蔽之，即BFC在页面上是一个封闭的区域，如同“结界”一般。即便是内部的浮动元素也无法脱离该区域。该区域内部的子元素无法影响区域外部，同时也不受外部影响。

7 em rem

https://www.bilibili.com/video/BV1P7411C7EP?from=search&seid=16700059505082448227

8 gird布局

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

容器属性：
display:

grid-template-columns 属性，
grid-template-rows 属性
repeat 、fr 关键字、auto 关键字
grid-row-gap 属性，
grid-column-gap 属性，
grid-gap 属性
grid-template-areas 属性配合grid-area一起使用

https://wow.techbrood.com/fiddle/12089
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';

项目属性

grid-column-start 属性
grid-column-end 属性
grid-row-start 属性
grid-row-end 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

grid-column 属性
grid-row 属性

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

9响应式布局

https://juejin.cn/post/6844903814332432397#heading-15

10 flex和grid布局的区别

https://zhuanlan.zhihu.com/p/58285102
Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局（基于一维），即使他们的大小是未知或者是动态的。（这里我们称为Flex）。

Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。

最重要的是，Flexbox布局方向不可预知，他不像常规的布局（块就是从上到下，内联就从左到右）。而那些常规的适合页面布局，但对于支持大型或者杂的应用程序（特别是当他涉及到取向改变、缩放、拉伸和收缩等）就缺乏灵活性.

CSS Grid布局（又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。如我们所知，CSS 总是用于网页的样式设置，但它并没有起到很好的作用。刚开始的时候我们使用表格(table)，然后使用浮动(float)、定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。虽然Flexbox可以起到一定的补救作用，但是它只可以实现简单的一维布局，并不适用于复杂的二维布局(实际上 Flexbox 和 Grid 可以一起结合使用起到最佳效果)。网格是 CSS 第一次专门创建的模块，用来解决我们之前在制作网站时使用hacks处理布局问题。

网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。

此外，没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性，可以控制网格布局容器和他们的子元素，使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。

Peace_day

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
面试CSS布局面经

文章目录displayblock 块级元素：inline 行内元素：inline-blockpositionstaticrelativeabsolute 示例fixed 示例sticky 示例float清除浮动4种方式两列布局左列定宽，右列自适应左列不定款，右列自适应三列布局圣杯布局双飞翼布局1. 什么是BFC？2. BFC有什么特点？displaydisplay 是 CSS 布局中很重要的一个属性，它定义了元素生成的显示框类型，常见的几个属性值有：block、inline、inline-block、i
复制链接

扫一扫