css权重、行级块级元素、盒子模型、层模型

css权重

  !important.          正无穷
  行间样式              1000
  id                    100
  class|属性|伪类         10
  标签选择器               1
  通配符                   0

行级元素、块级元素、行级块元素

   1.行级元素 内联元素  inline 
        feature: 内容决定元素所占位置
                 不可以通过css改变宽高
            标签：span、strong、em、a、del

   2.块级元素  block
        feature: 独占一行
                 可以通过css改变宽高
            标签： div、p、ul、li、ol、form、address

   3.行级块元素  inline-block  (凡是带有inline的元素，都有文字特性)
        feature: 内容决定大小
                 可以改变大小
            标签： img

ps. 行级元素、块级元素、行级块元素可以互相转化

     span{ display:inline; || display:block; ||display:inline-inline; }
     div{ display:inline; || display:block; ||display:inline-inline;  }
     img{ display:inline; || display:block; ||display:inline-inline;  }

盒子模型、层模型

定位

1.absolute
    脱离原来位置进行定位
    最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位 

2.relative
    保留原来位置进行定位
    相对于自己原来的位置进行定位 
    
3. fixed
    多用于相对于浏览器页面固定定位

代码

结果（body默认8px）

代码

初始（没有定位）–> 加定位（position: absolute;）

fixed定位

固定在左边

 *{
       margin: 0;
       padding: 0;
   }
   div{
       position: fixed;
       left: 0px;
       top: 300px;
       width: 50px;
       height:110px;
       background-color:lightgrey;
       color: blueviolet;
   }

效果

居中固定定位

*{
       margin: 0;
       padding: 0;
   }
   div{
       position: absolute;   /* 相对于文档居中*/
       /* position: fixed;相对于浏览器居中 */
       left: 50%;
       top: 50%;
       width: 100px;
       height:100px;
       background-color:lightgrey;
       margin-left:-50px;
       margin-top:-50px;
   }

效果

两栏布局

<div class="left"></div>
<div class="right"></div>

*{
       margin: 0;
       padding: 0;
   }
    .left{
       margin-right: 100px;/*移除right的位置*/
       height:100px;
       background-color: #123;
   }
   .right{
       position: absolute;
       right: 0px;
       top: 0px;
       opacity: 0.5;/* 透明度*/
       width: 100px;
       height: 100px;
       background-color: #fcc;
   }

效果

效果（注释掉margin-right: 100px;，也就是不移位）

例子1

html

    <div class="wrapper">
           <div class="content">
               <div class="box"></div>
           </div>
    </div>

css

 .wrapper{
       margin-left:100px;
       width: 200px;
       height: 200px;
       background-color: orange;
   }
   .content{
       position: relative;  
       margin-left:100px;
       width: 100px;
       height: 100px;
       background-color: black;
   }
   .box{
       position: absolute;  /*position: relative;*/
       left:50px;
       width: 50px;
       height: 50px;
       background-color:yellow;
   }

页面显示

例子2

居中固定五环

 <div class="plat">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
        <div class="circle5"></div>
   </div>

 *{
       margin: 0;
       padding: 0;
   }
   .plat{
       position: absolute;
       left: 50%;
       top: 50%;
       margin-left: -190px;
       margin-top: -95px;
       /* border: 5px solid black; 参考线 */
       height: 190px;
       width: 380px;
   }
   .circle1,
   .circle2,
   .circle3,
   .circle4,
   .circle5{
       position:absolute;
       width: 100px;
       height: 100px;
       border: 10px solid black;
       border-radius: 50%;
   }
   
   .circle1{
       border-color:rgb(0, 0, 143);
       left: 0;
       top: 0;
       z-index: 1;/* 垂直于屏幕的z轴，数值越大越靠近我们 */
   }
   .circle2{
       border-color:rgb(0, 0, 0);
       left: 130px; /* 一个圆环视觉大小为120px */
       top: 0px;
       z-index: 1;
   }
   .circle3{
       border-color: rgb(148, 4, 4);
       left: 260px;
       top: 0px;
       z-index: 1;
   }
   .circle4{
       border-color:rgb(238, 228, 96);
       left: 65px;
       top: 70px;
   }
   .circle5{
       border-color:rgb(87, 207, 93);
       left: 195px;
       top: 70px;
   }

效果（无参考线）

有参考线