CSS布局的三个关键属性:float、position、display
最近在出差,就我一个在这里。客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了。然后就遇到了一些问题。页面不论怎么都不能按照设想的布局。
以前也没有做过网页布局方面的工作。上网上找类似的例子,看的是一头雾水。最终决定自学CSS。
在网上下载了一本电子书《CSS权威指南》第三版。用了3个钟头看完了这本书。看的时候专拣不知道的看。譬如CSS选择器(这些了,以前就知道,并且使用jQuery就是用的CSS的选择器)、盒子模型了等,所以这些就不看的。另外在学习时,根据CSS参考手册(下载网址:http://css.doyoe.com/)编写样式,再使用360浏览器(或者firebug)进行调试,很快就能明白其中奥妙。
这3个钟头中,对CSS有了大致的了解,也明白了CSS布局是怎么回事了。下面我将影响CSS布局的3个重要的属性说说:
(1)display 。在学习这个属性前,要明白CSS把元素主要分为两大类:块元素、行内元素。
常用的块元素主要有:<div>、<p>、<ul>、<li>、<h1..7>等。换行显示。
常用的行内元素有:<span>、<a>等。在同一行显示。
块级元素和行内元素是可以相互转换的,就是通过display属性完成的。
display可取的值有:
display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 等等。
但最重要的就是前三个。
· none 表示不显示。
· inline 表示作为行内元素显示。譬如<div>是个块元素,使用了这个属性值,就将和<span>一样了。
· block 表示作为块元素显示。譬如<span>是行内元素,使用这个属性值,就和<p>一样了。
(2)float 浮动
在学习float前,得先明白什么是文档流。浏览器在解析html文档内容(这里不说css和javascript、是说单纯的html文档)时,是一流的方式解析的,反映到浏览器上,就是按照从左到右、从上到下的方式显示的。
使用float属性后,元素会脱离文档流,按照指定的方式进行浮动。
脱离文档流后,该元素后面的元素就会前移。占有该元素的位置,如果该与元素前的元素也浮动了,就会继续前移。
float有left和right两种浮动方式。
(3)position 定位
使用position属性后,元素也会脱离文档流,按照指定的方式进行定位。
position:static | relative | absolute | fixed 默认是static。
relative是相对于祖先元素中,最近的是用position定位的元素,然后依据相对位置进行定位。
absolute是相对于祖先元素中,最近的是用position定位的元素,然后依据相对位置进行定位。
fixed是相对于<body>,我们看到的悬浮,就是使用这个值做出的效果。
理解了这3个属性后,我就写出来了一个5级的菜单,按照我希望的方式显示。然后顺利的完成了客户的几个页面。
更多专业前端知识,请上 【猿2048】www.mk2048.com
CSS布局的三个关键属性:float、position、display相关推荐
- CSS:布局的三个关键属性:float、position、display
最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...
- 【HTML+CSS网页设计与布局 从入门到精通】第14章-float/position/display属性
目录 float属性 float:left float:left-例2 float:left-例3 float:right; 对比father p{clear:right;} 例1 例2 .fathe ...
- css学习记录三:文本属性
css学习记录三:CSS文本属性 一.文本属性的作用 二.文本颜色 三.文本对齐 四.装饰文本 五.文本缩进 六.行间距 一.文本属性的作用 CSSS Text(文本)属性可定义文本的外观,比如文本的 ...
- CSS布局的三种方式
绝对定位 绝对定位: 属性:position 值:absolute <style> p.abs{position: absolute;left: 150px;top: 50px; }& ...
- css 布局 两行, 三行等高
关键在于添加 overflow: hidden; padding-bottom:9999px; margin-bottom:-9999px; 两行: <!DOCTYPE html PUBLIC ...
- 【转贴】没有div没有float没有clear没有hack的超强CSS布局
[转贴]没有div没有float没有clear没有hack的超强CSS布局 原贴地址:http://parandroid.com/no-float-css-layout/ CSS + XHTML 有多 ...
- CSS 布局:40个教程、技巧、例子和最佳实践
前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...
- html让页面两边都留点空位,标记语言——CSS布局_HTML/Xhtml_网页制作
Chapter 12 CSS布局 本书到此为止,讨论的主要是页面内部元素,也就是内容,但是大结构怎么办?长久以来,设计者都依赖表格进行分栏布局,常常在表格之内嵌套其 点击这里返回脚本之家 HTML教程 ...
- 前端笔记(6)css布局机制,浮动,清除浮动,图片格式,ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制 浮动 浮动(float)的扩展 清除浮动 额外标签法(隔墙法) 父级添加overflow属性方法 使用after伪元素清除浮动 使用双伪元素清除浮 ...
最新文章
- php 多人相册,精選五種 PHP 網路相簿總覽
- 网页设计布局选择:固定,流行和弹性布局 (2010-12-14 13:07:35)
- JAVA Web Servlet中的异步处理 (2) -- Servlet3.1中的Non-blocking IO支持
- nginx wsgi django 建站配置最终版
- oracle笔试题目及答案,Oracle 笔试题目带答案.doc
- c语言代码测试电脑性能,【图片】今天写几个性能测试,为什么C语言跑得这么慢呢??【c语言吧】_百度贴吧...
- Linux 在 soft lockup 时,可以远程调试吗?
- Oracle sql给一列赋值,简单的Oracle变量SQL赋值
- 四则运算2之设计思路篇
- 商品订单打印模板html,【EXCEL】如何制作订单单据查询与打印模板?
- 最小二乘法曲线拟合以及Matlab实现-----实验结果资源和总结
- 网站服务器在国外怎么维护,网站服务器如何维护
- LaTex 插入超链接
- 这个应该是目前最全的Tracking相关的文章了
- 物联网平台搭建的全过程介绍(五)——基于阿里云物联网平台的Android聊天app源码
- mysql 字符串截取,拼接
- 广告dsp,ssp,adx
- 400万像素摄像头,你还在用百兆交换机吗?
- 语法基础课第二节判断语句(知识点和题目)
- 近期 0day exploit 满天飞,原来是神秘的以色列公司 Candiru 在捣鬼