(三)css之浮动&定位

  众所周知,一个页面可能包含多个div,如何对这些div进行排列,以便具有较好的显示效果呢?

  css提供了浮动和定位两个属性进行div的排列,下面主要针对浮动和定位进行详细地阐述。

  (一)何为浮动?

  浮动即是让div块向左或者向右靠拢,向左浮动(float:left);向右浮动(float:right).

  向左或者向右浮动时,当浮动块碰到前一个块或者边框时,则停止浮动。

  例如:1、向左浮动

      想左浮动,即是div块向左边移动,直到div块碰到左边框或者另一个div块,如上图右侧所示,代码如下

      html文件:

      <!--左浮动排列-->
      <div class="div1">
      <div class="div21" style="height:204px;width:304px">左浮动1</div>
      <div class="div21">左浮动2</div>
      <div class="div21">左浮动3</div>
      <div class="div21">左浮动4</div>
      <div class="div21">左浮动5</div>
      <div class="div21">左浮动6</div>
      <div class="div21">左浮动7</div>
      <div class="div21">左浮动8</div>
      <div class="div21">左浮动9</div>
      </div>

      css文件:

      .div1{
      width:600px;
      height:600px;
      border:1px solid red;
      margin-top:5px;
      margin-left:5px;
      float:left;
      padding-top:5px;
      padding-left:5px;
      padding-right:5px;
      }

      .div21{
      width:150px;
      height:100px;
      border:1px solid blue;
      background-color:pink;
      text-align:center;
      float:left;
      margin-left:2px;
      margin-top:2px;
      }

        2、向右浮动

      向右浮动,即是div块向右边移动,直到div块碰到右边框或者另一个div块,如上图左侧所示,代码如下

      html文件:

      <!--右浮动排列-->
      <div class="div1">
      <div class="div2" id="special">右浮动1</div>
      <div class="div2">右浮动2</div>
      <div class="div2">右浮动3</div>
      </div>

      css文件:

      .div1{
      width:600px;
      height:600px;
      border:1px solid red;
      margin-top:5px;
      margin-left:5px;
      float:left;
      padding-top:5px;
      padding-left:5px;
      padding-right:5px;
      }

      .div2{
      width:150px;
      height:100px;
      border:1px solid blue;
      background-color:pink;
      text-align:center;
      margin-left:2px;
      margin-top:2px;
      }

      #special {
      float:right;
      }

      (二)何为定位?

      只进行div块左右浮动,显然不能满足我们对网页的排版要求,这就要求我们对div的位置进行定位,利用div块的位置,进行排列。

      div块的位置可以分为:静态位置相对位置绝对位置固定位置

      

      1、 针对相对定位:

      

      2、绝对定位

      

      (三)优先级的属性z-index

        

         number 的值越大,优先级越高,越靠上。number的值可以为负。

时间: 2024-10-15 11:59:37

(三)css之浮动&定位的相关文章

css 清除浮动 定位 z-index属性

当一个父元素包含多个浮动的子元素的时候,子元素的浮动确定了他们的位置,但是子元素不会影响父元素的宽度,使父元素塌陷,从而使父元素高度为0,这个时候可以为父元素清除浮动,从而阻止父元素塌陷. 1.overflow方法 对父元素设置overflow:hidden: 但是overflow清除浮动会有一些缺点. 2.clearfix方法 清除浮动更好的方法是clearfix "clearfix"技巧是基于在父元素上使用":before"和":after"

CSS—DIV浮动定位 消除影响

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>消除浮动影响</title><style type="text/css"> #d0,p{ border: 1pX solid red; width: 400PX; } #d1,#d2,#d3{ width:100px; height: 100PX; margin: 10PX

归纳篇(一)CSS的position定位和float浮动

近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位: 3.static:默认值,没有定位,元素出现在正常的文档流中; 4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动: 5.sticky:(CSS3)有兼

Css3之基础-8 Css 浮动(定位,浮动定位)

一.CSS 定位概述 定位概述 - 定位: 定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置 - 普通流定位 - 浮动定位 - 相对定位 - 绝对定位 普通流定位 - 页面中的块级元素框从上到下一个接一个地排列 - 每一个块级元素都会出现在一个新行中(比如<p>元素.<div>元素) - 元素框之间的垂直距离是由框的垂直外边距计算出来的 - 内联元素将在一行中从左到右排列水平布置 - 不需要从新行开始 - 可以使用水平内边距.边框和外边

CSS彻底研究(3)-浮动,定位

CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定. II . 演示规则 准备代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&qu

CSS中的定位与浮动

CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:static,相对定位:relative,绝对定位:absolute. static: 采用默认定位时,一般可以不用设置position样式. 各个元素是按照文档流的形式从上往下排,同时保证块状元素独占一行的原则. relative : 生成相对定位的元素,相对于其正常位置进行定位,同时配合top, b

CSS定位机制之浮动定位float

一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果希望块元素在页面中水平排列,可以使块元素脱离文档流(使用float使元素浮动) 元素浮动脱离文档流之后,原有的位置不会保留,会被其他文档流元素占据. (二). 当设置了浮动定位后(float属性非none的值),元素会立即左上或右上浮动,而浮动元素会盖住文档流元素.如图一所示,框1设置浮动之后脱离文档流

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow

css清除浮动float的三种方法总结【转载自https://my.oschina.net/leipeng/blog/221125】

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3