前端——块元素和内联元素的概念以及区别

一丶块元素:
(1)前后有换行符,独占一行,默认情况下,垂直排列
(2)默认情况下高度有内容决定(就比如由里边的图片和文字决定高度),宽度是父级的宽度,父级是多宽,它就有多宽。width height 可以控制宽高。
(3)margin和padding可以控制距离
(4)常见的块元素有:div p ul li hr【 水平线】form等标签
二丶内联元素:
(1)前后没有换行符,不独占一行。默认情况下,水平排列
(2)宽度和高度都有内容决定
(3width 和height不可以控制高度 也就是说 给其宽高是不起作用的
(4)margin padding 只可以控制左右 上下不可控制
(5)常见的内联元素有:span img(属于替换元素 即是 它是内联元素 却可以设置width height来控制宽高)
还有i em 等等
三丶块元素和内联元素的转换:
dislay:none;表示隐藏布局(隐藏之后不再占位)
display:block;表示块状布局
display:inline;表示内联布局
运行的截图比较:
在这里插入图片描述
图一解释:给内联元素span一个margin-top没效果 margin-bottom一样的。
在这里插入图片描述
图二解释:块元素div距离顶端100px 明显改变了
在这里插入图片描述
图三解释:块元素div距离左边100px ,明显改变了
在这里插入图片描述
图四解释:看得出块元素的宽高度可以被width和height控制,而span没I变化

在这里插入图片描述
图五解释:看得display:none 元素被隐藏了 而且不占位
在这里插入图片描述
图六解释:加上display :block 内联元素变成块元素了 所以width和height可以控制高度了,也就是说具有块元素的特证了

猜你喜欢

转载自blog.csdn.net/qq_36625232/article/details/85769918