块级元素与内联元素

原由：

在模拟大众点评时，发现布局紊乱的问题图片一直到不了我理想的位置。询问组长后，知道问题多是关于块元素和内联元素的；

内联元素：

定义：只占据它对应标签的边框所包含的空间。只能容纳文本或者其余内联元素元素。

代码：

效果：

块级元素：

定义：占据其父元素（容器）的整个空间，所以建立了一个“块”。一般浏览器会在块级元素先后另起一行。能容纳其余块元素或者内联元素。

代码：

效果：

区别：

块元素	内联元素
老是在新行上开始	和其余元素在一行
能容纳其余块元素或者内联元素	只能容纳文本或其余内联元素
高度，行高以及顶和底边距均可以控制	高，行高及顶和底边距不可改变

注：块元素宽度默认是它容器的100%，除非设定一个宽度。

块级元素和内联元素之间的转换：

1.display  
块元素默认display:block;行内非替换元素(a,span)默认为display：inline;行内替换元素(input)默认为display:inline-block;  
display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。  
display:block;转换为块级元素。  
display:inline;转换为行内元素。  
display:inline-block;转换为行内块级元素。  
2.float  
当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。  
3.position  
当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

总结：

1.遇到问题本身能够先试30分钟左右，若是仍是不行的话必定要请教他人，由于我将近40分钟没解决的问题学长一会就给我弄好了。但也千万不要遇到问题就问必定也要先思考，不然就算你问了也记不深入，还浪费了两我的的时间。
2.作事要规范。
3.最重要的事必定要学会表述问题。

版权声明
本文保留全部权利，版权归河北工业大学梦云智软件开发团队全部。未经团队及做者事先书面赞成,您不得以任何方式将文本内容进行商业性使用或经过信息网络传播文本内容。本文做者：李友学