下载掌阅APP，畅读海量书库
立即打开
<dialog>对话框的主体内容可以是任何HTML元素，甚至是其他<dialog>元素。
参见如下所示的极简案例，<dialog>元素里面有一张<img>图片，同时设置了open属性，此时，在Chrome浏览器下就可以看到如图3-13所示的效果（不同的浏览器下<dialog>对话框的默认样式细节会有所差异）。
在默认状态下，对话框元素会有黑色的边框、一定的padding内间距、绝对定位且左右居中，但是并没有垂直居中，这是个值得一提的细节知识，即如果我们使用open属性或者使用dialog.open()方法打开对话框，则对话框默认并不是在屏幕的垂直中心位置，而是在<dialog>元素所在的DOM树位置附近。
图3-13 对话框显示图片元素的默认样式
这么设计很好理解，例如点击某个按钮然后显示对话框，可以把对话框元素放在按钮的附近，这样对话框显示的时候和交互元素距离近，用户体验会更好。
如果我们想要对话框位于屏幕的中心，则需要额外的CSS设置或者用其他方法打开对话框，这一点会在后面介绍。
以上就是<dialog>元素的基本特性，看起来似乎也没什么，就多了些内置的CSS样式，有些CSS样式是有用的，例如绝对定位，有些CSS样式则多余，例如黑色的边框，因为与目前的主流设计风格严重不符，所以一定会被重置。
要想在实际项目中使用<dialog>元素，一定要进行样式自定义，同时还需要增加标题及关闭按钮等元素。
咦？使用<div>元素模拟的弹框不也同样是样式自定义和增加一些固定的元素吗？如此看来，使用<dialog>元素模拟对话框和使用<div>元素岂非并无区别，那还有使用<dialog>元素的必要吗？
有必要，太有必要了！
因为<dialog>元素尚有很多其他元素无可替代的实用特性。