布局方式以及一些布局常用方法

前端页面的布局方式常用到的大概有三种方式分别为普通文档流布局、浮动布局和绝对布局。下面将分别介绍着三类布局。

  a、普通布局:前端中用到的标签主要分为块级标签(display:blcok)和行级标签(display:inline)。块级标签为必须占一行的标签元素,后面的元素必须在下一行显示;行级标签是显示时后面的行级元素紧跟着前一个行级标签显示。普通布局是在按照这些元素的特性进行界面的布局,从左到右,从上到下的顺序进行。另:普通元素的position为static。

  b、浮动布局:浮动布局包括左右浮动,即相对于普通布局,该布局元素会脱离普通布局也是流布局,相当于浮动元素会在普通布局之上进行界面的布局,会导致的问题就是会有普通布局的部分被浮动布局元素给遮挡,解决办法为清除浮动,即在被遮挡的普通元素上添加clear:both进行浮动的清除,使得普通布局的元素不会跟浮动元素在一行显示并另起一行进行dom文档的渲染,清除浮动还有其他办法请自行查询。另:浮动布局中浮动的范围是根据父元素的位置进行浮动位置定位。

  c、绝对布局:常用的position为absolute时的元素会进行绝对布局。绝对定位的参考位置为其祖先元素中position为非static的第一个元素。所以一般将参考位置元素设置为position:relative。

除了以上三种布局方式,还有常使用的布局办法:

横向布局:竖向布局相对容易,只需要进行块状元素的上下堆叠,横向布局一般采用浮动的方式进行布局,即多个块状元素进行元素的浮动并按照浮动的方向进行堆叠;另横向布局还可以采用display:inline-block的方式进行,另ie6下可以使用_display:inline的hack实现,可以实现区域块在父级元素宽度能容纳 的情况下横向堆叠。

居中方法:居中是布局中常用方法,其中居中的方法分为限制宽度的块状元素和行级元素。前者使用常规办法margin:0 auto实现;后者使用text-align:center实现行级元素在其所在的块级区域中的居中,另ie6将块级元素设置为行级后也使用该办法是实现居中。

界面自适应:布局的自适应其实主要是宽度的自适应,对于常见的分辨率的pc显示器屏界面都能友好的适应,不出现混乱和叠压的情况,但是对于非pc显示器的适应就要通过响应式进行,此处不讨论。自适应办法:对于界面整体布局的区域宽度采用百分比宽度设置,例如”前端html文档的基本布局“中界面的区域块的宽度采用百分比布局,具体定位到什么级别大小的区域块具体看页面自定。对于相对细级别的区域块或者说是内容块可以使用绝对大小px进行布局,以上基本实现自适应。

以上为当前项目中常用到的一些方法,为了兼容ie低版本所以使用的都是比较传统的办法,随着现代浏览器的发展以及ie低版本的放弃,更好的布局方式未在本文罗列。以上为个人项目总结,没有涉及之处以及其中存在的问题请包涵并指出。

来自为知笔记(Wiz)

时间: 2024-10-23 14:31:02

布局方式以及一些布局常用方法的相关文章

布局方式-表格布局

普通的表格布局 <style> .table { display: table; width: 800px; height: 200px; } .table-row { display: table-row; } .table-cell { vertical-align: middle; display: table-cell; } .left { background: red; } .right { background: blue; } </style> <body&g

Android五种布局方式——LinearLayout、RelativeLayout、TableLayout....(四)

Android五种布局方式--LinearLayout.RelativeLayout .TableLayout.... Android使用XML声明界面布局 将程序的表现层和控制层分离 修改用户界面时,无需更改程序的源代码 可视化工具设计用户界面 Android五种布局方式 LinearLayout线性布局 AbsoluteLayout坐标布局 RelativeLayout相对布局 FrameLayout帧布局 TableLayout表格布局 GridLayout 1.LinearLayout线

【转】Android开发学习笔记:5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(TableLayout):按照行列方式布局组件. 相对布局(RelativeLayout):相对其它组件的布局方式. 绝对布局(AbsoluteLayout):按照绝对坐标来布局组件. 1. 线性布局 线性布局是Android开发中最常见的一种布局方式,它是按照垂直或者水平方向来布局,通过“android:

(转)Android开发:5大布局方式详解

原文链接 http://liangruijun.blog.51cto.com/3061169/632532 Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(TableLayout):按照行列方式布局组件. 相对布局(RelativeLayout):相对其它组件的布局方式. 绝对布局(AbsoluteLayout):按照绝对坐标来布局组件. 1. 线性布局

Android开发5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(TableLayout):按照行列方式布局组件. 相对布局(RelativeLayout):相对其它组件的布局方式. 绝对布局(AbsoluteLayout):按照绝对坐标来布局组件. 1. 线性布局 线性布局是Android开发中最常见的一种布局方式,它是按照垂直或者水平方向来布局,通过“android:

Android 开发之旅:view的几种布局方式及实践

本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weight="1" 3.相对布局(Relative Layout) 4.表格布局(Table Layout) 5.列表视图(List View) 5.1.一个小的改进 5.2.补充说明 6.网格视图(Grid View) 7 .绝对布局() 8.标签布局(Tab Layout) 1.view的布局

Android开发之基本控件和详解四种布局方式

Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

【转】Android 开发之旅:view的几种布局方式及实践

引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理及布局文件可谓有了比较深刻的认识和理解,并且用“Hello World!”程序来实践证明了.在继续深入Android开发之旅之前,有必要解决前两篇中没有介绍的遗留问题:View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(TableLayout):按照行列方式布局组件. 相对布局(RelativeLayout):相对其它组件的布局方式. 绝对布局(AbsoluteLayout):按照绝对坐标来布局组件. 1. 线性布局 线性布局是Android开发中最常见的一种布局方式,它是按照垂直或者水平方向来布局,通过“android: