博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS 块元素和行内元素区别
阅读量:6640 次
发布时间:2019-06-25

本文共 556 字,大约阅读时间需要 1 分钟。

hot3.png

常见块级元素:div  p  form ul ol li 等;

常见的行内元素:span stronh em;

主要区别:

1.块级元素独自占一行且宽度会占满父元素宽度,行内元素不会独占一行,相邻行内元素可以排在同一行。

2.块级元素可以设置weith和height,行内元素设置width和height无效,而且块级元素即使设置宽度也还是独占一行。

3.块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果,但是竖直方向的如padding-top和margin-bottom不会产生边距效果

4.最后是块级元素和行内元素的相关属性:display

 其中块级元素对应display:block,行内元素对应display:inline。可以通过修改元素的display属性来切换行内元素和块级元素。

补充说明一个属性:display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。是一个很实用的属性

 

转载于:https://my.oschina.net/guanxinsui/blog/1585059

你可能感兴趣的文章
computed:快速理解setter和getter
查看>>
Java 8 新特性之Lambda表达式
查看>>
ionic echarts引入和使用及报错解决
查看>>
在Linux中清空或删除大文件内容的5种方法
查看>>
Vue2.5笔记:v-if 和 v-show指令
查看>>
nodejs笔记-模块机制
查看>>
DuiC 性能测试报告 20180203
查看>>
“unspecified on project app resolves to an APK……”错误的解决方法
查看>>
PHP 的 错误/异常 处理总结
查看>>
基于Node(bootstrap+ejs+express+formidable+fs-extra)制作的在线相册资源管理器
查看>>
Intellij 导出可运行的jar 以及部分常见问题
查看>>
iOS播放PCM,NSData流代码(Audio Queue Services)
查看>>
PHP 设计模式之——单例模式
查看>>
经验总结 - 收藏集 - 掘金
查看>>
JavaScript 异常的防范与监控
查看>>
2017-06-23 前端日报
查看>>
thinkphp5.0修改器和数据完成的关系以及使用方法
查看>>
ES2015入门系列5-解构赋值
查看>>
Vue 组件 — V - Textcomplete
查看>>
一定范围内根据关键词获取经纬度
查看>>