Head First HTML与CSS — 布局与定位

1.流(flow)是浏览器在页面上摆放HTML元素所用的方法。

对于块元素,浏览器从上到下沿着元素流逐个显示所遇到的各个元素,会在每个块元素之间加一个换行;

对于内联元素,在水平方向会相互挨着,总体上会从左上方留向右下方。

2.流与盒模型

盒模型:从CSS角度来看,每个元素都是一个盒子。由内容区(content area),内边距(padding),边框(border)和外边距(margin)组成。

并排放置两个内联元素时:它们的外边距会叠加。

上下放置两个块元素时:它们的外边距会折叠,共同的外边距为两个外边距中的较大的那个(包括嵌套的情况)。

3.浮动元素 float

对于浮动元素有一个要求,必须有一个宽度。

元素浮动后,会脱离文档流,其它块元素会填上它的位置,但是对于其他块元素中的内联元素,它们会围绕着这个浮动元素。

清楚float:当元素流入页面时,在这个元素的两边不允许有浮动内容时,可以用 clear属性来清除浮动。

4.凝胶(jello)布局

与用float流体布局(liquid layouts)相比,凝胶布局会锁定页面中内容区的宽度,不过会将它在浏览器中居中。

通过设置属性 margin:0 auto;

5.使用CSS创建表格显示

在CSS中通过属性 display ,设置其值为 table,table-row,table-cell。

与HTML表格不同,CSS表格显示只是使用一种类似表格的布局来表现这个结构中的内容。

时间: 2024-10-10 02:16:29

Head First HTML与CSS — 布局与定位的相关文章

Web前端学习第十一天·fighting_使用CSS布局和定位

元素布局 display  设置对象是否及如何显示.IE7以下的浏览器不支持table相关的参数值. 红色颜色显示的属性值为常用的值. 语法:display:none(隐藏对象,与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间) | inline(指定元素为内联元素) | block(指定元素为块级元素) | list-item | inline-block(指定元素为内联块级元素) | table | inline-table | table-caption |

css 布局之定位 相对/绝对/成比例缩放

给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏,但必须要给body 设置一个高度 overflow: hidden; height:864px; 父元素必须要设置 position:relative 必须设置 width 与 height 且不能用百分比 父层如果是图片,要使用  background: url(bg.jpg) no-repeat; 子元素必须设置 position: absolute; 必须设置 width 与 height 定位使用 top

CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效

学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在 流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属性transform. 一图文混排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

百度前端技术学院--零基础CSS布局

怎么预览 GitHub 项目里的网页? 一. 在项目源代码页面链接前缀那加上http://htmlpreview.github.com/?举个例子:需要打开的项目页面https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html给加上前缀http://htmlpreview.github.com/?最终链接http://htmlpreview.github.io/?https://github.com/aisinvon/

奇妙的CSS之布局与定位

关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有时候很令人苦恼.下面根据我的学习和编程经验来谈一下这方面的要点. 要想完美的实现自己的布局,那首先一定要把盒模型搞清楚.盒模型由内容区.内边距(padding).边框(border)和外边距(margin)构成.这些属性值都是可选的,相互之间没有依赖关系,但在具体的布局时会需要设置某些属性.我们平时设置的

10步掌握CSS布局定位: position static relative absolute float

无意中看到此文,因作者强调其中避开了浏览器bug/分歧,所以个人认为值得借鉴. 不才仔细看了此文,自觉受益匪浅 ,屡试不爽,佩服作者对css布局的精炼总结,顺便小译了一段, 英文水平有限,且个人通常写写php,对css了解不深却有点兴趣,错误之处还请指正. 个人没有空间,代码中的css文件和js保留了完整路径:http://www.barelyfitz.com/screencast/html-training/css/positioning/ 原文地址:http://www.barelyfitz

css+div网页设计(二)--布局与定位

在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子模型的范围包括 margin.border.padding.content. 需要指出的一点是,在ie中与firefox中盒子模型表示略有不同: IE 盒子模型的 content 部分包含了 border 和 pading. 而firefox中的盒子模型的content部分不包含border和pad

css中的几种控制页面布局的定位机制(相对定位与绝对定位)

  CSS中几种控制页面布局的定位机制 对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,趁有时间就好好总结一下CSS中的几种定位方式,也当自己再巩固一下. CSS中包含三种控制页面布局的定位机制:普通流.相对定位.绝对定位.在CSS中通过position属性表明定位机制.此外还可以使用float属性来让元素浮动 普通流 相应语法(默认) position:static; 所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局,而不人为的进行控

深度理解div+css布局嵌套盒子

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们