12布置元素:布局和排版

浏览器用流来布置页面上的XHTML元素。浏览器从XHTML文件的开头开始,从头到尾跟着元素的流显示它遇到的每个元素。

当浏览器要并排显示两个内联元素时,两个元素之间的边界为两个元素边界之和。当浏览器并列放置两个块元素时,共同的边界会重叠到一起,重叠边界的高度是最大边界的值。

float属性让一个元素尽可能靠左或靠右(CSS只允许吧元素漂移到右边或者左边)。

漂移可以用来给网页分栏,可以分成以下几个步骤来做。1.用id给要漂移的元素一个名字。2.要把它漂移到哪个元素下面,务必把它的XHTML移到那个元素后面。3.设置元素的宽度。4.把元素漂移到左边或者右边。clear元素可以使元素流入页面时,不允许漂移元素出现在这个元素的左边、右边或两边。

漂移元素的边界不与正常流中元素的边界相交,所以它们不会相叠。

冻结布局冻结页面的大小,把浏览器调宽时外观明显变差。

凝胶物布局锁定了页面中内容区的宽度,但把它们放到浏览器中央。

绝对布局,浏览器把元素从流中完全移走,接着浏览器把元素放置在top和right属性指明的位置(也可以用bottom和left;可以用px也可以用百分比指定位置)。和漂移元素不同的是,流中的元素要调整它们行内容还要考虑到漂移元素的边界。但绝对布置元素对其他元素没有任何影响。z-index属性可以用来指定叠层位置。此时不能用clear属性来避免元素覆盖。

各种布局的比较1.漂移布局:用float属性,页脚用clear属性,唯一的问题是会导致内容放置顺序的改变。

2.凝胶物布局,用固定大小的<div>来包围页面中的所有内容来创建一个冻结布局,然后通过用“auto”属性值让边界扩张来做成凝胶物布局。这种方法的缺点是内容不会随着浏览器窗口的变换而扩张。

3.绝对布局绝对元素不能用clear属性,无法避免元素覆盖

一般情况下,多栏布局中用漂移被认为是最灵活的解决方法。注意内容的顺序。

使用固定布置指定元素的位置和使用绝对布置一样,不过这个位置使相对于浏览器窗口边缘的偏移,而不是页面。

不像绝对布置和固定布置,相对布置的元素仍然是页面流中的一部分,不过在最后一刻,就在元素被显示之前,浏览器偏移它的位置。相对布置稍微有点像静态布置,又稍微加了点绝对布置。相对布置被定义为相对实际位置的偏移,而不是与最近包含的块绝对的平行。

时间: 2024-08-25 12:06:00

12布置元素:布局和排版的相关文章

网站首页应该设置的12个元素

Hubspot绝对是在将驱动内容进入营销策略方面做得最绝的一家,我从没见过一家公司能够推出这么多白皮书.演示以及电子书籍.现在Hubspot又推出了关于网站首页12大元素的信息图表. 网站首页需要身兼数职,提供给来自不同地方的观众们使用.它不像一个专用的登陆页面——来自不同通道的流量会显示各自特定的信息,并执行相对应的指令.登陆页面有更高的转换率,因为它是有针对性的,是对来访者最重要的一部分.威尼斯人赌场 我们帮助客户建立入站营销策略……不过我得说Hubspot在这张信息图表里遗漏了一点东西……

2019.12.5-网站首页及翻页实例(用的是行内块元素布局)代码

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>翻页实例</title></head><style type="text/css"> .menu{ width: 958px; height: 40px; border:1px solid #000; margin:5

简单实用的CSS网页布局中文排版技巧

由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单实用的技巧,希望对大家有所帮助. 一.如何设定文字字体.颜色.大小等 font-style设定斜体,比如font-style:italic font-weight设定文字粗细,比如font-weight:bold font-size设定文字大小,比如font-size:12px line-heigh

Qt 学习之路:元素布局

上一章我们介绍了 QML 中用于定位的几种元素,被称为定位器.除了定位器,QML 还提供了另外一种用于布局的机制.我们将这种机制成为锚点(anchor).锚点允许我们灵活地设置两个元素的相对位置.它使两个元素之间形成一种类似于锚的关系,也就是两个元素之间形成一个固定点.锚点的行为类似于一种链接,它要比单纯地计算坐标改变更强.由于锚点描述的是相对位置,所以在使用锚点时,我们必须指定两个元素,声明其中一个元素相对于另外一个元素.锚点是Item元素的基本属性之一,因而适用于所有 QML 可视元素. 一

html学习第三天—— 第12章——css布局模型

清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float.在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模型(Layer)

Html5元素布局

本教程十分简单,适合新手(因为我也是新手).本教程参考了"菜鸟教程". 笔者希望做到元素相对于浏览器的角落布局,即九个典型位置: 这个理念其实和UE4中的UMG锚定一样.Html5中以position来决定布局样式. 第一种:static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到 top, bottom, left, right影响.所谓的流,其实就像写word一样,按照从左到右,从上到下的顺序写元素. 第二种:fixed定位 使用这种方法可

CSS块级元素布局格式

1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 通俗地来说:创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素(里面怎么布局都不会影响外部),BFC任然属于文档中的普通流 2.BFC的生成: 知道了BFC怎么触发BFC满足以下条件之一都可以触发

2019.12.5-特征布局,新闻列表 代码

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>特征布局</title></head><style type="text/css"> .news_list_com{ width: 600px; height: 290px; border:1px solid #ddd

2019.12.04-首页布局实例代码

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>布局实例</title></head><style type="text/css"> .menu{ list-style: none; background-color: #55a8ea; padding: 0; wi