块级元素
顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的div、p、ul默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，宽度始终是与浏览器宽度一样，块级元素之所以会单独占据一行是因为它们前后默认有换行符（看不到）。它可以容纳内联元素和其他块元素。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有此功能，设置float后，就不用再display:block;了，浮动后元素自动就拥有了块元素的属性了
内联元素（行内元素）
通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的a、span、em都属于内联元素。内联元素的显示特点就是像文本一样的显示，不会独自占据一个行。行内元素只能容纳文本或者其他行内元素。当然块级元素也能变成内联元素，那就是通过css的display:inline;和float来实现。
盒子在标准流中的定位原则
（1）行内元素之间的水平margin
当两个行内元素紧邻时，它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。
（2）块级元素之间的竖直margin
当两个块级元素紧邻时，它们的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。
（3）嵌套盒子之间的margin
当一个div块包含在另一个div块中时，便形成了典型的父子关系。其中子块的margin将以父块的 content为参考。
（4）将margin设置为负值
当margin设置为负值时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。
行内元素和块级元素使用浮动后的变化
如果一个元素（无论是块级元素还是行内元素）被设置为float之后，那么它默认会添加属性display:inline-block（行内块级元素），也就是说浮动会让元素变为拥有块级属性的行内元素，这时它的默认宽度不是100%，且给该元素设置padding-top和padding-bottom或者width、height都是有效果的。
需要注意的是，设置浮动的元素是脱离文档流的，会遮盖未设置浮动的元素。把网页理解为是立体的，有不同的层次，那么浮动的和不浮动的是不在同一平面的。
css给块级元素设上display: inline与float:left的区别是什么？
设了float:left的元素允许它的右边存在任何元素同行显示，不论是内联元素还是块元素。但它的左边还是不允许存在任何元素与之同行显示，哪怕其它的元素的代码在前，除非也给前面的元素加上float:left后，才允许同行显示。
设了display:inline的元素，允许它的前后存在其它的内联元素同行显示。如果要让代码在前面的块元素与之同行显示，则要让前面的元素浮动（不管是左还是右浮动）或设为display:inline，如果要让代码在后面的块元素与之同行显示，则只能设为display:inline，浮动不起作用（无论左浮动还是右浮动）。即允许内联同行，块级要看情况。
给块级元素设上display:inline是解决有名的IE6中双倍浮动的利器。
原文地址：https://blog.csdn.net/ParanoidYang
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。