关闭

页面布局

标签: inline-blocktable-cell浮动弹性盒子横向布局
127人阅读 评论(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
查看评论

常用页面布局技术

一.自适应三列布局1.使用绝对定位<div id="center">中列</div> <div id="left">左列</div> <div id="right">...
  • m0_37643611
  • m0_37643611
  • 2017-04-01 17:02
  • 542

【android基础学习之八】——页面布局

声明:学习的书籍《Android应用开发揭秘》,这里记录学习该书籍的日志,引用的相关代码与总结描述,没有商业的用途,完全是自我学习的一个记录,刚刚学习不可避免会出现很多问题,若是有错误还请大家多多批评。2011-10-31晚,完成最后一篇Android的基础学习,关于界面一些常用布局;一、 ...
  • yinyuan1987
  • yinyuan1987
  • 2011-11-01 10:07
  • 14060

Android页面布局

Android常用布局类整理 最近又回头做了一下android的项目,发觉越来越不从心,很多东西都忘了,简单的页面布局也很多写不出来,首先还是先整理一下一些会混淆的概念先layout_width/layout_height的两种不同的方式① wrap_content能包裹其中的内容即可&#...
  • u011225629
  • u011225629
  • 2016-05-28 10:57
  • 1657

asp.net从零开始---002--前端页面布局

前端就是给人看的界面,后台人员不仅要知道后台代码的编写,更要知道前端的布局。有时候要比前端人员知道的还要多,因为有可能前端人员是个21天精通ps的大师级人物。这时候你可以自己写前端。1.CSS CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式...
  • lw_zhaoritian
  • lw_zhaoritian
  • 2016-08-03 12:49
  • 3431

前端:css页面布局总结

W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html、xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成。这个标准倡 要将结构,样式,行为分离。 在网页制作中,面对设计图,网页制作人员一般要遵循的原则: 先考虑设计图...
  • lululul123
  • lululul123
  • 2016-12-05 22:11
  • 817

html 页面布局样式

* { padding:0 px; margin: 0 px; font:12px; } body{ background-color:#F5F5F5; } 下面是顶部式样: .top{ width:100%; height:27 px; backgro...
  • qq_34468125
  • qq_34468125
  • 2016-03-29 14:24
  • 315

HTML5+CSS3页面布局

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。 本次学习HTML5的新标签元素有: 定义页面或区段的头部; 定义页面或区段的尾部; 定义页面或区段的导航区域; 页面的逻辑区域或内容组合; ...
  • SHW800
  • SHW800
  • 2013-08-19 17:30
  • 2460

常见的几种页面布局方式

1.固定布局(最基本的布局) 固定布局 *{ margin: 0; padding: 0; } html,body{ width:100% ; height: 100%; } .fixedlayout{ width:800px ; background:gray; padding:10p...
  • DavidLog
  • DavidLog
  • 2017-04-26 01:46
  • 2607

页面布局

重点:重点理解盒子模型,标准流和非标准流的区别,还有定位原理 !把这3个攻破了,就非常简单了!多实践多参考!最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都是经验来的! 盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同, 先来看看我们熟悉...
  • conque60
  • conque60
  • 2014-02-28 16:46
  • 441

页面布局技术easyui&zTree

页面布局技术 easyui  1、 整体网页布局, 企业应用软件主流布局, 占满整个页面,点击左侧菜单,通过iframe 完成局部刷新  2、 easy ui  jQuery Easy...
  • u011451057
  • u011451057
  • 2013-07-28 23:03
  • 1435
    个人资料
    • 访问:29908次
    • 积分:692
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:6篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论