HTML排版

HTML排版总结

浏览器使用流在页面中放置元素。

块元素从上向下流 , 各元素之间有一 个换行。 默认的,每个块元素会占浏览器窗口的整个宽度。 内联元素在块元素内部从左上方流向右下方。 如果需要多行 , 浏览器会换行 , 在垂直方向上扩展外围块元素 , 来包含这些内联元素。

正常页面流中两个块元素上下相邻的外边距会折叠为最大外边距的大小,或者如果两个外边距的大小相同,则会折叠成一个外边距。

浮动元素会从正常流中取出 ,浮动到左边或右边。浮动元素放在块元素之上,不会影响正常的页面流。不过 , 内联内容会考虑浮动元素的边界 ,围绕着这个浮动元素。

clear属性用来指定 一 个块元素左边或右边 (或者左右两边)不能有浮动元素。设置了clear属性的块元素会下移 ,直到它旁边没有块元素。

浮动元素必须有特定的宽度,不能设置为auto。

流体布局是指,扩展浏览窗口时, 页面中的内容会扩展以适应页面.

冻结布局是指 , 其中内容的宽度是固定的, 不会随着浏览器窗口扩展或收缩.这有一 个好处 , 可以对设计提供更多控制 , 不过也要付出代价 , 这样就不能有效地使用浏览器宽度了。

凝胶布局是指 , 其中内容宽度是固定的, 但是外边距会随着浏览器窗口扩展或收缩. 凝胶布局通常’会把内容放在中央。这与冻结布局有同样的好处,不过通常更美观。

position属性可以设望为4个值:static(静态的,这是默认属性),absolute(绝对的),fixed(固定)和(relative)(相对的)

静态定位是默认方式 , 将元素放在页面的正常流中。

绝对定位允许将元素放在页面上的任何位置.默认地 绝对定位元素会相对于页面边界来放置.

如果一个绝对定位元素嵌套在另一个定位元素中,这个元素就会相对于外包含元素定位.

使用绝对、固定和相对定位时 , 属性top 、right,bottom和left。来指定元素的位置。

绝对定位元素可以使用z-index属性分层放置 , 使一个元素在另一 个元素上面。z-index值越大 , 说明层层次越高(在屏幕上离你越近)。

固定定位元索总是相对于浏览器窗口定位 , 页面滚动时 , 固定定位的元素不会移动。页面中的其他内容会在这些固定定位元素下面正常滚动。

相对定位元素首先正常流入页面 , 然后按指定的位移量偏移 , 从而留出它们原先所在的空间。

使用相对定位,left 、right, top和bottom是指距正常流中该元素位置的偏移量。

css表格显示允许按一种表格布局来摆放元素.

要创建css表格显示,需要使用对应表格的一个块元素,对应行的块元素,以及对应单元格的块元素。通常,这些块元素都是<div>元素。

如果需要建立多栏布局,而且内容栏是均匀的,表格显示就是一个很好的布局策略。

时间: 2024-07-30 00:29:44

HTML排版的相关文章

Bootstrap_排版_文字样式

一.段落 段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能). 3.颜色为深灰色(#333): 二.文字样式 在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理.Bootstrap同样对

我的项目8 css属性,实现阅读器重排版功能

对于小说阅读器,相信兄弟们都很熟悉,那么它是如何实现的呢?早这里分享一些经验之谈. 首先,在我的思路中,在制定多页,和重排版功能的实现,可能需要用到CSS3的一个属性:column-count:3(多列)思路是这样的,也不知道对不对,用HTML5+CSS3写一个可阅读的文本,然后用column-count属性进行分列,在移动端里,那么一本书就相当于一个页面,而每一页则相当于一列,而通过改变column-count的值则实现了重排版功能.不多说分享示例代码. <!DOCTYPE html PUBL

挑战WORD极限排版之模板与加载项

........................待续 挑战WORD极限排版之模板与加载项,布布扣,bubuko.com

深入理解WORD高级排版之模板与加载项

WORD中四大核心技术是样式.域.宏和模板.本文集中讨论模板使用中的有关"模板与加载项"方面的疑问. 一.模板技术 模板是一类特殊的Word文档,它提供了编辑文档的基本工具和文本格式.模板一般包含每个文档中都显示的文字和图形(页眉和页脚:插入日期和时间.文档标题等信息的域:占位符:公司徽标等).页面设置.样式.自定义工具栏.菜单和快捷键等元素.Word 2003的默认模板名为"空白文档"(公共模板).当建立一个新文档时,若没有选择其他类型的模板文件,Word就会将&

XSLFormatter应对大部头出版物的排版软件

随着出版物电子排版方式的普及,大部头出版物的排版,越来越多的应用在人们的工作中.例如,惠普公司的打印机销往世界各地几百个国家,打印机使用手册至少需要出版100多种语言,印出的手册摞起来有1人多高.另外,波音飞机和大众汽车等公司的产品装配手册和使用手册也都是如此,都是上千页甚至是上万页的大数据排版.对于这种大部头出版物的排版,传统的方法非常繁琐且容易出错. XSLFormatter是红樱枫软件有限公司开发的一款对XML和XSL进行排版的功能强大的软件,这种方法就是将出版物的数据放在XML文件中,而

iOS.TextKit.02.文字图片混合排版

1.案例如图 2.代码 TextKit02ViewController.h #import <UIKit/UIKit.h> @interface TextKit02ViewController : UIViewController @property (nonatomic,strong) IBOutlet UITextView *textView; @property (nonatomic,weak) IBOutlet UIImageView *imageView; // 文本可以排版的区域

L1-039. 古风排版

L1-039. 古风排版 中国的古人写文字,是从右向左竖向排版的.本题就请你编写程序,把一段文字按古风排版. 输入格式: 输入在第一行给出一个正整数N(<100),是每一列的字符数.第二行给出一个长度不超过1000的非空字符串,以回车结束. 输出格式: 按古风格式排版给定的字符串,每列N个字符(除了最后一列可能不足N个) 输入样例: 4 This is a test case 输出样例: asa T st ih e tsi ce s #include<iostream> #include

网站前端_Bootstrap.基础入门.0002.排版/列表/表格/表单/按钮/图像?

通用技能: # 文档类型 <!DOCTYPE html> <html lang="zh-cn">     <!-- Html Code --> </html> 说明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性. # 移动先行 <meta name="viewport" content="width=device-width, initi

论文撰写及排版流程总结

论文撰写及排版流程总结1. 新建一个多级列表,链接到标题1-标题32. 修改正文.标题1-标题3.目录1-3.题注的字体格式和段落格式.3. 新建一个带编号的样式“参考文献”.用来处理参考文献列表的内容4. 新建一个样式“抬头”,处理“致谢”.“参考文献”.“附录”等的标题5. 完成参考文献列表,标题用“抬头”样式.内容用“参考文献”样式6. 写正文:对章名采用标题1样式.节名采用标题2样式.小节名采用标题3样式.在需要引用参考文献的时候,用“交叉引用”,同时上标.为插图和表格添加题注,也用交叉

Rendering Engine 主流的浏览器内核(排版引擎、渲染引擎、解释引擎)有哪几种,分别的特点

一.A web browser engine A rendering engine is software that draws text and images on the screen. The engine draws structured text from a document (often HTML), and formats it properly based on the given style declarations (often given in CSS). Example