前端之页面布局

最新推荐文章于 2024-08-06 17:05:56 发布

爱是与世界平行

最新推荐文章于 2024-08-06 17:05:56 发布

阅读量1.1k

点赞数

分类专栏： # ➹➹➹①HTML5、CSS 文章标签： html 前端布局

➹➹➹①HTML5、CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

前端的知识笼笼统统有很多，今天学习整理页面布局。在自己学习的时候，页面布局方面也是一个稍微有点难度的地方，通常需要一些时间构思，而且在写的时候都会遇到各种各样的问题，希望可以学到一个好的方法或技巧，利于页面布局的设计与开发。

盒模型

学习html，盒模型肯定是一个必备的知识，对盒模型的学习也是每一个初学者必学的知识点。
在一个文档中，每个元素都被表示为一个矩形的盒子。确定尺寸, 属性 — 像它的颜色，背景，边框方面 — 和这些盒子的位置是渲染引擎的目标。
在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边（margin）, 边框边（boder）, 内填充边（padding）与内容（content）边。
这里写图片描述

在布局时，必须理解块级元素与行内元素的区别。

块级元素，行内元素

块级元素：独占一行，所以其width不设定的话就是100%，height，margin，padding，border都是可以控制的。

常见的块级元素：

address article aside audio blockquote canvas
dd div dl fieldset figcaption figure footer form
h1, h2, h3, h4, h5, h6
header hgroup hr noscript ol output p pre section table
tfoot ul video

行内元素：跟别的元素连在一起，挤不下了就跳到下一行。可以设置border，padding，margin-left，margin-right。border-top与padding-top，最多到页面顶部。

常见的行内元素：

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

display

关于display的学习与总结，在我之前的博客有了很好的整理，display属性学习总结

display作用就是将上述说到的元素属性进行变化。

常见的是 block（块级）inline（行内）以及inline-block（行内块级）以及在现在更好用的flex（弹性盒布局）

display:flex

设置display:flex 后一些对应的属性设置
这里写图片描述

常见的布局：这里写图片描述

flex不能解决的问题还有兼容性的事情，所以还是离不开 position 与 float。

position

absloute （绝对）| relative （相对）| fixed（固定）

abslote

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。