块级元素与内联元素

起因：

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

内联元素：

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

代码：

效果：

块级元素：

定义：占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。

代码：

效果：

区别：

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

注：块元素宽度默认是它容器的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.最重要的事一定要学会表述问题。

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