前端CSS(2)
前段基础css(2)
一、标准文档流
宏观的将，我们的web页面和ps等设计软件有本质的区别，web网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画。
标准文档流下，有一些现象，比如空白折叠现象、高矮不齐底边对齐现象等。
标准文档流等级森严，标签分为两种等级：行内元素和块级元素。
1、行内元素和块级元素的区别：
行内元素：
a、与其他行内元素并排；
b、不能设置宽、高，默认的宽度，就是文字的宽度；
块级元素：
a、独占一行，不能与其他任何元素并列；
b、能接受宽、高。如果不设置宽度，那么宽度将默认变为父级的100%；
2、标签的分类
在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
a、从HTML的角度来讲，标签分为：
文本级标签：p、span、a、b、i、u、em；
容器级标签：div、h系列、li、dt、dd；
PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h系列和ul，p里面也不能放p。
b、现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素；
块级元素：所有的容器级标签都是块级元素，还有p标签；
3、块级元素和行内元素的相互转换
我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
a、块级元素转换为行内元素，通过设置：display: inline;
b、行内元素转换为块级元素，通过设置：display: block;
4、脱离标准流
标准流里面的限制非常多，导致很多页面效果无法实现，如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位
二、浮动
浮动是css里面布局最多的一个属性，也是很重要的一个属性。float：表示浮动的意思，有如下属性值：
none: 表示不浮动，默认；
left: 表示左浮动；
right：表示右浮动；
那么浮动如果大家想学好，一定要知道它的四大特性：
（1）浮动的元素脱标（就是脱离了标准文档流），标签一旦设置浮动，就能够并排，并且不区分行内、块状元素，也就能够设置宽高；
（2）浮动的元素互相贴靠；
（3）浮动的元素由"字围"效果；
（4）收缩的效果（即一个浮动元素，如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像））；
注意：关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就一起浮动，另外，有浮动，一定要清除浮动。
三、清除浮动
先来看如下两段html和css代码：
html代码：
<div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div>
css代码：
.father{
width: 1126px;
}
.box1{
width: 200px;
height: 500px;
float: left;
background-color: red;
}
.box2{
width: 300px;
height: 200px;
float: left;
background-color: green;
}
.box3{
width: 400px;
float: left;
height: 100px;
background-color: blue;
}
.father2{
width: 1126px;
height: 600px;
background-color: purple;
}
效果发现：如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。
那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动。
我们有多种清除浮动的方法，在这里给介绍四种：
a、给父盒子设置高度；
b、内墙法（给浮动元素的后面加一个空的块级标签，再给该标签设置clear:both属性）；
c、伪元素清除法（常用）；
d、overflow：hidden（常用）；
应用：伪元素清除浮动的写法如下：
给浮动元素的父盒子，也就是不浮动的元素，添加一个clearfix类，然后作如下设置：
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
关于overflow：
overflow属性规定当内容溢出元素框时发生的事情。
|
值 |
描述 |
|
visible |
默认值，内容不会被修剪，会呈现在元素框之外 |
|
hidden |
内容会被修剪，超出元素框之外的部分不可见 |
|
scroll |
不管内容是否超出元素框都出现滚动条 |
|
auto |
如果内容超出元素框，则浏览器会显示滚动条以便查看其余内容 |
|
inherit |
规定继承父元素的overflow属性的值 |
逐渐演变成overflow：hidden清除法，
其实它是一个BFC区域：具体参见：https://blog.csdn.net/riddle1981/article/details/52126522
四、margin中的坑
1、margin塌陷问题
当给两个标准流下的兄弟盒子设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象为塌陷。记住这种现象，在布局垂直方向盒子的时候要注意margin的用法。水平方向上没有塌陷现象。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
2、margin：0 auto;
当一个div元素设置margin：0 auto;时就会使盒子居中，我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？若设置margin-left:auto；我们发现盒子尽可能大的右边有很大的距离，没有什么意义。若设置margin-right:auto；我们发现盒子尽可能大的左边有很大的距离，当两条语句并存的时候，我们发现盒子尽可能大的左右两边有很大的距离，此时我们发现盒子就居中了。
注意：
（1）使用margin: 0 auto;时，水平居中盒子必须有width，要有明确width值；
（2）如果给盒子设置浮动、或者固定定位、或者绝对定位，那么margin: 0 auto;失效；
（3） margin：0 auto;使盒子居中，而不是居中文本，文字水平居中使用text-align: center;
3、善于使用父级的padding，而不是margin
另外我们一定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系。
先看如下两段代码：
css代码：
.father{
width:300px;
height:300px;
background-color:blue;
}
.son{
width:100px;
height:100px;
background-color:orange;
margin-top:30px;
}
html代码：
<div class=”father”> <div class=”son”></div> </div>
运行上面代码发现两个盒子整体下移了30px，其实我们是想让子盒子下移30px，父盒子不要动，但是因为父盒子没有设置border，所以父盒子也掉下来了，一旦给父亲设一个border就好了，那么问题来了，我们不可能在页面中无缘无故的去给盒子加一个border，所以此时的解决方法只有一种，就是使用父盒子的padding，让子盒子向下走。
五、字体图标的使用
阿里巴巴的矢量图标库：http://www.iconfont.cn/
