今天又仔细的看了看网上的CSS的资料，对CSS有了更深刻的理解，我们都知道CSS元素分为块级元素和行内元素，但是块级元素与display：block属性的元素还不是一个概念，display：block属性的元素是块级元素的一种，块级元素有一些特征，这些特征是一个水平流上只能单独显示一个元素，多个元素则换行显示，只要符合这些特征的都是块级元素所以display：list-item，display：table都是块级元素。我又发现一个能清除浮动影响的方法，我们知道如果一个元素设置为浮动了那他是不能父元素的高度的，比如子元素div2设置为浮动但是父元素div1的高并没有被撑开这时我们给父元素加一个伪类：after，里面再加上

‍‍‍‍这不是普通的块级盒子，这个块级盒子还会生成一个附加的小盒子专门用来放置原点的，所以要去除这个原点除了

list-style: none;外直接改变盒子状态也是可以的比如把盒子改成display：blockli标签就没有原点了。其实我们的每一个盒子都由两个盒子组成，分别是外部的外在盒子和内部的容器盒子，举个例子我们都知道行内元素是没办法设置宽高的，但是为什么display：inline-block即有行内属性又可以设置宽高呢，这是因为这个盒子就是由两个盒子组成，外在盒子是inline属性可以让元素并列，内部的容器盒子是block属性可以设置宽高。外在盒子决定元素是否在一行显示，内在容器盒子决定是否可以设置宽高，于此同理那么display：block就是外在盒子和容器盒子都是block属性，display：inline就是外在盒子和容器盒子都是inline属性。我在写代码时很喜欢给元素加一个width，哪怕这个元素不需要设置width属性我也会加一个width：100%,其实这种写法是错误的，一个属性为block的盒子会自动铺满容器，这个在html里叫做流，但是一但给元素设置了width属性，哪怕是width：100%流就会消失，但是在写页面时这个流是非常重要的，因为流可以自动分配margin padding border，举个例子，我设置一个盒子为块级盒子并且不设置width盒子宽度自动填满屏幕此时盒子的宽是屏幕的宽1640px

此时我给盒子增加margin和padding各20px；我们发现盒子的width变成1560了，加上margin和padding刚好到1640，也就是说盒子自动分配margin和padding了，我们在给盒子加上width：100%的属性我们会发现底部出现滚动条

盒子的宽不算margin和padding也有1640px，为什么会出现这种情况，就是因为要是给盒子加上width属性，盒子的流就消失了，盒子就不会自动分配宽度了，盒子的宽度就会超出父元素的宽度，要想解决还得写上box-sizing这个属性。