关闭

页面布局

标签: inline-blocktable-cell浮动弹性盒子横向布局
102人阅读 评论(0) 收藏 举报
分类:
1、浮动
float:left;
左浮动 当然也有浮动
浮动可以盒模型横向排列 
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
clear:both;

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。


2、display:inline-block;
含义:display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 (准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)
span也是行内区块元素,但是不能设置高度宽度

3、display:table-cell;
1、display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性。
2、与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute。
3、设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。
4、使用display:table-cell让大小不固定元素垂直居中已经是很老的方法了,关于此应用,我已经在“大小不固定的图片、多行文字的水平垂直居中”这篇文章中有过介绍。

4、弹性盒子

display: -webkit-flex;

display:flex;

弹性盒子由弹性容器(Flex Container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:21492次
    • 积分:663
    • 等级:
    • 排名:千里之外
    • 原创:45篇
    • 转载:6篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论