IE8/FireFox下容器水平垂直布局问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><title></title></head><body><div style="width:400px;height:400px;margin:0px auto;"><!--@注释1--><div style="width:400px;height:400px;background-color:Blue;display:table-cell;vertical-align:bottom;"><!--将div设置为display:table-cell就可以通过vertical-align来设置内部元素的垂直布局,因为设置为display:table-cell的元素margin将失效要让其水平居中就要在外层再加上个非display:table-cell的元素来设置margin来让其水平居中(如:@注释1)-->看!连文字也垂直居下了<table style="width:100px;height:100px;background-color:Yellow;margin:0px 0px 0px auto;"><!--通过margin来设置table在div的水平布局，现在margin:0px 0px 0px auto;表示水平居右,margin中auto表示本容器的外边距为本容器到父级容器的距离宽度--><tr><td style="vertical-align:bottom;font-size:8px;"><!--td本来就是table-cell元素，因此可以通过vertical-align来设置内部元素的垂直布局-->看!连文字也垂直居下了<div style="width:25px;height:25px;background-color:Green;margin:0px 0px 0px auto;"></div><!--通过margin来设置div在table(td)的水平布局，现在margin:0px 0px 0px auto;表示水平居右,margin中auto表示本容器的外边距为本容器到父级容器的距离宽度--></td></tr></table></div></div></body></html>可能的值
| 值 | 描述 |
|---|---|
|
设置针对边距的属性。 值可以是：
默认值：未定义。 |
例子
四个边距均为10px：
h1 {margin: 10px}
顶边距和底边距为10px，左边距和右边距是父元素宽度的2%：
h1 {margin: 10px 2%}
顶边距为10px，左边距和右边距是父元素宽度的2%，底边距是-10px：
h1 {margin: 10px 2% -10px}
顶边距为10px，右边距是父元素宽度的2%，底边距是-10px，而左边距由浏览器设置：
h1 {margin: 10px 2% -10px auto}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架