前言

最近在刷一些面试题以及看了一些大佬们面试总结，碰到了不少有关前端页面布局的标题，就深化学习和整理了一波。

1. 介绍

前端页面布局是咱们在前端开发中比较前端重要的一环，开源代码网站github这直接影响着前端仓鼠寿数页面的结构样式。而页面和陈涉世家翻译及原文布局是一名前端程序员的必修课，当然这也前端和后端哪个薪酬高不是一蹴即至的，需求经过不断操练、重复地调试才干娴熟掌握，因而咱们就需求了解前端页面布局的一些规矩阅览器访问过于频频不能用和办法，如此以往，方能如虎添翼。

2. 页面布局规矩

这儿介绍前端页面布面试问题局的一些规矩：

  • 盒模型核算；

  • 内联元素与块状元素布局规长沙市气候则；

  • 文档流布局；

  • 元素堆叠。

下面让咱们逐个走近这些美化页面的小技巧

2.1 盒模型开源矿工核算

1. 概念

css定义的悉数元素都能够具有像盒子相同的外形和平面空间，它是css布局的柱石，它规矩了网页元素怎样闪现以及元素间相互关系。

2. 组成

聊聊前端页面布局那些事
盒面试问题大全及答案大全模型首要用来描绘元素所占空间的内容，它由四个部分组成：开源

  • 外边框距离margin（橙色部分）

  • 边框距离border（黄色部分面试技巧）

  • 内边距距离p面试毛遂自荐一分钟adding（绿色部分）

  • 内容距离content（蓝色部分）

3. 运用作用

盒模型会产生margin外边距叠加，叠加后的值会以最大边距为准。比方，咱们给两个相邻的<div>元素分别设置了不同的margin外边距：

<style>
.box-mode面试毛遂自荐3分钟通用l-sample {
margin: 20px;面试技巧
padding: 20px;
bo阅览器历史上的痕迹在哪里rder: solid 2px #000;
}
.large-margin {
margin: 30px;
}面试毛遂自荐3分钟通用
</style阅览器的历史>长沙市气候
<div class="box-model-sample">这是一个div</div>
<div class="box-model-sample">这是另一个div</div>
<div class="box-model-sample large-margin"&g前端工程师t;这是一个margin大一点的div</div>

工作作用如下，两个<div>元素之间产生了margin外边距叠加，它们被合并成单个边距。

聊聊前端页面布局那些事
假设两个元素的外边距不相同，叠加的值大小是各个边距中的最大值,下图运用的是第三个边框的外边距值30px。
聊聊前端页面布局那些事
关于盒模型的核算，咱们能够经过box-sizing特征进行阅览器怎样检查历史阅览记载设置盒模型的核算办法，正常的盒模型默许值是content-box,关于默许的盒模型,其核算宽高的办法是：content + padding + border

<s开源我国tyle>
.box-model-sample {
height: 50px;
margin: 10px;
padding: 5px;
border前端和后端的区别: solid 2px #000;
}
.border-box {
box-sizing: border-box;
}
</style>
&l面试常见问题及答复技巧t;div cl长沙国际之窗ass="box-model-sample">这是一个div(content-box)&l面试问题大全及答案大全t;/div>
<div class="box-model-sample border-box">这是另一个div开源节流是什么意思是什么(border-box)</div>

那么该作用图的宽高陈思思应该是50 + 5 * 2 + 2 *阅览器访问过于频频不能用 2 = 64px

聊聊前端页面布局那些事
但当咱们设置了面试毛遂自荐3分钟通用border-box之后，元素所占的总宽高为设置的元素阅览器看过的视频在哪里宽高,因而，另一个div的高度为50px

聊聊前端页面布局那些事

2.2 内联元素与块状元素

2.1 概念

  • 内联元素叫阅览器历史记载设置法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。内联元素的闪现，能够形象的称为“文本形式”，即一个挨着一个，都在同一行按从左至右的次序闪现，不单独占一行。阅览器怎样检查历史阅览记载而当加入了css控制往后，块元素和内联元素的这种特征差异就不成为差异了。
  • 块级元素，一般都是从头行初步，它能够包容行级元素和其他块元素，常见块级元素比方div/p等。form这个快元素比较特别,他只能来包容其前端训练组织他块元素

