前端----css总结

1,权重计算:
 权重:id  class  标签--->>>顺序不变
 当权重一样时,显示后来设置的
 继承下来的标签,权重为0
 若权重为0,那么谁描述的近,就显示谁
 若权重为0,描述的一样近的时候,回归原始状态(数权重)

2,padding:

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
   
/*上下左右*/
padding: 20px;

3,bordr: 10px solid red;
 border-radius:10px; 设置圆角

4,标准文档流的现象:  空白折叠现象----高矮不齐，底边对齐----自动换行，一行写不满，换行写

5,块级---行内
行内元素：
 与其他行内元素并排；
 不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
 霸占一行，不能与其他任何元素并列；
 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
display:inline  块级转为行内
display: block;  行内转块级
display: inline-block;   转为行内块

6,浮动
四大特性:
  1.浮动的元素脱标
  2.浮动的元素互相贴靠
  3.浮动的元素由"子围"效果
  4.收缩的效果

注意:所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高.
     要浮一起浮,有浮动就要清除浮动.
  若一个盒子浮动,另一个是行内的话不会顶进去,另一个是块级的话会顶进去,原因就是浮动有自围效果.

清除浮动:
  1,给父盒子设置高度-----------不灵活,所以一样不用,万年不变的导航栏可以用
  2,clear:both 
  3,伪元素清除法     .clearfix:after{
         content:".";
         display:block;
         visibility:hidden;
         height:0;
         clear:both;}
  4,overflow:hidden     visible  内容不会被修剪，会呈现在元素框之外。
                              hidden   内容会被修剪，并且其余内容是不可见的。
                              scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
                               auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
                              inherit    规定应该从父元素继承 overflow 属性的值。
BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522  (有时间就 看一下)

7,margin用法:
 塌陷问题:
  两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。
  当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
 margin：0 auto;注意点：
  1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
  2.只有标准流下的盒子 才能使用margin:0 auto;
  当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
  3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
  
8,文本属性:
 文本对齐------------------------
  text-align 属性规定元素中的文本的水平对齐方式。
  属性值：none | center | left | right | justify
 文本首行缩进--------------------
  text-indent 属性规定元素首行缩进的距离，单位建议使用em
 文本修饰
  text-decoration属性规定文本修饰的样式
  属性值：none(默认)|underline(下划线)|overline(定义文本上的一条线)|line-through (定义穿过文本下的一条线)
  inherit(继承父元素的text-decoration属性的值。)
 行高
  line-height就是行高的意思，指的就是一行的高度。
8,字体属性:
 字体大小
  font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。
 字体粗细
  font-weight表示设置字体的粗细
  属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细)
  100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值） 
 字体系列
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif 
  如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。

9,行高:
 line-height
 针对单行文本垂直居中--------
 公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。
 针对多行文本垂直居中--------
 行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
 第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
 第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
   
10,font-family------ https://www.cnblogs.com/majj/p/9040281.html  (马哥博客详解)
  
11, 导航栏示例:
css代码:

{
 *{
  padding:;
  margin:;
  }

 ul{
  list-style: none;
 }
 .nav{
  width: 960px;
  /*height: 40px;*/
  overflow: hidden;
  margin: 100px auto ;
  background-color: purple;
  /*设置圆角*/
  border-radius: 5px;
 }
 .nav ul li{
  float: left;
  width: 160px;
  height: 40px;
  line-height: 40px;
  text-align: center;
 }
 .nav ul li a{
  display: block;
  width: 160px;
  height: 40px;
  color: white;
  font-size: 20px;
  text-decoration: none;
  font-family: 'Hanzipen SC';
 }
 /*a标签除外，不继承父元素的color*/

 .nav ul li a:hover{
  background-color: red;
  font-size: 22px;
 }
}

html代码:

{
 <div class="nav">
  <ul>
   <li>
    <a href="">58同城</a>
   </li>
   <li>
    <a href="">腾讯</a>
   </li>
   <li>
    <a href="">网站导航</a>
   </li>
   <li>
    <a href="">网站导航</a>
   </li>
   <li>
    <a href="">网站导航</a>
   </li>
   <li>
    <a href="">网站导航</a>
   </li>
  </ul>
 </div>
}  

