CSS层叠样式表的理解（一）

使用css时，很多的问题都出现在盒子模型，所以要深刻理解盒子模型，才能够做好css。

　　盒子模型：

　　
　　margin:外边距 与父亲标签的content边界之间的距离（可以认为content边界位置存在，但不占任何像素）

　　border:边框 标签自身的边框的粗细

　　padding:内边距 标签与自己的子元素（孩子标签）的content边框的距离

　　content:数据 content的边框，数据的位置，不占任何像素，但位置确实存在。

　　【不占任何像素，位置确实存在，这句话可以这么理解，当div标签中没有任何元素，且不显示div的边框时，
　　div就不占任何像素，不在屏幕上出现，但是其位置是确实存在的。当它不在屏幕上显示时，其他元素
　　可以占据它的位置。这就是文档流的特点，向屏幕显示输出的时，总是从上往下，从左向右。只有通过
　　position:absolute float:left|right 这样的属性才可以使其脱离文档流。】


仔细理解好以下的几个概念：
　　1、将行级标签改成块级标签的含义，即 display:block 的含义。

　　　　　　1>所有的块级元素不需要再在使用display：block定义，块级元素本身的默认属性就是block

　　　　　　2>display：block；比较常用于<a><span>这两个标签，因为他们不是块级元素，定义 display：block属性后，定义width、height等和长宽相关的css属性才会生效。

　　　　　　3>之前曾对div设置过display：hidden，则需要重新定义。
　　　　　　　　　　　　
　　2、标签对象从文档流中脱离的含义，即 float:left|right 的含义

　　　　　　见（CSS （二））
　　3、父级标签和子标签的含义
　　　　　　每一个标签都有父级标签。
　　　　　　所谓的标签的数据（内容）可以是文本（即文字）也可以是子标签（子元素）。

转载于:https://www.cnblogs.com/wllbelief-win/p/4518552.html