zoukankan      html  css  js  c++  java
  • css的浮动与定位


    • 显示与隐藏

    标签

    属性

    效果

    区别

    cssstyle

    display

    none

    元素不可见

    不占页面空间

    cssstyle

    visibility

    hidden

    元素不可见

    占页面空间



    • display的三个属性值显示效果

    属性

    效果

    display

    inline

    显示为内联元素

    display

    block

    显示为块级元素

    display

    inline-block

    显示为行内块级元素



    • overflow内容溢出

    属性

    效果

    overflow

    visible

    可见

    overflow

    hidden

    隐藏

    overflow

    scroll

    滚动

    overflow

    auto

    自动(最优)



    • float浮动

    属性

    效果

    float

    none

    不浮动

    float

    left

    向左浮动

    float

    right

    向右浮动



    • 子元素浮动不能超出父元素的范围

    • 兄弟元素设置相同浮动效果时,会自动进行排列,排列超出页面最大宽度会自动换行

    • 兄弟元素前一个未设置浮动,而后一个设置,后面元素浮动不能超过前面兄弟元素







    • 高度塌陷

    • * 块级元素高度 = 所有子元素高度 + padding + border

    • * 由于没有给父级元素设置高度 ,当子级元素设置浮动时 , 脱离了文档流 , 导致父级元素高度丢失效果称为高度塌陷
    • * 高度塌陷问题解决 —— 开启BFC block formatting context)块级格式化上下文环境
    •     * BFC特性:
    •         - 文档流中的元素不会被浮动的元素所覆盖
    •         - 子元素设置外边距时,不会传递给父元素
    •         - 元素可以包含浮动的子元素
    •    * 怎样开启BFC
    •         - 设置浮动(float
    •         - 设置元素显示为行内块级元素(inline-block
    •         - 将元素内容溢出设置为非visible值(hidden
    •         - 设置元素为绝对定位(position
    •         - 在所有子元素后设置一个子元素,并设置clear属性为both
    • position

    属性

    定位位置

    (相对偏移量)

    效果说明

    position

    static

    默认

    静态定位

    position

    absolute

    top/right/bottom/left

    绝对定位

    position

    relative

    top/right/bottom/left

    相对定位

    position

    fixed

    top/right/bottom/left

    固定定位



    • 区别

    类型

    是否脱离文档流

    情况描述



    绝对定位


    1.父级为body,相对于页面

    2.父级不为body,父级未开启定位,子级相对于页面

    3.父级不为body,父级开启定位,子级相对于父级

    相对定位

    X

    相对于元素本身位置,与父级无关

    固定定位

    相对于页面,一种特殊的绝对定位



    实践出真知~
  • 相关阅读:
    不务正业系列-浅谈《过气堡垒》,一个RTS玩家的视角
    [LeetCode] 54. Spiral Matrix
    [LeetCode] 40. Combination Sum II
    138. Copy List with Random Pointer
    310. Minimum Height Trees
    4. Median of Two Sorted Arrays
    153. Find Minimum in Rotated Sorted Array
    33. Search in Rotated Sorted Array
    35. Search Insert Position
    278. First Bad Version
  • 原文地址:https://www.cnblogs.com/NolaLi/p/7724945.html
Copyright © 2011-2022 走看看