zoukankan      html  css  js  c++  java
  • 前端之CSS布局模型

    一、css布局模型:

      流动模型(Flow

      浮动模型(Float

      层模型(Layer

    1、流动模型:

    页面在没有设置任何css样式,元素按照本身的特性在浏览器中显示,这样的布局模型称为流动模型;

    2、浮动模型:

    ①.浮动属性

    float:none(默认值,不浮动)|left(左浮动)|right(右浮动);

    ②.清除浮动

    clear:none|both|left|right;

      none:默认值,允许两边有浮动

      both:清除左浮动和右浮动

      left:清除左浮动

      right:清除右浮动

    注:当本元素前面有元素浮动对本元素造成了影响,给本元素添加清除浮

    在网页中使用float属性进行页面布局;

    当元素设置了float属性后,就脱离了正常的文档流;

    3、层模型:

    position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);

    ①.绝对定位(absolute

    绝对定位的参照物:

    a)是绝对定位元素的父包含块(参照物与绝对定位元素是包含与被包含的关系);

    b) 父包含块必须具有position定位属性:

    如果找不到满足以上两个条件的父包含块,那么相对于html,即浏览器窗口进行绝对定位

    注:以下两种情况,元素会脱离正常的文档流,左右marginauto将会失效

        1)当元素设置了float属性

        2)当元素设置了绝对定位

    ②.相对定位(relative)

    相对定位的参照物:

    相对于偏移前的位置进行定位

    相对定位不会脱离正常的文档流

    注:relativeabsolute结合使用

    给父元素设置relative,给子元素设置absolute,在网页布局中常这样结合使用制作一些特殊效果

    ③.固定定位(fixed

    固定定位的参照物:屏幕窗口

    注:a)固定定位的元素也会脱离正常的文档流

         b)固定定位的元素不随滚动条滚动

    ④、定位层叠属性设置:

    z-index:auto|数值(一般为整数);

    注:a)当没有设置z-index属性时,后写的元素优先显示在上层,设置后,数值越大,越靠上

        b) z-index也可以设置负值,设为负值时,在所有元素之下

  • 相关阅读:
    点击按钮在表格的某一行下,在添加一行(HTML+JS)
    13
    12 stark组件之pop,按钮,url,页面
    11 stark组件之delete按钮、filter过滤
    解决 AttributeError: 'ForeignKey' object has no attribute 're'
    360面经
    4 django篇
    0- 26个面试经典问题回答
    如何学习??
    LeetCode
  • 原文地址:https://www.cnblogs.com/21-forever/p/10849768.html
Copyright © 2011-2022 走看看