[DIV+CSS应用]澄清display:inline;与float:left;的用途

首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

当然这看起来不像是display:inline;与float:left;的区别所在，但是当理解了float:left;的特性那么我们就清楚到底是怎么回事了。float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

那么我们很清楚了，内联(display:inline;)元素不能设置宽高，因为内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高

下面的例子主要讲style="dispaly:inline"的用法.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE> New Document </TITLE></HEAD><BODY><table border="1" width="600"><tr><!--span:默认行内显示   div:默认块级显示，也就是两个div一起用是换行的。--><!--css中的display 有值inline、block是用来控制上面元素的显示方式的--><!---加上float:right inline就会失效，具体原因参看上面解释--><td width="300"><span > SPAN1 </span><span> SPAN2 </span> </td><td width="300" align="center"><div style="display:inline">aaaaa</div><div style="display:inline">bbbbb</div></td></tr></table></BODY>
</HTML>

[DIV+CSS应用]澄清display:inline;与float:left;的用途相关推荐

[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
DIV CSS display (block none inline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
CSS布局 ——从display，position， float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先: 一.并排在一行的两个div样式有这种情况:ie或者ff下对于子 ...
html在一行内横向排列并排同行同时显示两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
01/23/2014, Posted in 移动 Comments: No comments 最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属 ...
div+css使用padding样式和 important标记实现Firefox和IE6处理带float样式的margi
div+css使用padding样式和!important标记实现Firefox和IE6处理带float样式的margin尺寸上的兼容 [示例代码] <html> <body ...
Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...

[DIV+CSS应用]澄清display:inline;与float:left;的用途

[DIV+CSS应用]澄清display:inline;与float:left;的用途相关推荐

最新文章

热门文章