黑马程序员技术交流社区

标题: 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