034CSS3盒子模型大小计算方法

一、分类

CSS3 中可以通过 box-sizing属性来指定盒子模型大小的计算方法，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1. box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
2. box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）。

二、content-box默认

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3盒子模型大小的计算方法</title><style>.box{width: 200px;height: 100px;background-color: #ccc;margin:  100px auto;padding: 30px;border: 20px solid red;/* 默认的盒子模型计算方法，所以该语句不写也可以 *//* 1. box-sizing: content-box 盒子大小为 width + padding + border （以前默认的） *//* 所以整个盒子宽度的大小为 200px + 30px + 30px + 20px + 20px*/box-sizing: content-box;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

效果：

三、border-box

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3盒子模型大小的计算方法</title><style>.box{width: 200px;height: 100px;background-color: #ccc;margin:  100px auto;padding: 30px;border: 20px solid red;/* 2. box-sizing: border-box 盒子大小为 width *//* 所以此时的content宽度为： 200px - 30*2 - 20*2 == 100px */box-sizing:border-box;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

效果：

平时开发过程中，这种方法更加常用。

034CSS3盒子模型大小计算方法相关推荐

sizebox模型下载_Beware of box model size (留心盒子模型大小)
文章为csslint中文版译文,点击原文可查看英文版,如遇到翻译错误或错别字啥的,请留言指出~ 译文内容不定期更新~ 返回目录盒子模型是CSS当中最常误解的内容之一."盒子模型 (Box ...
CSS--怪异盒子模型
CSS–怪异盒子模型怪异盒子模型标准盒子宽度计算方法(扩张主义) border-left-width+width+padding-left+padding-right+border-right-w ...
两个相邻盒子的边框怎么只显示一个_一篇文章带你快速理解盒子模型「经典案例」...
今天带大家快速理解盒子模型,直接上代码: css盒子我的css盒子测试模型上面代码没有任何难度,只是写了一个div标签,大家已经知道,div标签是块级元素,所以会占满一行: 但是我们也注意到了图片 ...
CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型又称框模型 (Box Model) ,包 ...
简述对css盒子模型的理解_css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
CSS大小设置实例——盒子模型
一.浏览器效果和Dreamweaver设计视图: 二.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
html盒子模型包含哪些部分,CSS盒子模型由哪四部分组成？
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型,指在一个网页文档中,每个元素都被呈现为一个矩形的盒子,描述了元素所占空间的内容. CSS盒子模型由哪四部分组成? 盒子模型由元素 ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
Day05-CSS布局-盒子模型
CSS布局-盒子模型一.CSS三大特性 3.1 优先级的介绍 3.2 权重叠加计算 3.3 (拓展)权重叠加计算案例 4.1 Chrome调试工具二.PxCook的基本使用三.盒子模型 1.1 ...

034CSS3盒子模型大小计算方法

一、分类

二、content-box默认

三、border-box

034CSS3盒子模型大小计算方法相关推荐

最新文章

热门文章