CSS标签分类，盒子模型，层模型

CSS属性引申

• hover伪类
  当鼠标移入执行选中的代码，将鼠标移出忽略此代码。

  选择器：hover{ }
  
  **伪类也有权重值的，它的权重值和class一样是10点**
  
  伪类当然不止hover一个，还有很多其他的伪类，我就不一一介绍了，暂时hover用的最多。
  
  

标签分类

• 行级元素 / 内联元素 / 行内元素 （ inline ）
  特点：
  1.不可以通过css改变他的宽高。
  2.内容决定了元素所占大小

  <span></span>
  <a></a>
  <strong></strong>
  <em></em>   
  

• 块级元素 （block）
  特点：
  1.可以通过css改变他的宽高。
  2.独占一行，没满足一行就占用一行，没满足两行就占用两行

  <div></div>
  <p></p>
  <h1></h1>~~~~<h6></h6>
  <adress></adress>
  <ul>
      <li>
      </li>
  </ul>
  <table></table>
  <form></form>
  

• 行级块元素 （inline-block）
  特点：
  1.可以通过css改变他的宽高。
  2.不独占一行

  <img>    
  <input> 
  

自定义行级元素 display：inline；
自定义块级元素 display：block；
自定义行级块元素 display ：inline-block；

---

css企业开发经验

• 先定义功能，再用功能修饰结构
  将css相同的属性提取出来，为特定的功能封装好css属性，再赋给html。

• 自定义标签

  1. 弥补一些标签天生的不足
  2. 利用一些废弃标签创造我们需要的新标签

     <i></i>
     <b></b>
     

• 通配符选择器初始化

• 一般不给标签加id选择器
  一般通过添加class类名来选择的，因为id代表唯一标示，我们一般用id来做标记，后台的php会提取出来id，然后换成他们的标记，因此可能会导致我们的选择器选择不出来我们想要的标签。

---

盒模型问题

• 盒模型的四个部分
  1. 外边距 margin值可以为负数
  2. 边框 border
  3. 内边距 padding
  4. 内容区 content【我们设置的width，height】
• 盒子的三部分
  盒子 = 边框 + 内边距 + 内容区
• 内边距
  包含4个值：padding-top padding-right padding-bottom padding-left；
  当只设置三个值时：上 （左右） 下
  当只设置两个值时：（上下）（左右）
  【margin与padding相同】
  <span style="color: #ff000">注意：网页自带8px的margin</span>
• 盒模型的计算问题

我们现在一个盒子有10px的margin、5px的border、10px 20px 30px 40px的padding和100px的content，那么这个盒子的宽高分别是多少呢？
答案：
width = 5 + 40+ 100 + 20+ 5 = 170px;
height = 5 + 10 + 100 + 30 + 5 = 150px;
宽度的计算是：5px的border+40px的padding-left+100px的content+20px的padding-right+5px的border=170px；
高度的计算是： 5px的border+10px的padding-top+100px的content+30px的padding-bottom+5px的border=150px；

---

层模型

css中元素的层次模型主要是由 position 这个属性来决定的。

position属性：
position的意思是定位，同样这个属性的作用就是给元素施加定位。它一共有四个值，分别是 static、absolute、relative、fixed

默认值：
static是默认的属性，当我们没有写position属性的时候，元素默认的定位就是static定位。

• 相对于可视区视口进行定位
  【IE6 不支持】

  position：fixed；
  

• 绝对定位

   position：absolute；
  

  特点
  【1】脱离原来位置进行定位（已经在其他层面上了）。
  【2】相对于，最近的有定位的父级进行定位，如果没有，相对于document（文档）进行定位。

  当我们改变定位之后，这个元素就有四个属性可以使用

  left：100px；左边线距离浏览器左边框
  top：100px；上边线距离浏览器上边框 
  right：100px；右边线距离浏览器上边框 
  bottom：100px；下边线距离浏览器上边框 
  

  这四个属性分别可以设置当前元素距离左边、右边、上边和下边的距离为多少，但是四个属性很少一起出现，一般都是两两一对出现，其中left和top是一对，right和bottom是一对。

• 相对定位

   position：relative；
  

  特点：
  【1】保留原来的位置进行定位，实现定位后，也在另一个层面上。
  【2】相对于自己原来位置进行定位

当我们仅仅给元素设置position:relative;并没有设置left、right、top、bottom属性的时候，元素的定位是没有发生任何改变的，因为这个特性，一般在开发中，<span style="color: #ff000">relative都是用作设置参照物的</span>，一个absolute元素要相对于那个元素进行移动，就给那个元素设置relative的定位就可以了。

• absolute和relative的区别
  看一个例子

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

.wrapper { 
      width: 200px;
      height: 200px;
      background-color: orange;
      margin-top: 100px;
      margin-left: 100px;
}
.box{
      width:100px;
      height: 100px;
      background-color: black;
      margin-left:100px;
}
.content{
      width: 50px;
      height: 50px;
      background-color: yellow;  
}

此时我们在浏览器中看到的样式是这个样子的：

现在我们给content加上定位的样式。

.content{
      position:absolute;
      left: 50px;
      width: 50px;
      height: 50px;
      background-color: yellow;
}

这个时候浏览器中的样式就会发生改变，content那个黄色的小方块会跑到橘黄色的方块外面：

这是因为，当我们给 content设置position:absolute;之后，浏览器在渲染的时候，会先向上找到box这个div，看看这个div有没有定位，因为没有，所以继续向上找wrapper，依然没有，再向上找body，还是没有，所以最后就是相对于浏览器边框定位，这个时候content的left属性就是相对于浏览器边框左边有50px的距离的意思。

现在我们把content的定位换成relative，浏览器中的结果变成了这个样子：

本来content黄色小方块在黑色方块的左上角，然后relative相对与自身的位置进行定位，这个时候的left属性的意思就是相对于本来在黑色左上角的那个位置向右移动了50px的距离，也就是现在这个黄色小方块所在的位置。

• 元素水平垂直居中

div {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      background-color: red;
}

这个div就会在有定位的父级里面水平垂直居中了