一、权重问题

1、同一个 标签携带多个类，权重一样时，有冲突，听谁的样式？

<p class="spec1 spec2"></p>
 .spec2{}
 .spec1{}

和在标签中的挂类名的顺序无关，只和css的顺序有关。样式谁写在后面，听谁的。
2、!important 关键字：权重最大

.spec{
    color:green !important;
}

语法：k:v!important;来给属性提高权重。这个属性的权重为无穷大。

！important需要强调三点：
1）！important提高的是一个属性的，而不是一个选择器。
2）！important无法提升继承的权重，该是0还是0.
3）！important不影响就近原则。
! important做站的时候，不允许使用。因为会让css写的很乱。
注意：
选择上了，数权重（id的数量，类的数量，标签的数量）。如果权重一样，谁写在后面听谁的。
没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比较
选择器权重，如果权重再一样重，谁写在后面听谁的

二、盒模型

2.1 盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。
width是“宽度”的意思，css中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，css中height指的是内容的高度，而不是盒子的高度。
padding是“内边距”的意思。
border是“边框”。
margin是“外边距”。

宽度和真实占有宽度，不是一个概念！！！！！
真实占有宽度=左border+左padding+width+右padding+右border。
盒子的总宽度和总高度发生变化，是灾难性的：如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding，加padding就要减width.

2.2 padding:
padding的区域有背景颜色,并且背景颜色一定和内容区域的相同，颜色和也就是说background-color将填充所有boder以内的区域。
padding是四个方向的，所以我们能够分别描述四个方向的padding。
方法有两种：第一种写小属性，第二种写综合属性，用空格隔开。
第一种：小属性的写法：
padding-left:100px; padding-right:20px;
padding-top:30px; padding-bottom:40px;
这种属性，就是复合属性。比如不写padding-left那么就是没有左内边距。
第二种综合属性的写法：空格隔开的，四个数字就是上右下左。
padding:30px 20px 40px 100px;
如果只写三个值：上,右,下,? （和右一样）。
padding:20px 30px 40px;
如果只写两个值：上，右，?(和上一样）,?(和左一样）。
padding:20px 30px;

一般情况下：要懂得，用小属性层叠大属性.
      padding:20px;
      padding-left:30px;
下面的写法错误：不能把小属性，写在大属性前面，没有意义。
      padding-left:30px;
      padding:20px;

最后强调一点：padding-left不是padding-left-width.

一些元素，默认带有padding,比如ul标签。
所以，我们为了作站的时候，便于控制，总是喜欢清除这个默认的padding：

*{
	margin:0;
                padding:0;
       }
*的效率并不高，所以我们使用并集选择器：罗列所有的标签。
   h1,h2,h3,h4,h5,h6,div,p,ul,ol,dl,等等{
            margin:0;
            padding:0;
    }
  **2.3 border:**
  就是边框。边框有三个要素：粗细、线型、颜色。
  border:1px solid color;
  如果公司里面的设计师，追求极高的页面还原度，那么不能使用css来制作边框。
  就要用到图片，进行切图了。

border是一个大综合属性，border:1px solid red;就是把4个边框，都设置为1px宽度、线型实线、red颜色。
border属性能够被拆开，有两大种拆开的方式：
1、按要素：
border-width:10px; border-style:solid; border-color:red;
等价于：border:10px solid red;
一个border是由三个小属性综合而成：border-width border-style border-color
如果某一个小要素后面是空格隔开的多个值那么就是上右下左的顺序：border-color:red green;(上右下左)
2、按方向：
border-top:1px solid red; border-right:1px solid red; border-buttom:1px solid red;
border-left:1px solid red;
等价于：border:10px solid red;
按方向还能再拆一层：border-top-width:1px; border-top-style:solid; border-top-color:red;
工作当中一般这样使用：border:10px solid red; border-right-color:blue; 先写共性，然后写特殊性。
border:可以没有。 border:none。border-left:none:左边框没有。等价于：border-left-width:0px;

三、标准文档流

宏观的讲，我们的web页面和photoshop等设计软件有本质的区别：web页面制作，必须从上而下。而设计软件，
想往哪里画个东西，都能画。
我们要看看标准流的哪些微观现象：
1）空白折叠现象。
2）高矮不齐，底边对齐。
3）自动换行，一行写满，换行写。
3.1 块级元素和行内元素:
学习的初期你就要知道，标准文档流等级森严。标签分为两种等级：
1）块级元素
霸占一行，不与其它任何元素并列。
能接受宽、高
如果不设置宽度，那么宽度将默认变为父亲的100%.
2）行内元素
与其他行内元素并排。
不能设置宽、高。默认的宽度，就是文字的宽度。

在html中我们已经将标签分过类，当时分为：文本级、容器级
          文本级：p、span、a、b、i、
          容器级：div、h系列、li、dt、dd

css的分类和上面的很像，就一个不一样:
所有的文本级标签都是行内元素，除了p，p是文本级，但是是个块级元素。
所有的容器级标签都是块级元素。
3.2 块级元素和行内元素的相互转换。
块级元素可以设置为行内元素，行内元素可以设置为块级元素。

div{
	   display:inline;
    }

display是“显示模式”的意思，用来改变元素的行内、块级性质。
一旦，给一个标签设置：
display:inline;那么，这个标签将立即变为行内元素。此时它和一个span无异。

span{
           display:block
      }

display:block; 让标签变为块级元素。此时这个标签，和一个div无异。
要求:display必须写在第一行。
标准流里面限制很多。比如，我们现在就要并排，并且设置宽高。
3.3 脱离标准流
css中一共有三种手段，使一个元素脱离标准文档流：
1）浮动
2）绝对定位
3）固定定位
文本居中：text-align:center;
四、浮动：float:left; float:right;
浮动是css里面布局用的最多的属性。
让两个能设置宽高的div，处在同一行中。
两个元素并排了，并且两个元素都能设置宽度、高度了（这在刚才的标准流中不能实现）

浮动想学好，一定要知道四个性质：

1、浮动的元素脱离标准文档流：浮动元素脱离页面，可以到处漂。
2、浮动的元素不需要转成块级元素也不需要转成行内元素，就能设置宽高。所有的元素都不分块级和行内元素。
一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高。
3、浮动的元素互相贴靠。
如果2哥有足够的空那么就会靠着2哥。如果没有足够的空间，会靠着1哥。
如果没有足够的空间，则自己另起一行。
4、浮动的元素有自围现象：浮动的元素可以挡住盒子，但是不能挡住盒子中的字。

关于浮动我们要强调一点，浮动这个东西，我们在初期一定要遵循一个原则：
永远不是一个东西单独浮动，浮动都是一起浮动，要浮动大家都浮动。

六、父子盒模型：
父亲的width供子类进行填充。