块级元素与内联元素总结
来源:互联网 发布:地球的圈层结构知梳理 编辑:程序博客网 时间:2024/06/06 21:04
块级元素与 内联元素的区别
块级元素:(1)独占一行。(2)宽和高能够起作用
内联元素(行内元素):与块级元素相反。
块级元素常见的有:
div、p、tr、th、h、ol、 ul、li、dl、table等
内联元素常见的有:
a、td、span、input、button等
块级元素与内联元素的嵌套
一般所有的块级元素内可以放内联元素。
块级元素中嵌套块级元素就有特殊情况了。比如
<p> <div>div在p内部</div></p>
在浏览器中就变成了
浏览器对于不适合的嵌套会用另外的方式来解析。
在这里特殊的块级元素有h标签和p标签。
内联元素中也可以嵌套块级元素。比如span标签中就可以用div标签。
平时在写站点时,注意使用调试就看到了。他的解析是自动把父子分开变成同级的兄弟。
当然一般内联元素也可以放内联元素。
内联元素与块级元素之间的转化
display
可以使内联元素与块级元素之间转化。
(1)当属性值为inline时就是块级元素转化为内联元素。一般用于去掉块级元素的分行。
(2)块级元素转化为内联元素还有一个inline-block属性。这个改为内联元素后还能设置宽和高。
当我们在使用转化时会出现一些问题
(1)当div转化为inlineblock时两个块之间会出现缝隙。
<div class="left"></div><div class="right"></div>
原因是内联元素之间打了一个回车就是一个空格所以两个块之间出现了缝隙
解决办法:
- 将代码中的回车删掉
- 将字体的大小设置为0就不会显示这个空格
改变两个块之间的外边距
(2)如果在转化了的元素中添加块级元素比如p会产生错位
这是因为基线的原因,当块级元素转化为内联元素时一般的垂直对齐方式为baseline 就是四线三格中的第三条线。top是第一条线 bottom是第四条 middle是第二条,要想解决这个问题就是改变他的垂直对齐方式,改为其他的就可以了。
阅读全文
0 0
- 块级元素与内联元素总结
- 块级元素与内联元素总结
- CSS块级元素与内联元素
- 块级元素与内联元素
- HTML--内联元素与块级元素
- 块级元素与内联元素区别
- 块级元素与内联元素
- 块级元素与内联元素整理
- 块级元素与内联元素整理
- 块级元素与内联元素整理
- 常见块级元素与内联元素
- 块级元素与内联元素
- 块级元素与内联元素用法
- 块级元素与内联元素(行内元素)及浮动知识总结
- 块级元素与行内元素(内联元素)
- 块级元素、内联元素、可变元素
- 块元素、内联元素
- CSS文档流与块级元素和内联元素
- leetcode刷题mark(随时更新)
- Linux进程后台运行讲解
- ios 调用通讯录
- 记一次grub丢失后的修复记录
- 从内存布局看C++虚继承的实现原理
- 块级元素与内联元素总结
- 进阶vue全家桶
- 相似图片搜索的原理
- 加速你的gradle构建,添加阿里云镜像
- POJ 2993 Emag eht htiw Em Pleh(模拟)
- Spring Boot常用注解大全
- 数据对象的属性(特征)类型
- caffe配置 一生不可自决
- Hadoop RPC机制的使用(笔记3)