css知识回顾,定位,精灵图,文本省略等等

css定位

  1. 为什么需要定位-因为标准流和浮动流无法快速实现
  2. 定位的组成:定位模式+边偏移
  3. 边偏移使用top,buttom,right,left属性移动
  4. 静态定位:position:static(很少使用)
  5. 相对定位:position:relative(位置保留)
  6. 绝对定位:position:absolute(先对于父元素)父元素无定位或者没有父级以浏览器为标准,以最近的有定位父元素对齐(不在占有位置)
  7. 子绝父相
  8. 巧妙使用>

固定定位

  1. position:fixed(不占有位置)
  2. 以可视化的窗口为参照点,使用算法固定在版心的位置
  3. 先定义浏览器的一半,left/right:50%,在使用margin-left:版心的一半

粘性定位

  1. postion:sticky;top:0占有原来的位置(浏览器可视区)

定位叠放次序

  1. z-index数值越大盒子越靠上
  2. 层叠性,属性都相同时候
  3. 只有定位的盒子才有z-index属性

绝对定位盒子局中

  1. margin:0 auto;加了绝对定位的盒子无法适用
  2. 与定义版心位置的方法类似margin为负值
  3. 相对定位不脱流不影响

定位的特殊特性

  1. 行内元素添加绝对或者固定定位,可以直接设置w和h
  2. 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小使内容的大小

浮动和定位

  1. 浮动想让文字环绕,只会压住下面标准流的盒子,不会压住盒子中的文字(图片
  2. 定位会压住下面标准流的所有内容。绝对定位,固定定位

元素的显示和隐藏

  1. display:none;隐藏对象(经常使用)
  2. display:block;显示对象
  3. display不在占有原来的位置
  4. visibility:hidden;(隐藏之后继续保留原来的位置)
  5. overflows:hidden;隐藏溢出,比如:浮动溢出(父元素无高度的时候),overflows:scroll
  6. 有定位的盒子慎用隐藏元素

精灵图

background-position:x y; xy的正方向为向右向下,所以一般都是负值

  1. 取消表单轮廓outline:none
  2. 防止拖拽文本,textarea{resize:none}

vertical-align属性

  1. 行内元素和行内块元素,可以使图片和文字对齐
  2. verticla-align: middle;图片和文字垂直局中
  3. 解决图片底部有空格-加vertical-align属性(转化为块级元素)

文本省略号

单行

  1. 单行省略号,强制一行显示white-space:nowrap
  2. 隐藏溢出overflow:hidden
  3. 省略号代替text-overflow:ellipsis

多行

  1. 第一种方法兼容性有问题

查看多行使用的代码

1
2
3
4
5
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

margin负值的使用

  1. 去除边框的时候可使用
  2. 如果li有定位加z-index提高定位,如果没有定位,添加相对定位即可