2.0 css样式

1. 权重问题深入

• 同一个元素，携带了多个类名，和类名的顺序无关，只和CSS顺序有关；

<p class="spec1 spec2">我是什么颜色？</p>
.spec2{
        color:blue;
}
.spec1{
        color:red;
}

• !important标记,用来给一个属性提高权重；这个属性的权重就无穷大；
  语法：K：V !important;

p{
  color:red !important; → 只写了这一个!important，所以就字体颜色属性提升权重
font-size:50px;→ 这条属性没有写!important，所以没有提升权重
}

!important需要强调3点：

1. !important提升的是一个属性，而不是一个选择器；
2. !important无法提升继承的权重，该是0还是0；
3. !important做站的时候，不允许使用，因为会让CSS写的很乱；

• 权重计算的总结：
  • 如果标签被选中，比权重：权重不同，谁大听谁的；权重相同，就近原则；
  • 如果标签没被选中，就近原则，如果一样近，比权重；
  • 还要知道 ! important 的性质。

2. 盒模型

2.1 盒子中的区域：

一个盒子中主要的属性有5个：width,height,padding,border,margin;

• width/height:CSS中指内容的宽度和高度
• padding：内边距的意思
• border：边框

• margin：外边框
  盒模型示意图：

  
  

3. 认识padding

padding就是内边框，padding区域有背景颜色，且背景颜色一定和内容区域相同；也就是说，background-color:将填充border以内的区域；

• padding两种写法：
  • 写小属性，例如:padding-left; padding-top; padding-right; padding-bottom;

• 写综合属性，用空格隔开，顺序为“上右下左”；padding:30px 20px 40px 100px;
  如果只写3个值：padding:30px 20px 40px； 上，左右，下；
  如果只写2个值：padding:30px 20px; 上下，左右；
• 要懂得用小属性叠层大属性；
  padding: 20px;
  padding-left:30px;
  则结果为，内边距上，右，下都是20px，而左为30px;

盒模型测试题

题1:说出下面盒子真实占有宽高，并画出盒模型图：

div{
width: 200px;
height: 200px;
padding: 10px 20px 30px;
padding-right: 40px;
border: 1px solid #000;
}

题目2，说出下面盒子真实占有宽高，并画出盒模型图：

div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding-bottom: 30px;
border: 1px solid #000;
}

第3题，我现在给你盒模型图，请写出代码，试着用最最简单的方法写

4. 元素的默认样式；

一些元素，默认带有padding，比如ul标签，所以，我们为了做站的时候便于控制，会清空元素的默认padding，例如：

*{
  padding:0;
  margin:0;
}

*的效率不高，所以我们使用并集选择,参考清楚样式链接，不用死记硬背，网上多的是；

5. border

• 边框有三个要素：粗细，形状，颜色；border: 1px solid red;
• 颜色如果写不好，默认是黑色；
• 边框形状主要有三种：solid,dashed,dotted;
• border属性能够被拆开，有两大种拆开的方式：
  • 按3要素:border-width、border-style、border-color
  • 按方向：border-top、border-right、border-bottom、border-left
  • 也可以混合使用，例如：border-left-width: 0;其他类推；