CSS盒模型 r囧r小猫 2022-05-17 02:25 356阅读 0赞 ### 盒模型 ### 单地说每个html标签都是一个方块，然后这个方块又包着几个小方块。盒模型分为IE盒模型和W3C标准盒模型两种。 * **Margin(外边距)** - 清除边框外的区域，外边距是透明的。 * **Border(边框)** - 围绕在内边距和内容外的边框。 * **Padding(内边距)** - 清除内容周围的区域，内边距是透明的。 * **Content(内容)** - 盒子的内容，显示文本和图像 ![70][] ### CSS3盒模型新内容： ### 1. 在 [CSS 盒子模型][CSS] 的默认定义里，对一个元素所设置的 [`width`][width] 与 [`height`][height] 只会应用到这个元素的内容区。如果这个元素有任何的 [`border`][border] 或 [`padding`][padding] ，盒子会被撑大。而box-sizing 就是规定盒子大小，把border padding content 包含在里面。 box- sizing ：content-box 默认。 盒子大小= width + padding + border box - sizing ：border- box 盒子大小 等于 width ；padding 与border包含在设置的宽度里面。content自动调整 2. * 例子（ box- sizing）：鼠标点击 盒子 显示透明边框。（盒子大小不改变） <style> img{ width: 500px; height: 350px; } div{ width: 500px; position: relative; height: 350px; overflow: hidden; border-radius: 10px; } div:hover::after{ content: ""; position: absolute; top: 0; left: 0; width:500px; height: 350px; border: 10px solid pink; margin: 0; box-sizing: border-box; } </style> <!-- 1.直接用div：hover 肯定是不行的，因为border把盒子撑大；高度会掉下--> <!-- 2.所以考虑用伪元素做把border加在盒子里面，border是盒子里面的内容就不会下陷。position调整位置--> <!-- 3 .box-sizing 负责调整内容盒子大小保持不变--> <body> <div > <img src="images/moss.jpg" alt=""> </div> </body> 效果：![20190813134917761.gif][] * 例子（） ** ** [70]: /images/20220517/1f89e0b6890c4f41b4fa7a083e78a071.png [CSS]: https://developer.mozilla.org/en-US/docs/CSS/Box_model [width]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/width [height]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/height [border]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/border [padding]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding [20190813134917761.gif]: /images/20220517/ab53188a5b6e4d8ab21aed61554e69ca.png
相关 CSS-盒模型 盒模型组成 先定义一个class名为box的盒子，定义宽、高、外边距、内边距、边框。 <!DOCTYPE html> <html> <h Myth丶恋晨/ 2024年03月27日 17:37/ 0 赞/ 91 阅读
相关 CSS盒模型 盒子模型： 盒子模型,又称框模型 (Box Model) ![4c87c5ede4c2210fcc827a0d7de07e1e.png][] 盒子模型主要的属性：w 不念不忘少年蓝@/ 2023年01月01日 02:58/ 0 赞/ 213 阅读
相关 CSS盒模型 1 元素分类 在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 我就是我/ 2022年06月14日 02:15/ 0 赞/ 322 阅读
相关 CSS盒模型 盒模型是CSS布局的最基本组成部分，它指定页面元素如何显示及在某种方式上如何交互，在页面上的每个元素都是以一个矩形的表现形式存在的，每个矩形是由元素的内容、内补丁（pa 旧城等待，/ 2022年05月30日 12:43/ 0 赞/ 287 阅读
相关 CSS盒模型 1）盒模型结构 ![70][] 想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性； 古城微笑少年丶/ 2022年05月27日 08:46/ 0 赞/ 299 阅读
相关 CSS盒模型 盒模型 单地说每个html标签都是一个方块，然后这个方块又包着几个小方块。盒模型分为IE盒模型和W3C标准盒模型两种。 Margin(外边距) - 清除边框外的区 r囧r小猫/ 2022年05月17日 02:25/ 0 赞/ 357 阅读
相关 CSS盒模型 1、盒模型基本概念： 标准模型 + IE模型 标准模型的width和height不包含border和padding： ![70][] IE模型的width和h 骑猪看日落/ 2022年05月11日 03:12/ 0 赞/ 306 阅读
相关 css盒模型 首先提个问题，在写HTML文件时第一行为什么要写<!DOCTYPE html>呢？ 什么是盒模型 盒模型分为标准盒模型和IE盒模型，下图是Google开发者工具的截图： 傷城~/ 2022年01月20日 07:35/ 0 赞/ 299 阅读
相关 CSS：盒模型 [2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 在CSS中有两种盒模型: (1)W3C标准盒模型：包括 悠悠/ 2022年01月13日 10:04/ 0 赞/ 337 阅读
相关 CSS盒模型 ![img1.gif][] 我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内 秒速五厘米/ 2021年11月27日 00:28/ 0 赞/ 422 阅读
Myth丶恋晨
不念不忘少年蓝@
旧城等待，
骑猪看日落
傷城~
还没有评论，来说两句吧...