1.块级元素
块级元素并不等于display：black；
li的默认display：list-item；table的display默认是table；
他们都符合块级元素的基本特征，也就是一个水平流上只可以单独显示一个元素，多个块级元素则换行显示
因此理论上可以配合clear属性来清除浮动带来的影响：
因为浮动的影响，img就脱离文档流了，父级div获取不到他的高度(但图片的高度不变)，所以父元素的高度为0；但设置了.clear:after(后面介绍)，就相当于添加在父元素的最后一个子元素，他是一个了块状元素，并且清除左右浮动
所以他(父元素的最后一个子元素),是在文档流的在图片下面(但图片的高度不变)，父元素就可以同时获得img和.clear:after(后面介绍)的相同高度，但么有给.clear:after(后面介绍)中的content设置内容
(并不是认为没有内容节点就不存在这个是错误的，节点中没内容节点一样存在)所以父高度就是图片的高度。
CSS
.box{
padding: 10px;
background-color: darkred;
}
.box>img{
float: left;
}
.clear:after{ //after相当于父元素中的最后一个子元素，他里面的content中的内容为行内元素，给他设置了块状元素，并且清除左右浮动就可以清除浮动影响
content: ""; //空内容保证只有图片的高度
display: block; //设置为块及元素，这样当他左右俩边出现浮动的元素的时候就换行，行内元素不可以(这里设置为list-item;table)都是可以的
clear: both;
}
HTML
<div class="box clear">
<img src="images/IMISSYOU.jpg">
2.为什么list-item元素会出现项目符号
display:list-item;是li标签的默认的值(li是块级元素;为什么li标签旁边会有项目符号的原因)
本来css世界只有black和inline元素，但是出现了list-item，需要默认显示项目符号，一个盒子解释不了，天神就给list-item在重新命名了一个盒子叫-"附加盒子"
所以所有的块级元素都有一个"块级元素"，而list-item他多了个"附加盒子"来存成项目符号
但故事没有结束，搞定了list-item来个个真正的一个盒子解释不了的怪物，inline-black，所以天神又新添加了一个盒子，也就是每个元素有2个盒子
外在盒子(附加盒子也一同属于外在盒子)：负责元素是可以一行显示，还是只能换行显示
内在盒子(也叫容器盒子)：负责宽高和内容等
故其实：
display：black == display：black-black
....
测试学习结果
display：inline-table的盒子是这么现成的:外面是内联盒子，里面是table盒子(本来行内元素中部不可以放块级元素单table盒子可以放块级元素)；
如果给p设置table-cell就可以一行显示(实现了行内元素中可以放置块级元素)
3.width的学习
关于width:auto的4种表现
1.充分利用可用空间:比分说div p 这些元素的宽度默认的是100%于父级容器
2.收缩与包裹：典型的代表浮动，绝对定位，inline-block元素与table元素简称"包裹性"收缩到合适
3.收缩到最小：table-layout为auto的时候，当每一列空间不够汉子能断就断，英文单词不可以断(css3中min-content)
4超出容器的限制：当设置了white-space：nowrap的时候，则表现为超出(css3中max-content)
3.1流体布局下的高宽分离
因为默认的box-sizing:为content-box宽度作用在内容
所以当出现
.box{width: 100px; border:1px solid red; }或.box{width: 100px ; padding:20px}border/padding会影响宽度的属性共存的时候.box的宽带就不是我们所设置的那样
而是 实际宽度 = width + border + padding
实际的内容宽度 content=width；
那该变的方法是什么
一.css流体布局下的宽度分离原则
给box在设置一个父级的DIV用他来放宽度这样box就可以流动性在内部了width:auto，当在给box在设置border，padding就会在div内部改变，而不会改变box的宽度这个时候box的宽度等于父级元素的宽度就固定了；
.father{
width:180px;
}
.box{
margin:0 20px;
padding:0 20px;
border:1px solid;
}
实际的宽度为 = 父级的宽度180px；
实际的内容宽度 content=180-40-40-2px；
改变方法二
用box-sizing，box-sizing的作用也叫width的细节(IE8要加-ms-前缀)
因为默认的box-sizing:为content-box宽度作用在内容，所以当我们改变其属性值的时候padding-box其width就作用在padding box上面了就可以出现了想流动性自适应一样的现象;
content = width - padding - border;
其他：为何box-sizing不支持margin-box因为没有价值，margin只有在width：auto的时候才有用，但这个时候元素已经是处于流动性了，有没有设置box-sizing都一样
4.heightl的学习
1.关于height：auto%
width支持百分百，而height不支持百分百；
为什么？
规范中说到：如果包含块的高度没有显示指定(即高度由内容决定)，并且该元素不是绝对定位，则计算值为auto;
如果包含块的宽度没有显示指定，那么产生的布局是未定义的
auto*number = NAN;
那如何让height支持百分百;
1.给父级设置固定高度；
2.使用绝对定位；(使用在遮罩)
但两者是有区别的:绝对定位的宽高的百分百是相对于padding box的 而非决定定位元素是相对于content box
6.max min的学习
1.为流体而生的main-width/max-height
.container{
mai-width:1200px;
max-width:1400px;
}
2.对图片的处理
img{
max-width：100%;
height:auto !important;
}
height:auto是必须的，如果原始的图片有设定height，在max-width生效的时候保证图片保持原来的比例
3.于众不同的初始值
min的初始值是auto； max的初始值是none;
4.超越！important
指的是max-width会覆盖width，而且这种覆盖不是普通的覆盖，而是超级覆盖
在css中！important比直接在元素的style属性中设置css的声明还要高，一般用在CSS覆盖javaScript设置是的
但是max-width比！important的等级还要高
< img src = "1.jpg" style = "width:148px !important"; >
img{max-width:256px;}
最终img的最大宽度为256px;
5 超越 max-width
当min-width 与max-width同时存在的时候 min-width会覆盖max-width