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也可以设置负值,设为负值时,在所有元素之下

  • 相关阅读:
    什么是 Hystrix?它如何实现容错?
    什么是 Spring Cloud Bus?我们需要它吗?
    SpringBoot和SpringCloud的区别?
    Eureka和zookeeper都可以提供服务注册与发现的功能,请说说两个的区别?
    REST 和RPC对比?
    XML技术的作用?
    iHTML 的 form 提交之前如何验证数值文本框的内容全部为数字
    XML常用解析API有哪几种?
    XML的解析方式有哪几种?有什么区别?
    XML文档约束有哪几种?有什么区别?
  • 原文地址:https://www.cnblogs.com/21-forever/p/10849768.html
Copyright © 2011-2022 走看看