黑马程序员技术交流社区

标题: CSS定位与技巧 [打印本页]

作者: 我真不想秃顶    时间: 2019-3-18 20:34
标题: CSS定位与技巧
CSS书写顺序:
  1 布局定位属性:display/position/float/clear/visibility
  2 自身属性:width/height/margin/padding/border/background
  3 文本属性:color/font/text-decoration/text-align
  4 其他属性:content/cursor/border-radius/box-shadow

定位:定位是用来布局的。
  定位=定位模式+边偏移。一般有定位就有边偏移
  定位模式(position): 1.静态定位 (static)  无定位的意思,没有边偏移,几乎不用。
                        2.相对定位(relative) 相对盒子之前的位置移动。 原来的标准流中的区域继续占有
                           3.决定定位(absolute) 父元素没有设置定位就以浏览器为准,如果父元素有定位,那么子盒子就以父级为准。
                        子绝父相:子元素用绝对定位,父元素用相对定位
                        4.固定定位(fixed)是绝对定位的一种特殊形式 完全脱标,不占位置。 只认浏览器的可视窗口,跟父级没有关系,不随着滚动条滚动。
  绝对定位水平居中 left50%(先走父级宽度的一半,然后回走自身的一半)
  定位元素的层级属性:z-index 只有设置了定位(静态定位除外)的元素才有

  CSS高级技巧
  1 display:none 隐藏   display:block 显示   不保留位置
  2 visibility:hidden  隐藏 visibility:visible 显示  保留位置
  3 overflow 溢出
    visible 不剪切也不添加滚动流(默认)
    hidden  超出盒子大小的部分隐藏
    scroll  不管内容 添加滚动条 不会超出盒子的大小
    auto  内容超出盒子才显示滚动条
  4 鼠标样式 cursor   
   default(默认)
   pointer 小手
   move  移动
   text  文本
   not-allowed  禁止
  5 垂直居中 vertical-align:middle  只针对于行内元素或者行内块,对块级元素不生效
    基线对齐 vertical-align:boseline
    居中对齐 vertical-middle
    顶对齐   vertical-align:top
  6  去除图片底部空隙
    1 只要不是默认基线对齐
    2  display:block 变成块级元素







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2