2.2 两者的区别

内联元素 块级元素
相邻的行内元素会摆放在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而改动 独占一行,默许情况下，其宽度主动填满长沙市气候其父元素面试问题宽度开源众包
行内开源节流元素设置width，he前端开发ight特征无开源是什么意思效 能够设置width长沙国际之窗，height特征
行内元素起边距作用的只需margin-left、margin-right、pad长生十万年ding-left、padding-right，其它特征不会起边距作用。 能够设置margin和padding特征
对应于display:inlin仓鼠寿数e； 对应于display:block

具体可看1
具体可看2

2.3 文档流和元素定位

1. 概念

文档流就是在阅览器中的规矩，将窗体自上而下 分成一行一行，并在每行中依照从左到右顺次排放元素，称为文档流（又称普通流）。文档流布局办法能够运用position样式进行调整，包括：static（默许值）、inh前端和后端哪个薪酬高erit（继承父元素）、relative（相对定位）、absolute（相对非面试常见问题及答复技巧static父元素必定定仓鼠寿数位）、fixed（相对阅览器窗口进行必定定位）。

2. stat前端和后端哪个薪酬高ic

假设咱们设置了特征值为static时面试毛遂自荐一分钟，其他的定位是无效的

&lt前端开发;style type="text/css">
a,
p,
div {
border: sol阅览器的阅览历史怎样删去id 1px red;
}
.static{
position: s长沙国际之窗tatic开源阅览;
left: 100px;
t开源节流op: 100px;
}
</s阅览器怎样检查历史阅览记载tyle>
</hea开源众包d>
&开源阅览app下载安装lt;body>
<h3>默许流：面试技巧和注意事项position=static&仓鼠寿数lt;/h3>
<a>面试毛遂自荐简略大方a1</a>
<a>开源众包a2</a>
&陈涉世家翻译及原文lt;a>a开源节流是什么意思是什么3</a>
<a&g超崇高骑士t;a4</a>
<p>p1</p>面试毛遂自荐范文
<p>p2</p>
<p>p3</p>开源
<p>p4</p>
<div>div1</div>
<div>div2</div>
<div>div3</div>
&lt面试毛遂自荐简略大方;di面试常见问题及答复技巧v>div4</div>
<h3>普通流：position=static, left=100px, top=100px</h3>
<a class="static">a1</a>
<a class="static">a2</a&g前端t;
&lt开源我国;a class长沙师范学院="static">a3</a>
&l开源我国t;a class="static">a4</a>
<p class="static"&面试毛遂自荐gt;p1</p>
<p class="sta前端学什么tic">p2</p>
<p class="static">p3</p>
<p c前端学什么lass="static">p4</p>
<div class="static">div1&lt陈思思;/div>
<div class="static">div2</div>
<div class="static">div3</div>
<div class="static">div4</div&前端和后端哪个薪酬高gt;
</body>

作用图闪现static元素设置的定位作用是无效的

聊聊前端页面布局那些事

3. relative

.relative{
position: relative;
left: 100px;
top: 1前端开发需要掌握什么技术00px;
}

当咱们设置了特征为relative时，元素会坚持原有文档流，但相对本身的原始方位产生位移，且会占用空间，如阅览器闪现

聊聊前端页面布局那些事

4. absolute

.parent {
border: solid 1px blue;
width: 300px;
}
.parent > div {
border: soli阅览器历史记载删了怎样找回d 1px red;
height: 1长生十万年00px;
width: 300px;
}
.absol面试问题ute {
positi面试毛遂自荐on: absolute;
left面试毛遂自荐范文: 100px;
top: 100p前端训练组织x;
}

在这儿，咱们设置特征值为absolute,而absolute的元前端工程师素不占位，因而下一个符合普通流的阅览器怎样检查历史阅览记载元素会略过absolute元素排到其上一个元素的后方。如图

聊聊前端页面布局那些事
当咱们给父元素加上absolute特征时，即可将一个元素固定在页面的某个方位

.parent {
border: solid 1px blue;
width: 300px;
position: absolute超崇高骑士;
}

聊聊前端页面布局那些事

5. fixed

当咱们设置fixed特征时，元素脱离文档流、且不占位，此时看上去与absolute相似。但当咱们进行页面翻滚的时分，会发现fixed元素方位没有产生改动。

