css常用样式

1.背景background

background 简写属性，作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复
background-size 设置背景的大小(兼容性

常用属性

• background-position：默认左上角
  x y
  x% y%
  [top | center | bottom] [left | center | right]

• background-repeat
  no-repeat：背景图片在规定位置
  repeat-x：图片横向重复
  repeat-y：图片纵向重复
  repeat：全部重复

• background-size
  100px 100px
  contain
  cover

• background-color: #F00;

• background-image: url(background.gif);

• background-repeat: no-repeat;

• background-attachment: fixed;

• background-position: 0 0;

可以缩写为一句：background: #f00 url(background.gif) no-repeat fixed 0 0;

2.隐藏or透明:元素“看不见了”,让用户在当前页面展示的视口里看不见元素

好用的小技巧

以下消失都是有前提条件的
height: 0; width: 0; padding: 0; margin: 0; border: 0; ... 等；
position: absolute; left: 1000000px; top: 100000px; ...等；
z-index: -1000; ...等；

常规方法：（推荐）

• display: none;消失，不占用位置
• visibility: hidden;和opacity:0 类似
• opacity: 0;透明度为0，整体
• background-color: rgba(0, 0, 0, 0.2);* 只是背景色透明

区别：

display: none; 从文档流消失，不占据文档空间，但是还存在DOM树中
visibility: hidden; 和 opacity: 0; 还是会占据文档空间
display: none; 和 visibility: hidden; 绑定的事件不会触发
opacity: 0; 的元素绑定的事件还是会触发事件

注意

• display
  对于元素显隐来说，最常见就是display: none; | display: block;，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等，如果要适用于任何元素需要提前储存元素的display值

• visibility
  visibility: hidden;与display: none;作为隐藏元素的两种方式，常常被人们拿来比较。其实区别很简单，前者不脱离文档流，保留隐藏之前元素占据的物理区域；而后者则脱离文档流，如果重新显示则需要页面的重新绘制。
  还有一点区别却很少人提到，如果父级设置display: none;子级设置display: block;也不会显示；而如果父级设置visibility: hidden;子级设置visibility: visible;时子级会显示出来
  visibility 还可应用 transition 属性。因为 visibility 是离散步骤，在0到1数字范围之内，0表示隐藏，1表示显示。

• opacity
  对于元素显隐，opacity的使用频率也挺多。opacity的好处是，即使opacity为0的元素，仍然可以接受javascript事件，这是display: none;和visibility: hidden;所不具备的

复杂方法（装逼必备）

• overflow
  overflow: hidden;代表着溢出隐藏。我们可以利用父级的overflow: hidden;配合父级的height: 0;或width: 0;来实现元素的显隐；

• clip
  CSS裁剪clip这个属性平时用的不多，当clip: rect(top, right, bottom, left);中的top >= bottom，或者left >= right时，可实现元素的隐藏效果，效果类似于visibility: hidden;
  注意：clip属性只能应用在绝对定位或固定定位元素上

• hidden
  HTML有个hidden全局属性，专门用于显示隐藏元素，与display: none;的作用类似，元素隐藏时脱离文档流，无法接受javascript事件
  注意：IE7-不支持，IE10-不支持test.hidden = 'hidden';写法，只支持test.setAttribute('hidden', 'hidden');写法

• transform
  CSS变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果。通过不同的变形函数可以实现元素显隐效果
  注意：IE9-浏览器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀

• 覆盖
  利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸，通过控制伪元素的定位属性，实现显隐效果

• 偏移
  元素显示隐藏的另一种常见思路是偏移，将元素移动到视窗范围外，也可以实现等价的显隐效果。

行高line-height

a.ine-height: 2与line-height: 200%的区别

• 两个属性设置给具体的某一个元素时是没有区别的。
• 区别就是他们设置两种不同的属性后其子元素表现样式上的区别：
  1.当父元素设置line-height: 200%;属性时 父元素设置这个属性后，其所有子元素的行高都是一个具体的值为固定大小，即他们父元素字体大小的200%。
  2.父元素设置line-height: 2;属性时 父元素设置这个属性后，其所有子元素的行高都是自身字体大小的2倍为固定大小。

b.height = line-heihgt 来垂直居中单行文本

作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。