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 变成块级元素
|
|