好程序员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

相关文章
|
2天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
10 2
|
24天前
|
前端开发 JavaScript 测试技术
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
24天前
|
前端开发 测试技术 持续交付
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
3天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
13 3
|
3天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
13 2
|
17天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
104 1
|
20天前
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js
|
24天前
|
缓存 前端开发 JavaScript
探索现代Web开发中的前端性能优化策略
【10月更文挑战第5天】探索现代Web开发中的前端性能优化策略
|
26天前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
22 4
|
25天前
|
前端开发 API 云计算
探索现代Web开发中的微前端架构
【10月更文挑战第4天】在快速发展的软件开发领域,微前端架构(Micro Frontends)逐渐成为构建大型、复杂前端应用的热门选择。本文深入探讨微前端架构的概念、优势及其实现方式。微前端架构将应用分解为独立模块,每个模块可由不同团队独立开发、测试和部署,从而提高开发效率和应用的可维护性。其优势包括独立性、技术多样性、可扩展性和灵活性。实现微前端架构需定义边界、选择通信机制、构建基础框架、开发独立模块并进行集成与测试。现代Web开发中,常用方法包括使用Web Components、模块化CSS、状态管理和服务端渲染等。随着云计算和微服务架构的普及,微前端架构预计在未来几年内持续增长。