您现在的位置是：网站首页> 编程资料编程资料

CSS3定位和浮动详解深入理解css布局之定位与浮动清除css浮动的三种方法小结浅谈CSS浮动的那点事儿CSS使用float属性设置浮动元素的实例教程CSS浮动所差生的内容溢出问题及清除浮动的方法小结浅谈CSS浮动的特性

2021-09-05 940人已围观

简介 这篇文章主要为大家详细介绍了CSS3定位和浮动的概念，以及实例代码讲解CSS3定位和浮动的使用方法，感兴趣的小伙伴们可以参考一下

本文为大家分享CSS3定位和浮动的基础概念，与使用方法，供大家参考，具体内容如下

一、定位

1、 css定位：

改变元素在页面上的位置

2、 css定位机制：

普通流：

浮动：

绝对布局：

3、 css定位的属性:

position 把元素放在一个静态的，相对的，绝对的，或者固定的位置中
top/left/right/botom 元素向上/左/右/下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素显示的对其方式
z-index 设置元素的堆叠顺序/用来设置元素的堆叠顺序，越大越在上方/

position的属性
static 静态的（默认）
relative 相对布局（默认的）
absolute 绝对布局 （和其他的标签无关联）
fixed 固定的（不会随着页面的滚动而动）

实例代码：

CSS Code复制内容到剪贴板
  1.   
  2.     "position1">
  
  •     "position2">
    •   
  •        
  •   
  •   
  • #position1{   
  •     width: 100px;   
  •     height: 100px;   
  •     background-color: blue;   
  •     position: relative;   
  •     left: 20px;   
  •     top: 20px;   
  •     /*用来设置元素的堆叠顺序，越大越在上方*/  
  •     z-index: 2;   
  • }#position2{   
  •     width: 100px;   
  •     height: 100px;   
  •     background-color: red;   
  •     position: relative;   
  •     left: 30px;   
  •     top: 10px;   
  •     z-index: 1;   
  • }   
  •   

    • 二、浮动

    float属性可用的值:
    left/right/none/inherit: 向左、右，不浮动，从父级继承。
    * float

    1.浮动后，脱离正常流，在浮动流中排列。任何元素都是作为块元素来显示，可设置宽高，内容撑开宽度。
    2.很多浮动块在一起的时候，他们总是找与自己最近的、浮动方向相同的块来确定自己的位置，如果被迫换行，则以这个最近的元素的高度为基准起新行

    clear属性： 去掉浮动属性（包括继承来的）
    意思和上面对应的一样

    需要清浮动的情况：

    子标签浮动后，父标签的高度无法被撑开，所以需要清浮动；
    新加入的标签，希望不受之前浮动元素的影响，则需要清浮动；

    1.clear:both; height:0; overflow:hidden;
    2.overflow:hidden; 触发layout 常用于清楚内浮动；
    3.after 伪对象：给当前对象设置
    .aa:after {content:”.”}
    .aa {display:inline-block;}
    .aa {display:block;}
    想办法 触发ie6的layout渲染机制，靠运气解决了很多bug，zoom：1可以触发！！！
    inline-block对内块 对外行；
    4.父标签一起浮动；
    5.position:absolute；清除浮动

    display
    display：block 以块元素显示；
    display：none 内容消失，不占空间；
    display：inline 以行内元素显示，可解决IE6的双倍BUG；
    display：inline-block 对内块，对外行。

    visibility：none
    隐藏，但是依旧占用空间，影响布局

    以上就是关于CSS3定位和浮动的全部内容，希望对大家的学习有所帮助。

    上一篇：CSS3制作气泡对话框的实例教程纯CSS实现气泡对话框尖角处理方案JS+CSS3实现的确认框和对话框弹出并关闭特效源码CSS3实现可兼容移动端的超酷弹出对话框效果源码jQuery结合Css3制作的多风格轻量级弹出动感对话框插件特效源码用纯css3和html制作泡沫对话框实现代码纯CSS代码实现各类气球泡泡对话框效果CSS实现对话框小尾巴功能

    下一篇：浅析CSS中calc()的使用CSS3 calc()会计算属性详解详解CSS 3 中的 calc() 方法浅谈css3中calc在less编译时被计算的解决办法CSS3 Calc实现滚动条出现页面不跳动问题 CSS3的calc()做响应模式布局的实现方法使用CSS3中的calc()属性来以算式表达尺寸数值初探CSS3中的calc()功能巧用CSS3的calc()宽度计算做响应模式布局的方法

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网