CSS基础(五):定位

CSS定位机制

CSS 有三种基本的定位机制:相对定位、浮动和绝对定位。

相对定位

相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

如果将box2的框 top 设置为 50px,那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 20 像素,那么会在元素左边创建 20 像素的空间,也就是将元素向右移动。

只要box2设置了position为relative ,box1和box3始终不会因为box2的改变而改变。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>相对定位</title>
    <style type="text/css">
      .box
        { 
          width: 200px;
          height:100px;
          border: 1px solid #F00;
          float: left;
          margin:0 0 0 30px;
        }
        .box2
        {
          position: relative;
          left: 20px;
          top: 50px;
        }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="box">box1</div>
      <div class="box box2">box2</div>
      <div class="box">box3</div>
    </div>
  </body>
</html>

浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

1.当都不设置浮动时:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>浮动</title>
    <style type="text/css">
      #main
      {
        border: 1px solid #000;
        padding:10px;
      }
      .box
        { 
          width: 200px;
          height:100px;
          border: 1px solid #F00;
          margin:10px 0 0 30px;
        }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="box">box1</div>
      <div class="box">box2</div>
      <div class="box">box3</div>
    </div>
  </body>
</html>

2.当设置box1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了box1 2,使box12 从视图中消失。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>不设置浮动</title>
    <style type="text/css">
      #main
      {
        border: 1px solid #000;
        padding:10px;
      }
      .box
        { 
          width: 200px;
          height:100px;
          border: 1px solid #F00;
          margin:10px 0 0 30px;
        }
        .box1
        {
          float:left;
        }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div>
      <div class="box box3">box3</div>
    </div>
  </body>
</html>

3.当都设置为浮动时,box1 向左浮动直到碰到包含框,另外两个box向左浮动直到碰到前一个浮动框。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>不设置浮动</title>
    <style type="text/css">
      #main
      {
        border: 1px solid #000;
        padding:10px;
        overflow: hidden;
      }
      .box
        { 
          width: 200px;
          height:100px;
          border: 1px solid #F00;
          margin:10px 0 0 30px;
          float: left;
        }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div>
      <div class="box box3">box3</div>
    </div>
  </body>
</html>

4.清除浮动,要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

更多请参考

绝对定位

设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

当设置box2的position为absolute时,它就会脱离文档,相当于不存在。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>绝对定位</title>
    <style type="text/css">
      .box
        { 
          width: 200px;
          height:100px;
          border: 1px solid #F00;
          float: left;
          margin:0 0 0 30px;
        }
        .box2
        {
          position: absolute;
          left: 20px;
          top: 50px;
        }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="box">box1</div>
      <div class="box box2">box2</div>
      <div class="box">box3</div>
    </div>
  </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏24K纯开源

Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个...

1.1K60
来自专栏欧阳大哥的轮子

CSS中的float定位技术在iOS上的实现

几乎所有会WEB前端开发的同学都知道CSS中有一个float属性用于实现HTML元素的浮动定位展示。float 属性定义元素在哪个方向浮动。以往这个属性总应用于...

9120
来自专栏三木的博客

HTML概要

HTML CSS Javascript 的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS...

36590
来自专栏向治洪

android decorView详解

摘要 一、DecorView为整个Window界面的最顶层View。 二、DecorView只有一个子元素为LinearLayout。代表整个Window界面...

21860
来自专栏编程心路

Bootstrap学习文档(二)

Bootstrap 中把一些标签的样式重置了,也即是为一些标签设置了带有 Bootstrap 风格的样式,如 h 标签,p 标签等等,这其中包含了 HTML5 ...

18450
来自专栏别先生

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

jQuery EasyUI学习网址:http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html jQuer...

658100
来自专栏欧阳大哥的轮子

iOS的MyLayout布局体系--浮动布局MyFloatLayout

    在MyLayout的6大布局中,每种布局都有不同的应用场景。且每种布局的子视图的约束机制不一样:线性布局MyLinearLayout、表格布局MyTab...

17830
来自专栏HTML5学堂

Form表单 问题多多(中)

HTML5学堂 - 刘国利:在上一篇的博文当中,主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中,我主要就具体的样式实现进行一下讲解,并提一下表单相关的浏览器...

37250
来自专栏林德熙的博客

win10 uwp 在 Canvas 放一个超过大小的元素会不会被裁剪

我尝试在一个宽度200高度200的 Canvas 放了一个宽度 300 高度 300 的元素,这个元素会不会被 Canvas 裁剪了? 经过我的测试,发现默认是...

10610
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

33940

扫码关注云+社区

领取腾讯云代金券