盒子模型基本介绍及知识点

水深无声 2022-12-06 15:47 137阅读 0赞

## 盒子模型 ##

盒子模型： 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（ margin）组 成。

盒子里面的文字和图片等元素是 内容区域

盒子的厚度 我们成为 盒子的边框

盒子内容与边框的距离是内边距;盒子与盒子之间的距离是外边距

2.盒子边框  
语法：border : border-width || border-style || border-color  
border: 1px solid red;

表格的细线边框 :table\{ border-collapse:collapse; \}  
3.内边距  
padding属性用于设置内边距。 是指 边框与内容之间的距离。  
4个值 padding: 上内边距 右内边距 下内边距 左内边距

实际高度： Height = content height + padding + border

实际宽度：Width = content width + padding + border

通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小  
4.布局稳定性  
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）  
原因：  
(1) margin 会有外边距合并 还有 ie6下面margin 加倍的bug\#\# 标题所以最后使用。  
(2)padding 会影响盒子大小， 需要进行加减计算 其次使用。  
(3)width 没有问题我们经常使用宽度剩余法 高度剩余法来做  
5.外边距  
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

外边距合并

相邻块元素垂直外边距的合并 ：取两个值中的较大者

嵌套块元素垂直外边距的合并（塌陷）

(1)可以为父元素定义上边框。 (2) 可以为父元素定义上内边距 (3)可以为父元素添加overflow:hidden。

块级盒子水平居中； margin:0 auto;  
文字水平居中是 text-align: center

插入图片 移动位置只能靠盒模型 padding margin  
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

清除元素的默认内外边距：padding:0;margin:0;

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关弹性盒子flex的基本介绍

文章目录弹性盒子 flex-flow flex-direction flex-wrap jus

爱被打了一巴掌/ 2023年06月02日 15:54/ 0 赞/ 47 阅读

相关盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型具有属性： 1. content内容 2. padding内边距 3. border

╰半夏微凉°/ 2023年05月31日 06:58/ 0 赞/ 31 阅读

相关盒子模型

![盒子模型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

今天药忘吃喽~/ 2023年02月16日 06:45/ 0 赞/ 135 阅读

相关盒子模型基本介绍及知识点

盒子模型盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒子模型有元素的内容、边框（border）、内边距（padding

水深无声/ 2022年12月06日 15:47/ 0 赞/ 138 阅读

相关【重识 HTML + CSS】盒子模型相关知识点

盒子模型盒子模型 (Box Model) 宽度、高度相关 CSS 属性 - width、height 内边距相关 CSS 属性 - padding

不念不忘少年蓝@/ 2022年10月16日 14:26/ 0 赞/ 235 阅读

相关 css常用干货 | 选择器 | 属性 | 盒子模型 - 知识点罗列

CSS的使用方式 1. 内联样式：内联样式又称为行内样式，使用标签的style属性来设置，只能设置一个标签的样式。谨慎使用。 2. 内部样式：写在head

墨蓝/ 2022年08月28日 05:39/ 0 赞/ 237 阅读

相关盒子模型

W3C标准的盒子模型是：width(height) 都不包含padding和border的。但是ie浏览器的盒子模型 width和height是包含padding bor

╰+攻爆jí腚メ/ 2022年07月15日 00:47/ 0 赞/ 259 阅读

相关盒子模型

盒子模型的概念页面中所有元素都可以看成是一个“矩形”，占据着一定的页面空间，这些被占用的空间都比单纯的内容要大这个矩形框就是盒子. 盒子模型的组成: ![

不念不忘少年蓝@/ 2021年11月11日 00:01/ 0 赞/ 401 阅读

相关 html中盒子模型的基本知识点盒子大小的计算

盒子模型边框的样式有 solid dashed(虚线) dotted(点线) border-style:solid; 边框的宽度:border-style:1px; 边

怼烎@/ 2021年09月15日 11:28/ 0 赞/ 964 阅读

相关盒子模型

盒子模型 ![70][] 今年过年不收礼，收礼就收五仁月饼！！！下面咱们就来讲一讲盒子模型。最近快过端午节了，收到了两盒月

- 日理万妓/ 2021年06月11日 15:11/ 0 赞/ 609 阅读