首页 网站技术 正文
css宽度和高度的计算方法

 2022-03-11    656  

在77ISP学技术

每日笔记，css宽度和高度，css宽度和高度的计算方法

css宽度和高度的计算方法

元素的宽度和高度

为了在所有浏览器中正确设置元素的宽度和高度，您需要了解框模型如何工作。


重要提示：使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。


实例

<div> 元素的总宽度将是 350px：

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}


计算如下：

计算如下：

320px(宽度)
+ 20px（左+右内边距）
+ 10px（左+右边框）
+ 0px（左+右外边距）
= 350px

元素的总宽度应该这样计算：


元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 =高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距


  •  标签：  
  • css
    •  

发表评论：

原文链接：https://77isp.com/post/368.html

=========================================

https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台，请勿相信其他任何渠道。

热门文章
热门标签
最新留言
友情链接

首页 IT运维空间 网云互联 1818IP网

本站资源均来自原创及互联网，仅供学习与参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。

苏ICP备2022008373号-1