12, 颜色:
三原色:rgb:红,绿,蓝.  例  rgb(255,255,255)白色      rgb(0,0,0)黑色  
 background-color:rgb(255,0,0,透明度) 
进制表示法:  #ff0000 <<<--->>> #f00  
 扩展:#111---#999 代表各种灰色
 
background-image:表示设置该元素的背景图片,水平方向和垂直方向都平铺

background-repeat:表示设置该元素平铺的方式 ,给元素设置padding之后，发现padding的区域也会平铺背景图片。
 repeat
 背景图像将在垂直方向和水平方向重复。
 repeat-x
 背景图像将在水平方向重复。
 repeat-y
 背景图像将在垂直方向重复。
 no-repeat
 背景图像将仅显示一次。
 inherit
 规定应该从父元素继承 background-repeat 属性的设置。 
实例:标头大广告图片居中大图效果----  
 background-image:url("../cms_15337986888589_wGuOE.jpg");
    background-repeat: no-repeat;
    background-position: center 0;
 
精灵抠图神技:
 先设一个div,然后background-image:url()倒入一张图片进行background-repeat设置,div设置为目标图片大小,
 最后通过background-position调节背景图片位置,获得目标图片.
实例:  
  {目标图片大小为 240*186 ,把原图向上移动150px,像左移动190px得到目标图片
  
   *{
    margin: 0;
    padding: 0;
   }
   div{
    background-image: url("./bbI.jpg");
    background-repeat: no-repeat;
    height: 186px;
    width: 240px;
    background-position: -190px -150px;
   }
  
  }
  
13定位:<重点>

position : static   --->>>静态定位
position : relative --->>>相对定位
position : fixed    --->>>固定定位
position : absolute --->>>绝对定位
  
----相对定位:  >>>>一般用于微调元素,当做父相子绝的参考
  ----参考点为原来位置
  ----不要做压盖现象,会留坑(占着茅坑不拉屎)
  ----设置定位后,它的层级大于标准盒子
  ----相对定位的盒子不脱标
  用法--->>>设置本标签为position:relative    用top bottom left right 在本标签做位置调节,他是以本标签原来位置为起点参考移动的.

注:页面与浏览器的区别:
   ----页面:网站的整个页面,比可浏览器大,被内容撑起来的区域
   ----浏览器:打开浏览器的窗口,就电脑屏幕那么大
----绝对定位:
  ----脱标
  ----做压盖现象,层级高
  ----单独设置绝对定位时:
    ----top描述时,参考点为页面的左上角
    ----bottom描述时,参考点为浏览器的左下角
  ----父子盒子嵌套时:
    ----父设为相对定位,子设为绝对定位,子(top bottom left right)会以父盒子的左上角作为参考点.
    ----多个父亲时,子元素以最近的设为相对定位的父盒子的左上角为参考点
  盒子居中:
   >>>>left:50%
   >>>>margin-left:-(一半盒子宽度)px
    
----固定定位:  用top bottom left right做位置调节
  ----脱标
  ----层级提高
  ----参考点为浏览器的左上角

Z-index:
 ----z-index值表示谁压着谁,数值大的压盖数值小的
 ----只有定位的元素才有z-index(固定,绝对,相对都行),浮动元素不能使用
 ----z-index值没有单位,就是一个正整数,默认为0如果值一样,谁写在html后面,谁在上边压盖别人;定位的元素压盖没定位的.
 ----从父现象,父亲怂了,儿子再牛逼也扯淡.
  
补充:outline:none  干掉input外边线
 box-shadow:0 15px 31px rgb(0,0,0,.5)阴影
 做浮动阴影效果时,浮动位置是以原位置为参考的
 
 抖动效果---->>>>先把自己设为相对定位,然后:hover{top:-2px}
  
--------------------------------css完---------------------------------------