css前端知识分享—页面布局分析

今天分享下”css前端知识分享—页面布局分析“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。CSS网页页面布局技术容许大家捡取网页页面中的原素，而且操纵他们相对性一切正常布局流、附近原素、父器皿或是主视口/对话框的部位。在这个控制模块里将涉及到大量有关网页页面布局技术的关键点：

波动

精准定位

CSS 表格

弹性盒子

网格

每一种技术都是有他们的主要用途，都各有优点和缺点。

一切正常布局流

一切正常布局流就是指在没有对网页开展一切布局操纵时，电脑浏览器默认设置的HTML布局方法。使我们更快地看一个HTML的事例：

I love my cat.

Buy cat food
Exercise
Cheer up friend
The end!

默认情况下，浏览器的显示如下：

注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。

布局技术会覆盖默认的布局行为：

position属性 — 正常布局流中，默认为 static ，使用其它值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。

浮动——应用 float值，诸如 left 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。

display 属性——标准值 block, inline or inline-block 会改变元素在正常布局流中的行为方式（见 Types of CSS boxes ），而一些不常见或特殊的值允许我们使用完全不同的方式进行布局，使用工具比如Flexbox。

浮动

浮动技术允许元素浮动到另外一个元素的左侧或右侧，而不是默认的一个堆叠另一个。float 的主要用途是布置出多个列并且浮动文字以环绕图片。下面我们快速浏览一下 float 属性并通过一个例子来说明。

float 属性有四个可能的值：

left — 将元素浮动到左侧。

right — 将元素浮动到右侧。

none — 默认值，不浮动。

inherit — 继承父元素的浮动属性。

简单HTML示例

下面展示了如何用浮动来创建一个简单的两列布局。首先看一下HTML：

2 column layout example

First column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

Second column

Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.

代码中有一个一级标题和两个简单的

元素。每个又各自包含一个二级标题和一个段落。默认情况下。HTML内容自上而下显示：

整列浮动

下面让我们将两个

元素排成一行。下面的代码可以实现这个效果。注意这两个

一个浮动值为 left，另外一个浮动为 right。这意味着它们其中一个往左靠，另外一个往右靠。给这两个元素分别设置 width值，使得它们能够在同一行放下来，并且设置一个水平的间距（总宽度不要大于100!）。

div:nth-of-type（1） {

width: 48%;

float: left;

}

div:nth-of-type（2） {

width: 48%;

float: right;

}

修改过的代码如下：

定位技术

定位技术（position）允许我们将一个元素从它在页面的原始位置准确地移动到另外一个位置。

有四种主要的定位类型需要我们了解：

静态定位（Static positioning）是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。

相对定位（Relative positioning）允许我们相对元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计（design pinpointing）非常有用。

绝对定位（Absolute positioning）将元素完全从页面的正常布局流中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的元素边缘固定，或者相对于离元素最近的被定位的祖先元素（ancestor element）。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。

固定定位（Fixed positioning）与绝对定位非常类似，除了它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。在创建类似页面滚动总是处于页面上方的导航菜单时非常有用。

简单定位示例

我们将展示一些示例代码来熟悉这些布局技术。这些示例代码都作用在相同的HTML上：

Positioning

I am a basic block level element.

I am a basic block level element.

I am a basic block level element.

该HTML将使用以下CSS默认样式：

body {

width: 500px;

margin: 0 auto;

}

p {

background: aqua;

border: 3px solid blue;

padding: 10px;

margin: 10px;

}

span {

background: red;

border: 1px solid black;

}

渲染效果如下：

相对定位

相对定位通常用来对布局进行微调，比如将一个图标往下调一点，以便放置文字。我们可以通过下面的规则添加相对定位来实现效果：

。positioned {

position: relative;

background: yellow;

top: 30px;

left: 30px;

}

这里我们给中间段落一个position——relative值——这属性本身不做任何事情，所以我们还添加了top和left属性。这些可以将受影响的元素向下向右移——这可能看起来和你所期待的相反，但你需要把它看成是左边和顶部的元素被“推开”一定距离，这就导致了它的向下向右移动。

添加此代码将给出以下结果：

绝对定位

