CSS布局的三个关键属性：float、position、display

妖狐艹你老母 2023-06-11 11:27 4阅读 0赞

最近在出差，就我一个在这里。客户要做几个页面，涉及到了页面的布局问题，没办法自己得做了。然后就遇到了一些问题。页面不论怎么都不能按照设想的布局。

以前也没有做过网页布局方面的工作。上网上找类似的例子，看的是一头雾水。最终决定自学CSS。

在网上下载了一本电子书《CSS权威指南》第三版。用了3个钟头看完了这本书。看的时候专拣不知道的看。譬如CSS选择器（这些了，以前就知道，并且使用jQuery就是用的CSS的选择器）、盒子模型了等，所以这些就不看的。另外在学习时，根据CSS参考手册（下载网址：[http://css.doyoe.com/][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**

[http_css.doyoe.com]: http://css.doyoe.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS布局的三个关键属性：float、position、display

　　最近在出差，就我一个在这里。客户要做几个页面，涉及到了页面的布局问题，没办法自己得做了。然后就遇到了一些问题。页面不论怎么都不能按照设想的布局。以前也没有做过网页布局方

妖狐艹你老母/ 2023年06月11日 11:27/ 0 赞/ 5 阅读

相关 css之flex属性布局

一、前言 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。注意，设为Flex布局以后，子元素的float、clear和ve

r囧r小猫/ 2022年12月15日 03:57/ 0 赞/ 146 阅读

相关 css flex弹性盒布局的属性

1.使用弹性盒模型父元素必须要加`display:flex|inline-flex` 2.容器属性 justify-content 主轴对齐 j

本是古典何须时尚/ 2022年11月29日 00:52/ 0 赞/ 232 阅读

相关 CSS 布局 - display 属性

CSS 布局 - display 属性 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

╰+哭是因爲堅強的太久メ/ 2022年11月13日 05:22/ 0 赞/ 218 阅读

相关掌握这4 个关键的 CSS 属性，你才算入门 CSS

![47f2a08d72be26a39874d8a9e5cb2aeb.png][] 英文 | https://javascript.plainenglish.io/4-key

快来打我*/ 2022年09月10日 13:30/ 0 赞/ 167 阅读

相关 4 个关键的CSS 属性，帮助你快速入门CSS

![917b69f8fcf686481ccce636f671b12b.png][] 英文 | https://javascript.plainenglish.io/4-key

约定不等于承诺〃/ 2022年09月10日 00:24/ 0 赞/ 170 阅读

相关影响页面布局的css属性,CSS布局带来的巨大影响:CSS display属性值

CSS布局带来的巨大影响:CSS display属性值互联网发布时间：2009-04-02 19:39:08 作者：佚名 ![text-message.png

缺乏、安全感/ 2022年09月02日 14:55/ 0 赞/ 198 阅读

相关 InnoDB的三个关键特性

InnoDB存储引擎的三个关键特性：插入缓冲（insert buffer）、二次写（double write）、自适应哈希索引（adaptive hash index）。

柔情只为你懂/ 2022年08月05日 00:54/ 0 赞/ 193 阅读

相关 css布局中的position各种属性

[Position属性四个值：static、fixed、absolute和relative的区别和用法][Position_static_fixed_absolute_rela

古城微笑少年丶/ 2022年06月06日 07:30/ 0 赞/ 259 阅读

相关 css布局属性（重点！！！）

QQ:275487025 QQ群：854312770 欢迎各种大牛指点，和小白一起学习。（重点）position定位属性： relative相对定位特点是：

客官°小女子只卖身不卖艺/ 2022年05月17日 10:06/ 0 赞/ 169 阅读