inline-block,inline,block,table-cell,float
float:left ----------------------------------------------------------------------------------------
参考 http://www.w3school.com.cn/css/css_positioning_floating.asp
最常见的布局会有局限性,要求高度相同,不然会出现卡住的情况
eg 1 : 当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
eg 2: 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,
实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
eg 3: 如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,
那么当它们向下移动时可能被其它浮动元素“卡住”:
行框和清理
浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像:
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面 :
这是一个有用的工具,它让周围的元素为浮动元素留出空间。
让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。
您可能编写下面的代码:
.news {background-color: gray;border: solid 1px black;}.news img {float: left;}.news p {float: right;}<div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>
这种情况下,出现了一个问题。因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。
如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:
不幸的是出现了一个新的问题,由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。
.news {background-color: gray;border: solid 1px black;}.news img {float: left;}.news p {float: right;}.clear {clear: both;}<div class="news"> <img src="news-pic.jpg" /> <p>some text</p> <div class="clear"></div> </div>
这样可以实现我们希望的效果,但是需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。
不过我们还有另一种办法,那就是对容器 div 进行浮动:
.news {background-color: gray;border: solid 1px black;float: left;}.news img {float: left;}.news p {float: right;}<div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div
clear : 详解 参考 http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
语法: clear : none | left | right | both
取值: none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
对于CSS的清除浮动(clear),这个规则只能影响使用清除的元素本身,不能影响其他元素。
要想让div2下移,就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1,因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素,
这样div2就被迫下移一行。
假如页面中只有两个元素div1、div2,它们都是右浮动呢,如下:
可以看出div2的右边有一个浮动元素div1,那么我们可以在div2的CSS样式中使用clear:right;来指定div2的右边不允许出现浮动元素,
这样div2就被迫下移一行,排到div1下边。
display -----------------------------------------------------------------------------------
display:inline
使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行.
不能更改元素的height,width的值,大小由内容撑开.
可以使用padding,margin的left和right产生边距效果,但是top和bottom就不行.
display:block
使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度.
能够改变元素的height,width的值.
可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.
display:inline-block
用通俗的话讲,就是不独占一行的块级元素
在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
去除inline-block 间距 http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
转载于:https://www.cnblogs.com/lixuchun/p/8778223.html
inline-block,inline,block,table-cell,float相关推荐
- block inline 和inline-block 块级元素和内联元素
2019独角兽企业重金招聘Python工程师标准>>> 非常好的一篇文章 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements ...
- display(block,inline,none),visibility(visible,hidden)之间的关系及区别(不同)
这段时间一直对display属性的block,inline,none和visibility属性的visible,hidden一直很模糊,总觉得很难理解,通过下面这个实例,就可以很好的牢记这几者之间的区 ...
- 三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block
文章目录 三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block Block Inline Inline-block Block,Inline,Inline-B ...
- SAP Spartacus Table cell显示数据类型的Component决定逻辑
以SAP Spartacus B2B org unit list为例,table cell到底用什么样的Component来显示数据,取决于units.config.ts文件里定义的配置数据units ...
- SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件
cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...
- Perl 安装Inline 和 Inline Java模组(windows)
前言 在 Perl 安装及模组安装方法[windows] 这一篇中, 介绍了安装模组的几种方法. 使用PPM来安装应该是最简单的.因为PPM 会自动帮我们找到依赖项, 并进行安装. 但是实际状况却并非 ...
- block,inline,inline-block的区别
最近正在复习,紧张地准备几天后的笔试,然后刚好看到这个地方. block:块级元素,会换行,如div,p,h1~h6,table这些,可以设置宽高: inline:行内元素,不换行,挤在一行显示 ...
- php display block,CSS display (block inline none )常见属性和用法教程
display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...
- block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- Css_display: block inline inline-bock区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
最新文章
- STM32如何计算RTC时钟异步预分频和同步预分频
- 数据结构与算法 / 分治算法
- 数据结构与算法:Python语言描述
- The World is a Theatre(组合数学)
- python谱聚类算法_谱聚类(spectral clustering)原理总结
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 21丨报告系统状态的连续日期【难度困难】​
- java 规格overview_《Java數據結構和算法》- OverView
- 当贝显示服务器生病,智能电视一直显示“缓冲中”是什么问题?当贝市场为你解答...
- 现实给了梦想多少时间?
- qt控制程序打开记事本_QT记事本小部件教程(二):应用程序主要源文件main.cpp详细代码...
- TankGame1.0
- 基于 iso 镜像构建 yum 本地源
- xcode12 导入SwiftyJSON
- 改变学习方式,改变一生-陈光超强逻辑记忆法笔记
- 虚拟化技术——虚拟存储
- 如何把直播嵌入微信公众账号
- Matlab视觉处理模块定位控制全向轮小车运动:目标跟踪测试
- vue使用高德地图第一次进去点标记有数据,第二次进去就没有了
- Python查询物理机硬盘、主板、BIOS序列号(用于认证Windows设备)
- 计算几何(判断顺时针/逆时针) - Clockwise or Counterclockwise - HDU 6857