css 样式 哒哒哒 ----20181119

CSS参考手册

https://www.css88.com/book/css/values/color/rgba.htm

1.css字体样式

1. font-style　字体种类   字体1，字体2，字体3 　　“微软”，“宋体”，“serif”，“sans-serif”.......
2. font-size　字体大小　　100px or 1.2em(父级字体大小的1.2倍) 50%.....
3. font-weigh　字体粗细　　normal原始大小，bolder粗体，lighter细体  or  100-900其中400初始，700粗体...
4. font-color　　字体颜色　　pink粉红，blue蓝色，yellow，green，rgb，rgba，十六进制数.......

• rgb(红red,绿green,蓝色blue）  for example  rgb(#FF7F00,#FF7F00,#FF7F00)      

  RGB颜色查询对照表https://www.114la.com/other/rgb.htm

• rgba(红red,绿green,蓝色blue,透明度alpha)  for example  rgba(red, yellow,green,0.1)   透明度 0-1之间
• 

2.css文本样式

1. 　　text-align  文本位置　　left，right，bottom，top，justify两端对齐(水平对齐方式)
2. 　　vertical-align 　内容垂直方向的位置　　baseline基线，sub，super，text-top，middle中间，bottom，text-bottom
3. 　　word-spacing　　单词之间的距离  100px......
4. 　　letter-spacing　　字母之间的距离　case包围，upper上面的，lower减弱放下，line路线，throught穿过通过
5. 　　text-transform改变　　capitalize首字母大写，uppercase大写字母，lowercase小写字母，none
6. 　　text-decoration装饰品,装饰　　underline下划线，overline上划线，line-through中线，none
7. 　　line-height　　字体高度　　100px|50%|1.2em　　注意：当行高设置位px时字体大小不能大于行高(em|%j就不用在乎这些细节)
8. 

3.css背景样式

1. 　　background-color　　pink粉红，blue蓝色，yellow，green，rgb，rgba，十六进制数,.......
2. 　　background-repeat重复　　no-repeat，repeat-x，repeat-y
3. #　 background-attachment附件，依恋依附　　scroll成卷形，fixed图片固定的　　
4. 　　background-position　　x% y%| 上 右 下 左| 上  右左  下     if 只写一个的话默认第二个为居中
5. 　　bakcground-image　　url(图片地址)
6. 　　bakcground-color，image，repeat，attachment，position， 位置不定可随机组合
7. 注意事项:当通过background直接设置背景图片，再设置当前属性hover时，需要设置background-color属性，不然会使图片背景也被覆盖详细请见面https://www.cnblogs.com/ruanjiang/p/9992300.html

4.css列表样式

1. 　　list-style-type　　无序列表（disc圆点，circle空圆心，square正方体实心，none）  or   有序列表（none无标记，decimal从1开始的整数..........）
2. 　　list-style-image　　url（）
3. 　　list-style-position 　　ouside外面的默认，inside环绕文本
4. 　　list-style　　可随机组合，but (type优先级高于image)

5.css盒模型

　　　　　　　　　　　　

　　如图所示 高度，宽度，外边距，内边距关系

1. 　　height  高度(内容高度) 100px || em || %||auto       for example  max||min-height:20px; 
2. 　　width 宽度(内容物宽度) 100px|| em || %||auto       for example max||min-20px;
3. 　　margin 外边距(最外面的框框在padding 之外，两个内容物的距离 )  100px|| em || %||auto   【 margin 上，右，下，左       or     上 ，右左， 下     or     上 下 ，右左】
4. 　　padding 内边距(高度or 宽度 与外边距margin的距离) 100px|| em || %　　【 padding 上，右，下，左       or     上 ，右左， 下     or     上 下 ，右左】

 6.css 边框属性

1. 　　border-style：none无边框 ||  hidden ||  dotted点状边框  ||  dashed虚线 ||  solid实线 ||  double双线 || groove3D凹边框 ||  ridge3D垄状边框 || inset || inherit继承父级

• border ：宽度，样式，颜色
• border-top：宽度，样式，颜色
• border-bottom 宽度，样式，颜色      for example  border-bottom: 10px solid red;
• 
•  

7.css 浮动float 

1. float：left ||  right ||  none ||  inherit继承浮动;
2. 浮动副作用解决方法

• 手动给父元素添加高度
• 通过clear清除内部和外部浮动
• 给父元素添加overfloat 属性结合zoom：1使用
• 给父元素添加浮动

　　3.clear 属性

• clear：none ||  left ||  right ||  both

　

8.css 浮动position

1. position：rerelative ||  absolute ||  fixed生成绝对定位的元素，相对于浏览器窗口进行定位。||  inherit
2. z-index ：number 设置元素的重叠顺序，依赖于定位属性
3. absolute:

   如果top和bottom一同存在的话，那么只有top生效。

   如果left和right一同存在的话，那么只有left生效。