如何理解CSS中的Position和Float属性-创新互联

本篇文章给大家分享的是有关如何理解CSS中的Position和Float属性，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

成都创新互联公司专注于北辰网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供北辰营销型网站建设，北辰网站制作、北辰网页设计、北辰网站官网定制、成都微信小程序服务，打造北辰网络公司原创品牌,更为您提供北辰网站排名全网营销落地服务。

本文结构点：

1.HTML布局的基本要点（点我直接跳转）
盒子模型
HTML的普通流

2.Position属性（点我直接跳转）
属性值介绍
用法介绍
一些关于position的小知识

3.Float属性（点我直接跳转）
属性值介绍
用法介绍
与Position之间的兼容问题

HTML布局的基本要点：

如果要掌握、运用好Position、Float属性必须要对HTML的两个基本点有清晰的了解。

1.盒子模型（box model）
2.HTML的普通流（normal flow）
盒子模型
在HTML中元素的盒子模型分为两种：块状元素、行内元素，请注意这里的块状元素（Block）和行内元素（Inline）与Display属性中的inline、block两个属性值并不等同。盒子模型中的Inline、Block类似于是Display属性的父类，例如：Display属性中的list-item属性值是属于块状（Block）类型的。

我们直观的上看两种盒子模型的区别

•块状（Block）类型的元素可以设置width、height属性，而行内（Inline）类型设置无效。
•块状（Block）类型的元素会独占一行（直观的说就是会换行显示，无法与其他元素在同一行内显示，除非你主动修改元素的样式），而行内（Inline）类型的元素则都会在一行内显示。
•块状（Block）类型的元素的width默认为100%，而行内（Inline）类型的元素则是根据自身的内容及子元素来决定宽度。
列举出一些大家常见的元素的分类

•块状元素：P、DIV、UL、LI、DD、DT...
•行内元素：A、IMG、SPAN、STRONG...
HTML的普通流
浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。（如下图）

代码如下:


  div { width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
  strong { background: #808080; }
  em { background: #ffd800; }
  span { background: #b6ff00; }

strongemspan
A

大橙子网站建设，新征程启航

如何理解CSS中的Position和Float属性-创新互联

一些的position小知识

Fixed

与position的兼容性问题

其他资讯