好程序员web前端教程分享CSS不同元素margin的计算

简介: 好程序员web前端ji分享CSS不同元素margin的计算:行内级元素  Inline,非置换元素:如果margin值为auto,则margin-left和margin-right的计算值也就为0  Inline,置换元素:同上  Inline-block,置换元素在文档流中:同上  In...

好程序员web前端ji分享CSS不同元素margin的计算:行内级元素

  Inline,非置换元素:如果margin值为auto,则margin-left和margin-right的计算值也就为0

  Inline,置换元素:同上

  Inline-block,置换元素在文档流中:同上

  Inline-block,非置换元素在文档流中:同上

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

  下面的情况下,如果margin值为auto

  如果width是auto值,那么其他值是auto的值就为0

  如果margin-left和margin-right的值为auto,使用的值相等,那么就相对于包含块水平居中。

  块级置换元素,在文档流中

  同块级非置换元素一样。

  总结

  行内级置换元素和非置换元素,在margin值为auto时,margin-left和margin-auto的计算值都为0。

  块级置换元素和非置换元素:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

  如果width是auto值,那么其他值是auto的值就为0

  如果margin-left和margin-right的值为auto,使用的值相等,那么就相对于包含块水平居中。

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for margin-top and margin-bottom as well

相关文章
|
15天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
35 4
|
4天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
15 1
|
4天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
7天前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
15 2
|
16天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
26天前
|
API
2024常用Web支付开发讲解教程
本教程为web支付开发,讲解了最常用的两钟支付:支付宝支付和微信支付,服务器配置和API对接,学完本课程可以学会微信支付、和支付宝支付开发。
18 2
2024常用Web支付开发讲解教程
|
26天前
|
架构师 前端开发
web全栈架构师第16期教程
互联网时代已进入后半场,行业环境发生了显著变化。互联网人,尤其是技术人员,如何在加速更迭的技术浪潮中持续充电,提升自身价值,是当下必须面对的挑战。课程涉及了现下前端实际开发时所需要的各块内容,并深度对标 阿里 P6+级别所具备的知识储备及开发技能,奠定源码阅读基础和全栈开发能力。
19 3
web全栈架构师第16期教程
|
1月前
|
前端开发 UED 开发者
探索前端开发中的CSS布局技巧
本文将介绍一些在前端开发中常用的CSS布局技巧,包括盒模型、浮动布局、弹性布局和栅格系统等。通过学习这些技巧,开发者可以更加灵活地控制页面的布局,提升用户体验和界面的美观性。
|
1月前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
19 1