若是没有指定定位方式，默认为静态定位。

1、静态定位（static)

静态定位会将所有元素正常流入页面。

2、绝对定位（absolute）

绝对定位将元素完全从页面流中取出，允许你为他制定一个绝对的位置。这是相对于离他最近的父元素来指定的（这一般是<html>，除非你自行指定了另外的父元素）。如果一个绝对定位元素嵌套在另一个定位元素中，这个元素就会相对于外包含元素定位。

3、固定定位（fixed）

固定定位是相对于浏览器窗口，把元素放在一个特定的固定位置。页面滚动时，固定定位的元素不会移动。

4、相对定位（relative）

相对定位会相对于其外围包含元素来定位，元素仍在正常的页面流中，然后按你指定的量偏移元素。

总结

  • 流

浏览器使用流在页面中放置元素。

  • 块元素

块元素在流中会自动有一个换行，块元素从上往下流，各元素之间有一个换行。默认每个快元素会占浏览器窗口的整个宽度。可以通过设置width属性，设置内容区的宽度。

正常页面流中两个块元素的外边距会折叠未最大的外边距大小，例如块元素1的外边距为10px，块元素2的外边距为5px，那么块元素1和块元素2的间距为10px。

  • 内联元素

内联元素从块元素内部从左上方流向左下方。如果需要多行，浏览器会换行。在垂直方向上扩展外围块元素，来包含内联元素。

  • 浮动元素

浮动元素会从正常流中取出，浮动到左边或者右边。float属性。浮动元素放在块元素之上，不会影响正常的页面流。不过，内联内容会考虑浮动元素的边界，围绕着这个浮动元素。

浮动元素必须有特定的宽度，不能设置为auto。

  • clear属性

clear属性用来指定一个块元素左边或者右边不能有浮动元素。设置了clear属性的块元素会下移直到它旁边没有块元素。

  • 流体布局

流体布局是指，扩展浏览器窗口时，页面中的内容会扩展以适应页面。

  • 冻结布局

冻结布局是指，其中的内容宽度是固定的，不会随着浏览器窗口扩展或收缩。

  • 凝胶布局

凝胶布局是介于流体布局和冻结布局之间，其中内容的宽度是固定的。但是外边距会随着浏览器窗口扩展或收缩。通常会把内容放在中央。

  • position属性

static/absolute/fixed/relative。使用绝对、固定和相对定位时，属性top、right、bottom、left可以用来指定元素位置。

  • CSS表格

CSS表格显示允许按一种表格布局来摆放元素。

CSS——4种定位的更多相关文章

  1. CSS四种定位及应用

    定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...

  2. Css五种定位之间的区别

    ##CSS 定位机制## CSS 有三种基本的定位机制:普通流.浮动流和定位流. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级 ...

  3. CSS三种定位机制

    标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...

  4. css五种定位方式介绍

    1.static定位(普通流定位) -------------- 默认定位 2.float定位(浮动定位) 例:float:left; 有两个取值:left(左浮动)和right(右浮动).浮动元素会 ...

  5. css四种定位

    概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...

  6. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  7. CSS的4种定位方式比较

    CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed 元素flow, overlap 相对参照物: 能否用offset( top, left, ...

  8. CSS的五种定位方式

    CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...

  9. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

随机推荐

  1. iOS----关于第三方的运用（有待补充）

    第三方东西涵盖哪些内容? 1)第三方SDK 2)第三方框架 3)第三方功能代码的封装开源分享 4)第三方工具类等等 PS:1. 对于一个在正在深入学习的程序员而言,有时候参考学习或者使用一下第三方的东 ...

  2. Jquery判断数组中是否包含某个元素$.inArray()的用法

    判断数组里面是否包含某个元素可以使用 $.inArray("元素(字符串)",数组名称) 进行判断 ,当存在该元素(字符串)时,返回该元素在数组的下标,不存在时返回 -1 示例代码 ...

  3. Android中的Activity相关知识总结

    一.什么是Activity? 简单理解:Activity是Android组件中最基本也是最为常见用的四大组件之一.是一个与用户交互的系统模块,一个Activity通常就是一个单独的屏幕(页面), 它上 ...

  4. 编写Shader时的一些性能考虑

    编写shader时的一些建议:1.只计算需要计算的东西:2.通常,需要渲染的像素比顶点数多,而顶点数又比物体数多很多.所以如果可以,尽量将运算从PS移到VS,或直接通过script来设置某些固定值:3 ...

  5. WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要有三种实现方式 ...

  6. 菜鸟级别的WCF入门学习

    这两天学习WCF,看了MSDN上的入门教程,和查找了一些网上给的例子,简单的实现了一下,感觉应该很适合我这种菜鸟级的选手看了. 1.新建一个项目--WCF--WCF服务应用程序 用的是MSDN上的加减 ...

  7. 依赖注入(DI)与服务容器(IoC)

    参考文章:http://www.yuansir-web.com/2014/03/20/%E7%90%86%E8%A7%A3php-%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A ...

  8. PHP实现简易blog

    最近,有时间看了点PHP的代码.参考PHP100教程做了简单的blog,网易云课堂2012年的教程,需要的可以找一下,这里面简单的记录一下. 首先是集成环境,这里选用的WAMP:http://www. ...

  9. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  10. Android中Services简析

    Services是Android中四大基础组件(Activities. Services. Content Providers. BroadCast Receivers)之一,主要用于在后台长时间运行 ...