绝对定位用于将元素移动到web页面的任何位置，以创建复杂的布局。有趣的是，它经常被用于与相对定位和浮动的协同工作。

回到我们最初的非定位示例，我们可以添加以下的CSS规则来实现绝对定位：

。positioned {

position: absolute;

background: yellow;

top: 30px;

left: 30px;

}

这里我们给我们的中间段一个position的 absolute值，并且和前面一样加上 top和left属性。但是，添加此代码将给出以下结果：

这和之前截然不同！定位元素现在已经与页面布局的其余部分完全分离，并位于页面的顶部。其他两段现在靠在一起，好像之前那个中间段落不存在一样。top和left属性对绝对位置元素的影响不同于相对位置元素。在这种情况下，他们没有指定元素相对于原始位置的移动程度。相反，它们指定元素应该从页面边界的顶部和左边的距离（确切地说，是元素的距离）。

我们现在暂时不讨论固定定位（ fixed positioning ）——它基本上以相同的方式工作，除了它仍然固定在浏览器窗口的边缘，而不是它定位的父节点的边缘。

CSS 表格

HTML表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，非常重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。

CSS表格的存在是为了让您能够像表格一样布局元素，而不需要上面描述的任何问题——这听起来可能有些奇怪，您应该使用表格元素作为表格数据，但有时这可能是有用的。例如，您可能想要列出一个表单，其中有标签和文本输入；这可能很棘手，但是CSS表使其变得容易。

让我们来看一个例子。首先，创建HTML表单的一些简单标记。每个输入元素都有一个标签，我们还在一个段落中包含了一个标题。为了进行布局，每个标签/输入对都封装在

中。

First of all, tell us your name and age.

First name:

Last name:

Age:

现在，我们例子中的CSS。除了使用 display属性外，大多数CSS都是相当普通的。 ,

, 和被告知要分别显示表、表行和表单元——基本上，它们会像HTML表格标记一样，导致标签和输入在默认情况下排列整齐。我们所要做的就是添加一些大小、边缘等等，让一切看起来都好一点，我们就完成了。

你会注意到标题段落已经给出了 display: table-caption;——这使得它看起来就像一个表格 ——和caption-side: bottom; 让标题在表格的底部下进行设计，即使标记是在源的输入之前。这就能让你有一点灵活的弹性。

html {

font-family: sans-serif;

}

form {

display: table;

margin: 0 auto（http://www.qlyl1688.com/）;

}

form div {

display: table-row;

}

form label, form input {

display: table-cell;

margin-bottom: 10px;

}

form label {

width: 200px;

padding-right: 5%;

text-align: right;

}

form input {

width: 300px;

}

form p {

display: table-caption;

caption-side: bottom;

width: 300px;

color: #999;

font-style: italic;

}

结果如下：

柔性盒子

CSS是一种功能强大的语言，它可以做很多事情，但它却在布局上有所下降。传统的老式布局方法，如float和positioning工作，但有时它们会感觉比他们需要的更复杂、更灵活、更有弹性。例如，如果你想要：

垂直中心盒子的内容（不仅仅是文本；line-height 将会失效）。

制作几列有相同的高度包含不同数量内容的列，不使用固定的高度，或用背景图像伪装。

在一行中创建几个盒子，占用相同数量的可用空间，不管有多少个，并且如果它们有内边距，外边距等就应用它。

上面的例子几乎不可能通过常规的CSS实现——柔性盒子（或flexbox）是为了让这些东西更容易实现而被发明的。

让我们来看一个例子；首先，一些简单的HTML：

This is a box

This is a box

This is a box

Create box

Reset demo

这里我们有一个

元素，里面有三个

，再加上几个按钮来创建一个新盒子，和重新设置demo。默认情况下，子元素不会被布局或改变大小，使用传统的方法，我们必须仔细地对每个元素设置大小，允许宽度、外边距、边框和内边距，如果我们添加了另一个子元素，我们就必须完全改变所有的值。

使用Flexbox替代它：

html {

font-family: sans-serif;

}

section {

width: 93%;

height: 240px;

margin: 20px auto;

background: purple;

display: flex;

}

div {

color: white;

background: orange;

flex: 1;

margin-right: 10px;

text-shadow: 1px 1px 1px black;

}

div:last-child {

margin-right: 0;

}

section, div {

border: 5px solid rgba（0,0,0,0.85）;

padding: 10px;

}

这个CSS的两行非常有趣：

display: flex; 告诉

元素的子元素作为flexible boxes——默认情况下，它们都将展开以填充父类的可用高度，不管它是什么，并将其列出来——有足够的宽度来包装他们的内容。

flex: 1; 告诉每个

元素，在行中获得相同数量的空间，不管有多少。

为了进一步说明这是多么的神奇，我们还将添加一些JavaScript，以便您可以通过按下_Create box_按钮来添加进一步的子

。

var section = document.querySelector（‘section’）;

var createBtn = document.querySelector（’.create’）;

var resetBtn = document.querySelector（’.reset’）;

function createBox（） {

var box = document.createElement（‘div’）;

box.textContent = ‘This is a box’;

section.appendChild（box）;

}

createBtn.onclick = createBox;

resetBtn.onclick = function（） {

while （section.firstChild） {

section.removeChild（section.firstChild）;

}

createBox（）;

createBox（）;

createBox（）;

}

这是一个例子——多试试见证Flexbox作为一个布局工具的强大。

网格布局

这里提到的最具实验性的特性是CSS网格，它在浏览器中还没有得到广泛的支持。Web页面通常使用网格系统布局，与打印媒体相同，这里的想法是通过定义一个网格来简化这个过程，然后定义内容的哪些部分位于网格的每个区域。

目前的CSS网格在任何地方都还没有得到真正的支持（除了Firefox和Chrome的实验性版本）。

IE和Edge支持一种更旧的、过时的技术。这是我们将来可以期待的！

今天的文章就分享到这啦，内容转自divcss5平台，下篇文章再见！

css前端知识分享—页面布局分析
https://blog.51cto.com/u_15111999/3972822

css前端知识分享—页面布局分析相关推荐

应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
CSS+DIV进行的页面布局
CSS+DIV进行的页面布局第一部分.布局概述 1.网页布局 2.页面元素定位机制第二部分.布局常用属性 1.浮动属性(float) 2.清除浮动(clear) 3.定位属性(position) ...
前端大屏页面布局经验
前端大屏页面布局经验额··· 其实谈不上经验,只能说是开发过程中值得记录一下的东西,不一定是对的. 分辨率首先一点,大屏对分辨率和显示器是有要求的,因为他不像一般的页面,出个纵向的滚动条啥的无所谓 ...
基于制表位停止检测的页面布局分析方法_TesseractOCR内置
基于制表位的混合页面版面分析技术: 摘要:提出了一种新的混合页面布局分析算法,该算法使用自底向上的方法形成初始数据类型假设,并定位页面格式化时使用的制表符.检测到的制表符停止符用于推断页面的列布局.然 ...
了解CSS盒模型、页面布局在UI设计中的作用
我司实行UI规范已过去一段时间,页面风格已逐渐实现统一.但近期在实际业务开发中发现,在UI验收环节不断出现小数值调整情况,极大的延长验收时间. 在和UI设计人员探讨后发现设计者对前端盒模型概念不甚了解 ...
CSS盒子模型与页面布局
202209 week1 day5~day6 前端学习 1 盒子模型 1.1 盒子模型结构 1.1.1 内容 1.1.2 边界(margin) 1.1.3填充(padding) 1.1.4 边框(bo ...
影响页面布局的css属性,6 和页面布局有关的CSS属性（三）
6 和页面布局有关的CSS属性(三) 03.png 04.png 05.png #box { /* 声明ID选择器,名称为box */ position:absolute; /* 设置层的定位为绝对定 ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
web前端技术之CSS语言基础与页面布局（中）
4.4CSS属性常用的CSS样式的属性有文本.字体.背景.表格.列表及定位等属性. 文本属性 <!DOCTYPE html> <html lang="en"&g ...

css前端知识分享—页面布局分析

2 column layout example

First column

Second column

Positioning

今天的文章就分享到这啦，内容转自divcss5平台，下篇文章再见！

css前端知识分享—页面布局分析相关推荐

最新文章

热门文章