CSS:3大重点知识点盒子模型、浮动、定位

前言

作为一名初级的前端开发人员，怎么确定是否真正掌握了Css的技术呢？

CSS的3大知识点：

盒子模型、浮动、定位。

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
CSS盒模型和IE盒模型的区别：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。

综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
padding:30px 20px 40px 100px;
如果写了四个值，则顺序为：上、右、下、左。
如果只写了三个值，则顺序为：上、右、下。??和右一样。
如果只写了两个值，比如说：
padding: 30px 40px;
则顺序等价于：30px 40px 30px 40px;
小属性可以覆盖大属性。
下面的写法：

padding-left: 30px;
padding: 20px;

第一行的小属性无效，因为被第二行的大属性层叠掉了。

但是，*的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：

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;
}

盒子模型总结：
Css盒子模型的掌握并不难理解，主要需要记忆标准盒子模型和IE盒子模型之间的差别：IE盒子模型会加上padding、border的宽和高。这就需要适配不同的浏览器。
还有就是盒子的padding,border简易写法的默认设置顺序是顺时针方向设置。
Css浮动： 浮动其实就是选择器属性float,这个属性可以是你定义的网页标签脱离Dom文档流的束缚，完全按照你的要求来实现布局网页标签。

从HTML的角度来讲，标签分为：
文本级标签：p、span、a、b、i、u、em。
容器级标签：div、h系列、li、dt、dd。

从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
块级元素：所有的容器级标签都是块级元素，还有p标签。

块级元素和行内元素的相互转换
我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素可以转换为行内元素：

display: inline;
那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
此时这个div不能设置宽度、高度；
此时这个div可以和别人并排了。

行内元素转换为块级元素：
同样的道理，一旦给一个行内元素（比如span）设置：

display: block;
那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
此时这个span能够设置宽度、高度
此时这个span必须霸占一行了，别人无法和他并排
如果不设置宽度，将撑满父亲

这里设置float浮动的目的是为了让网页标签脱离Dom文档流的束缚，实现自己自定义布局。使用Float浮动时需要注意，网页元素设置浮动的和没有设置不浮动的元素布局的方式不一样， 互不兼容只能选择其中之一；浮动Float和其他的两种绝对定位方式也互不兼容，absolute定位方式和fixed定位方式类似，区别在于position：fixed属性定义的标签不能跟随网页的滑动而滑动，只会固定住网页的某一个位置。
设置浮动并不难，但是取消浮动的方式却有多种，那么什么时候需要取消浮动效果呢？
场景1:如果我们需要让一个网页的页面实现浮动，就需要设置这个网页的所有标签浮动起来，才能兼容网页宽度改变导致显示不正常的问题。
但是如果我即希望使用浮动来布局网页标签，也希望标签可以像Dom结构那种方式从上往下的方式来显示元素，这里就需要通过一些非正常的方式来让标签的浮动属性失效，也就是浮动的清除。
第一种方式：给浮动元素的祖先元素加高度。

这里我们需要了解就是浮动可以在块级标签里面设置，给父容器标签的子标签设置浮动则只会在父级容器标签里面进行浮动，不会作用于父容器标签。
如上图所示，如果选择器.parent_div的高度如果设置成auto的话，标签可以正常的浮动，但是设置的p标签并没有排列在父标签的下面，而是浮动到绿标签的右边，这说明父容器的高度只是红色标签的高度。其他两个还是进行浮动了，只是这父容器的下方。但是如果容器的高度足够大的话，那么子标签就会都在父容器里面进行浮动。然后p标签会显示在父容器的下面。

有高度的盒子，才能关住浮动。（记住这句过来人的经验之语）

清除浮动的方式二：

clear:both;
clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。
这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。读者可以试试看。
margin失效的本质原因是：上图中的box1和box2，高度为零。

清除浮动方式三：隔墙法。

上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性。既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。

所以我们可以理解clear这个属性其实就是为了针对隔墙法而设计的，因为我们直接给子标签设置这个属性并没有用。
清除浮动方式四：内墙法：

上面这个图非常重要，当作内墙法的公式，先记下来。
为了讲内墙法，我们先记住一句重要的话：一个父亲是不能被浮动的儿子撑出高度的。举例如下：

总结

内墙法区别于外墙法的点在于，内墙法是设置在标签的内部，而外墙法却是设置在标签的外部；设置的方式都是使用一个容器标签（div、span）都可以。然后通过设置这个标签的clear属性both来达到清除浮动 效果。
解决的问题：1）外墙法解决的浮动导致子标签的margin为0不能达到布局效果，希望布局可以受Dom文档流控制；
2）内墙法解决的是浮动是容器标签的height为0，导致容器标签不能被子标签撑起高度，希望容器标签可以被子标签撑起高度。
清除浮动方法五：overflow:hidden;

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

Css定位： 需要理解一下，为什么说定位是学习Css的三大重点知识之一呢？首先盒子模型其实很好理解掌握，这里就基本掌握了建筑的框架容器构成，然后我们需要再学习布局方式。布局方式其实就是定位和浮动。这里为什么需要单独来说明呢？因为它门不是同一个属性，也就是有不同的实现效果，实现原理也就不同。

css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。

position: absolute;  <!-- 绝对定位 -->
position: relative;  <!-- 相对定位 -->
position: fixed;     <!-- 固定定位 -->

相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。
绝对定位（absolute）:以界面的左上角为原点坐标，left为横坐标，top为纵坐标的位置显示方式。
固定定位：是以屏幕为目标界面，屏幕左上角为原点坐标，left为横坐标，top为纵坐标的位置显示方式。使用固定定位的标签不能跟随界面的滑动而滑动。
但是在实际的开发中，我们可能会混合使用三种定位属性，但是定位属性都是按照Dom文档流来显示的，如果需要填充整个布局页面，使用三种定位属性方式并不能实现需要的效果。所以我们可以让标签布局脱离Dom来显示。