聊聊前端页面布局那些事
这是由于fixed元素相关于阅览器窗口进行定位，而absolute元素只需在满足“无static定位以外的父元素”开源是什么意思的时分，才会相关于document进行定位。

该部分还会衍出脱离文档流，待日后逐渐细谈。

2.4 元素堆叠 z-index

咱们还能够经过设置z-index特征来控制元素的堆叠次序,话不多说,直接上图

聊聊前端页面布局那些事
剖析代码能够知阅览器历史记载设置道:

  • 当同级元素不设置z-index或许z-index持平阅览器历史上的痕迹在哪里时，后边的元素会叠在前面的元素上方；
  • 当同级元素z-面试毛遂自荐一分钟index不一起，z-index大的元素会叠在z-index小阅览器历史记载删了怎样找回的元素上方。

3. 页面布局办法

前端页面布局不只有规矩，还有办法，咱们聊完了规矩，那么咱们聊聊办法。前端页面布局的办法一般有以下几种：

  • 传统布局面试毛遂自荐范文办法；

  • Flex 布局办法；

  • Grid 布局办法。

3.1 传统布局

传统布局办法基本上运用上面介绍的布局规矩，结合display/position/float特征以及一些面试毛遂自荐边距、x/y 轴距离等办法来进行布局。传统办法布局的优势在于兼容性较好，在一些版别较低的阅览器上也能给到用户较友爱的体会。但传统布开源是什么意思局需求掌握的常识较多也相对杂乱，关于整个页面的布局和排版结束，常常是依据盒模型、运用display特征+position特征+float特征的办法来进行，这个进程开源我国比较烦琐，因而更多时分咱们都会运用开源库（比方 bootstrap）来结束页面布局。

3.2超崇高骑士 flex布局

Flex 布局（又称为 flexbox）是一种一维的布局模型。在运用此布局时，需掌握几个概念。

  • flexbox 的两根轴线。其间，主轴由flex-direction界阅览器说，穿插轴则垂直于主轴。
  • 在 f面试毛遂自荐简略大方lexbox 中，运用开端和停阅览器历史上的痕迹在哪里止来描绘布局方向。
  • 知道 flex 容器和 flex 元素。

来个小实例

<style>
div {
border: solid 1p前端训练组织x blue;
margin: 10px;
}
.box {
dis面试问题大全及答案大全play: flex;
}
</style>
</head>
&超神兽宠店lt;body&gt陈思思;
<div clas陈涉世家翻译及原文s="box">
<div>1</div>
<div>2</div>
<div>3 <br />有其他 <br />内容</div>
</div>
</body>

作用图

聊聊前端页面布局那些事
Flex 布局的呈现，处理了许多前端开发居中、排版的一些痛点，尤其是垂直居中，因而现在简直成为干流的布局办法。除此之外，还能够对 Flex 元素设置摆放次序、扩展份额、缩小份额等。

3.3 grid布局

Grid 布局是 CSS 中最健壮的布局体系。与 flexbox 的一维布局体系不同，CSS Gr面试毛遂自荐一分钟id 布局是一个面试毛遂自荐3分钟通用二维布局体系，也就意味着它能够一起处理列和行。经过将 CSS 规矩运用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就能够轻松运用 Grid(网格) 布局。
运用 Grid 布局能够：

  • 结束前端工程师网页的照应式布局；
  • 结束灵活的 12 列布局（相似于 Bootstrap 的 CS仓鼠寿数S 布局办法）；
  • 与其他布局办法前端开发结合，与 css 其他部分协同协作。

经过 Grid 布局咱们能结束恣意组合不同布局，其设计可称得上现在最健壮的布局办法，它与 Flex 布局开源众包是未来的趋势。其间，Grid 布局适用于较大规划的布仓鼠养殖八大禁忌局，Flex 布局则适合页面中的组件和较小规划布局。

在这儿笔者没有将布局办法过度的翻开论说，由于在规划巨大的css宝库中,布局办法体量大，且细，笔者现在也还没具前端面试题有该实力(太菜了开源是什么意思)。
给我们供给一些优质美文让我们具体了解css的布局办法:

  • 美文1
  • 美文2

4. 最后

笔者大三，现在正在寻找前端实习，未来待续…….开源矿工