zoukankan      html  css  js  c++  java
  • CSS的常用属性(三)

    静态定位

    position: static (默认) 标准流

    绝对定位

    position: absolute

    特点:

    1. 元素使用绝对定位之后,不占据原来的位置(脱标)
    2. 元素使用绝对定位,位置是从浏览器出发
    3. 嵌套的盒子,父盒子没有使用定位,子盒子使用绝对定位,子盒子位置是从浏览器出发
    4. 嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素出发
    5. 行内元素使用绝对定位,转化成行内块元素

    注意: 使用绝对定位的元素可以覆盖到其他元素上面,使用z-index属性来控制堆放次序

    相对定位

    position: relative

    特点:

    1. 使用相对定位,位置从自身出发
    2. 还占据原来的位置
    3. 行内元素使用相对定位,不能转成行内块元素

    补充: 常用的定位方式为子绝父相(子元素绝对定位,父元素相对定位)

    固定定位

    position: fixed

    特点:

    1. 位置从浏览器出发
    2. 固定定位之后,不占据原来的位置(脱标)
    3. 元素使用固定定位,会转化成行内块元素

    隐藏元素

    overflow: hidden 溢出隐藏

    visibility: hidden 隐藏元素(隐藏之后还占据原来位置)

    display: none 隐藏元素(隐藏之后不占据原来的位置)

    补充:内容移除:text-indent: -5000em 或者 将元素高度设置为0,使用内边距将盒子撑开,给盒子使用overflow: hidden

    元素垂直对齐方式

    vertical-align: baseline 设置元素的垂直对齐方式 

    baseline(默认)  元素放置在父元素的基线上

    text-top  把元素的顶端与父元素字体的顶端对齐

    text-bottom  把元素的底端与父元素字体的底端对齐

    middle  把此元素放置在父元素的中部

  • 相关阅读:
    MySql 踩坑小记
    Redux 实现过程的推演
    正则表达式的一些探索(偏JavaScript)
    [python工具] 如何使用plotly制作散列图
    使用epoll实现一个udp server && client
    python 实现一个简单tcp epoll socket
    [原创]差分放大器阻抗匹配计算+阻抗计算小工具
    将博客搬至CSDN
    [转]谈NAND Flash的底层结构和解析
    [原创]Fashion汽车定位器拆解
  • 原文地址:https://www.cnblogs.com/yushangzuiyue/p/8343880.html
Copyright © 2011-2022 走看看