3.怪异盒模型box-sizing？弹性盒模型|盒布局?【HTML】

最新推荐文章于 2023-06-28 13:05:45 发布

weixin_30632883

最新推荐文章于 2023-06-28 13:05:45 发布

阅读量144

点赞数

原文链接：http://www.cnblogs.com/Caixingmin/p/11249768.html

版权

在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin

在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

box-sizing有两个值一个是content-box，另一个是border-box。

当设置为box-sizing:content-box时，将采用标准模式解析计算；

当设置为box-sizing:border-box时，将采用怪异模式解析计算。

转载于:https://www.cnblogs.com/Caixingmin/p/11249768.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30632883

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

html盒子模式

11-27

此外，盒子模型在CSS布局技术中扮演着核心角色，如Flexbox（弹性盒布局）和Grid（网格布局）都是基于盒子模型原理进行扩展的。学习并理解盒子模型，将有助于开发者更好地理解和应用这些先进的布局技术。总之，HTML...

盒子模型(标准盒子和怪异盒子)

lpl_L的博客

08-26

1367

盒子模型盒子模型(Box Model)： 盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。不同部分的说明： Margin(外边距) ：清除边框外的区域，外边距是透明的。 Border(边框) ：围绕在内边距和内容外的边框。 Padding(内边距) ：清除内容周围的区域，内边距是透明的。 Content(内容) ：盒子的内容，显示文本和图像。标准盒子模型和怪异盒子模型在怪异盒子模型下，一个块的总宽度

参与评论您还未登录，请先登录后发表或查看评论

CSS基础笔记七，怪异盒子和弹性盒子（弹性盒子的属性，子容器镜像（flex-direction），水平（justify-content），垂直（align-itmes），子容器的权重（flex-数））

qq_55006020的博客

06-28

3667

标准盒子模型，外边距（margin），内边距（padding），线宽（border），内容。内边距和线框会撑开容器怪异盒子模型，外边距（margin），内边距（padding），线框（border），内容。内边距和相框会压缩容器怪异盒子的开启，box-siziing：bober-box 把标准盒子变成怪异盒子content-box 把怪异盒子变成标准盒子弹性盒子模型。通过设置弹性盒子模型，可以更改子容器在父级容器的平均摆放距离开启：display-flex子容器会自动横向摆放。

CSS盒模型全面讲解，怪异模式盒模型，CSS3 box-sizing属性

热门推荐

quguang65265的博客

03-24

1万+

今天学习了一下css3的box-sizing属性，顺便又温习了一下css的盒模型，最后觉得有必要对盒模型做一个全面整理。先不考虑css3的情况，盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如：以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式

怪异盒模型 box-sizing

supming1的专栏

12-27

1817

box-sizing : content-box/border-box （content-box ）盒模型 ： width = 内容宽（border-box ）怪异盒模型 ： width = padding + border + 内容宽 怪异盒模型一般用于移动端布局。...

CSS盒子模型

LiLi的博客

12-22

6519

CSS盒子模型（Box Model）概念所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin），边框（border），内边距（padding），和实际内容（content） 1 Margin(外边距) - 清除边框外的区域，外边距是透明的 2 Border(边框) - 围绕在内边距和内容外的边框 3 Padding(内边距) - 清除内容周围的区域，内边距是透明的 4 Co

跟面试官扯了半小时的CSS的flex弹性布局，都在这里了。【看完你会更加透彻】

01-08

通过box-sizing属性可以切换这两种盒模型，content-box代表标准盒模型，而border-box则表示怪异盒模型。box-sizing属性的使用能帮助开发者更好地控制元素的总宽度，特别是在需要精确控制元素尺寸的布局设计中。 ...

H5C3面试题.docx

03-29

1. 怪异盒模型（box-sizing:border-box） 2. 渐变（linear-gradient、radial-gradient） 3. 背景（background-image、background-size、background-origin） 4. 伪类选择器（p:first-of-type、p:last-of-type、p:...

CSS3主要知识点总结+HTML5新标签(图文版).docx

11-28

- CSS3引入了`box-sizing`属性，允许开发者选择使用`content-box`（标准盒模型，宽度和高度只包含内容区域）或`border-box`（怪异盒模型，宽度和高度包含内容、内边距和边框）。 7. **CSS3新增的结构标签** - ...

Chap02-CSS.zip

11-14

为解决兼容性问题，可以使用`box-sizing`属性设定盒模型类型。三、布局 1. 浮动(float)：浮动元素会脱离标准文档流，向左或向右移动，直到其边缘碰到容器的边缘。常用在创建多列布局。 2. 定位(position)：通过`...

css3移动端布局——怪异盒模型和弹性盒模型

weixin_46579411的博客

04-14

405

一、怪异盒模型： 1、box-sizing: 属性值： box-sizing:content-box; 常规盒模型 box-sizing:border-box: 怪异盒模型（IE盒模型） 2、触发怪异盒模型： box-sizing:border-box; 3、 怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。 *{ 移动端项目css可以这样写 box-si...

怪异盒模型和flexbox弹性盒布局

m0_45229352的博客

03-02

297

前端笔记，怪异盒模型

标准盒模型和怪异盒模型的区别及box-sizing应用场景

qq_44686225的博客

04-02

6414

一:标准盒模型和怪异盒模型的区别标准盒模型:这种盒模型设置width的时候的值是内容区的宽度,如果再设置padding和margin,border的话盒子的实际宽度会增大 怪异盒模型:这种盒子的width设置的值为盒子实际的宽度,border和padding的设置不会影响盒子的实际宽度和高度如下实验: <!DOCTYPE html> <html> <head&g...

css怪异盒模型和弹性盒布局(flex)详解及其案例

piaoyi1997的博客

07-15

967

一、怪异盒模型 怪异盒模型的属性是box-sizing，他有两个属性值： 1、content-box 　　这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。　　简而言之就是，一般的盒子都是属于这种，最显著的特点就是加上padding后，盒子会被撑大，需要减去对应的高度或宽度。 2、border-box 　　为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从

怪异盒子模型和标准盒子模型的宽度计算

bubbleSweet的博客

05-09

3492

一、标准盒子模型由上图可以看到，width 只为盒子中内容 content 的大小，所以整个盒子的宽度可以计算为 width + padding（左右） + border（左右） + margin（左右）二、怪异盒子模型由上图可以看到怪异盒子模型中，width 为 content + padding（左右） + border（左右），因此整个盒子的宽度为 width + margin（左右） ...

box-sizing 弹性盒模型

林中明月间丶

01-06

217

弹性盒子布局flex, box-sizing: border-box

weixin_33883178的博客

01-07

1018

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹性盒子布局flex, box-sizing: border-box</title><meta...

简单聊一聊标准和模型和怪异盒模型的高度计算

weixin_45123004的博客

02-25

1053

什么是盒模型 CSS的盒模型是CSS技术所使用的一种思维模式，CSS里面可以形象的把所有的HTML标签当成一个矩形的盒子，类似现实生活中各种盒子。 盒模型又分为标准盒模型和怪异盒模型 标准盒模型 在标准盒子模型下，计算一个容器的总高度内容区 content + 填充补白（里面的） padding + 边框 border + 外边距（margin）如果是计算的...

公共样式初始化文件（备用）

qq_43217258的博客

10-08

308

公共样式初始化文件： 1.最简单 *{ padding:0; margin:0; list-style: none; text-decoration: none; box-sizing: border-box; } html,body,.app{ height:100%; } 2.reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq

css的盒子模型box-sizing