一、权重问题
1.1、 !important 标记
可以通过 k : v !important 来给一个属性提高权重，这个属性的权重是无穷大的。
<style>
.spac2{
color: red;
}
.spac1{
color: blue;
}
</style>
</head>
<body>
<p class="spac1 spac2">我是什么颜色?</p>
<p class="spac2 spac1">我是什么颜色?</p>
</body>
<style>
.spac2{
color: red !important;
}
.spac1{
color: blue;
}
</style>
</head>
<body>
<p class="spac1 spac2">我是什么颜色?</p>
<p class="spac2 spac1">我是什么颜色?</p>
</body>
通过 !important 提高权重的效果如上图。注意要有 ！,并且写在分号内部。
!important 注意点：
1、!important 提升的是一个属性，而不是一个选择器。
<style>
p{
/*!important 提高的是一个属性的权重,不是一个选择器的权重*/
/*最终的效果是字号还是 20px 而颜色是 green*/
color: green !important;
font-size: 10px;
}
.spac2{
color: red;
font-size: 30px;
}
#para1{
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p id="para1" class="spac2">我是什么颜色?</p>
</body>2、!important 无法提升继承的权重，该是0 还是 0。
<style>
div{
/*!important 在这里并不能改变权重(无法提升继承的权重),没有p标签是直接选中的而不是继承*/
color: red !important;
}
p{
color: greenyellow;
}
</style>
<div>
<p>!important 无法提升继承的权重,该是0还是0</p>
</div>3、!important 不影响就近原则。
一般情况下，开发中!important 是不使用的，因为会让Css写的很乱。
1.2 、权重计算总结
二、盒模型
2.1、 盒子的区域
一个盒子的主要属性有5个：width、height、padding、border、margin
width：宽度 ，指的是内容宽度，而不是盒子的宽度。
height：高度，指的是内容的高度，而不是盒子的高度。
padding: 内边距
border: 边框
margin : 外边距
2.2 、width 、height、padding
关于 width 和 height 和平时说的不是一个概念，在CSS中宽高指的是内容的宽高。
真实的占有宽度 = left-border + left-padding + width + right-padding + right-border
padding 就是内边距，并且padding 区域是有颜色的，颜色一定和内容区域相同。也就是说background-color 将填充左右的boder 以为的区域。
padding 是 4 个方向的，所以能够分别描述 4 个方向的padding。
方法有两种，第一种写小属性；第二种写综合属性，空格隔开。
小属性的写法：
padding-top: 50px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px; padding:50px 20px 10px 50px;
padding:50px 20px 10px;
如果只写两个：（padding:50px 20px 等价与如下：）
padding-top: 50px;
padding-right: 20px;
padding-bottom: 50px;
padding-left: 20px; padding:50px;
/*那么对应的 padding-left 由 50px 改为 20px*/
padding-left: 20px;开发中，为了便于控制，总是喜欢清除默认的padding
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}2.3 、border
border 就是边框。边框有三个要素：粗细、线型、颜色。
颜色不写默认是黑色。粗细、线型不写显示不出来边框。
border属性能够被拆开，有两大种拆开的方式：
1、 按3要素:border-width（线框宽度）、border-style（线型）、border-color（颜色）
2、 按方向：border-top、border-right、border-bottom、border-left
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;如果一个小要素后面是空格隔开多个值，那么就是上右下左的顺序。
border 可以为none ,那么就是某一条边没有，也可以调整某条边边框的宽度为0。三、标准文档流（web 页面是个“流”，必须从上往下）
标准文档流的微观现象：
1、空白折行现象（比如让多个 img 标签之间没有空隙，必须紧密相连 ）
2、高矮不齐，底边对齐
3、自动换行，一行写不满换行写。
3.1、 块级元素和行内元素
<style>
p{
width: 200px;
height: 40px;
background-color: green;
}
span{
width: 200px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<p>呵呵呵呵</p>
<p>哈哈哈哈</p>
<span>呵呵呵呵</span>
<span>哈哈哈哈</span>
</body>
块级元素：
- 霸占一行，不能和其他元素并列。
- 能接受宽、高。
- 如果不设置宽高，那么宽高默认是父亲的100%。
行内元素：
- 与其他行内元素并排。
- 不能设置宽、高。默认的宽度，就是文字的宽度。
HTML中把标签分为两类，文本级、容器级
文本级别：p、span 、a、b、i、u、em
容器级标签：div 、h系列、 li、 dt、 dd
CSS 的分类和 HTML 分类很像，就 p 不一样：
所有的文本级标签都是行内元素，除了 p ，p 是一个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。
3.2、 块级元素和行内元素的相互转换
块级元素可以设置为行内元素。（display:inline）
行内元素可以设置为块级元素。 (display:block)
<style>
p{
display: inline; //块级元素可以通过 inline 设置为行内元素
width: 200px;
height: 40px;
background-color: green;
}
span{
display: block; //行内元素可以通过 block 设置为块级元素
width: 200px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<p>呵呵呵呵</p>
<p>哈哈哈哈</p>
<span>呵呵呵呵</span>
<span>哈哈哈哈</span>
</body>
标准文档流的限制非常多，标签的性质很恶心，比如要设置并排、并且还要设置宽高。那么就要脱离文档流：
CSS 中一共有三种手段，让一个元素脱离标准文档流：
1、浮动
2、绝对定位
3、固定定位
四、浮动
浮动是CSS里面布局用的最多的属性。
<style>
.box1{
float: left;
width: 80px;
height: 50px;
background-color: yellowgreen;
}
.box2{
float: left;
width: 100px;
height: 70px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
两个元素并排了，并且两个元素能够设置宽高了，这就是浮动。
4.1 、浮动的元素脱标
如果把上面box2 的 float:left 去掉就会变成下面的效果：
<style>
span{
float: left;
width: 100px;
height: 30px;
background-color: gold;
}
</style>
</head>
<body>
<span>哈哈哈哈</span>
<span>呵呵呵呵</span>
<span>哎呀哎呀</span>
<span>好吧好吧</span>
</body>
未添加 float:left
添加了float:left 后
综上说明：一个span 标签不需要转换成块级元素，就能设置宽度、高度；这就是说标签已经不区分行内、块了。也即是说，一旦一个元素浮动了，那么就能够并排了，能够设置宽高了。无论原来是div 还是 span
4.2、 浮动的元素相互贴靠
<style>
.box1{
float: left;
width: 80px;
height: 200px;
background-color: green;
}
.box2{
float: left;
width: 50px;
height: 60px;
background-color: yellowgreen;
}
.box3{
float: left;
width: 80px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
4.3、浮动的元素有“字围”效果
<style>
.box1{
float: left;
width: 80px;
height: 60px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
关于浮动，要遵循一个原则：永远不是一个东西在浮动，浮动是一起浮动，要浮动大家一起浮动。