(前端)html与css css 14、父子盒模型 梦里梦外; 2021-11-05 16:54 290阅读 0赞 ## 父子盒模型 ## 子盒子的整体占位不能超过父盒子的内容区域 父盒子的内容区域宽度≥子盒子width+padding\*2+border\*2 ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .outer{ width: 400px; height: 400px; border: 1px solid red; margin: 20px auto; } .inner{ width: 360px; height: 200px; padding: 0 20px; background-color: skyblue; margin: 0 auto; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html> ![1365792-20190718100536895-1544518057.png][] 如果子盒子不设置宽度,会自动撑满父亲,宽度是父亲的100%,如果你再设置边框,边距,他会自动内减,不需要再手动减少width。 ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .outer{ width: 500px; border: 1px solid red; margin: 20px auto; } .inner{ padding: 10 20px; background-color: skyblue; line-height: 28px; border: 6px solid blue; } </style> </head> <body> <div class="outer"> <div class="inner">文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</div> </div> </body> </html> ![1365792-20190718101108619-316570692.png][] 转载于:https://www.cnblogs.com/StevenSunYiwen/p/11205414.html [ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif [ExpandedBlockStart.gif]: /images/20211104/1fa9a22efdab4a3fa7db702125dfc942.png [1365792-20190718100536895-1544518057.png]: /images/20211104/145c4159293a495786cd6ae62c0f5381.png [1365792-20190718101108619-316570692.png]: /images/20211104/0d5b557fdd5f4f418e759a8eb06c0cf8.png
相关 web前端 之 CSS盒模型 CSS盒模型 题目:谈谈你对CSS盒模型的认识 基本概念:标准模型+IE模型 这两者的区别(计算高度和宽度的不同) CSS如 女爷i/ 2023年05月29日 05:14/ 0 赞/ 9 阅读
相关 CSS盒模型 盒子模型: 盒子模型,又称框模型 (Box Model) ![4c87c5ede4c2210fcc827a0d7de07e1e.png][] 盒子模型主要的属性:w 不念不忘少年蓝@/ 2023年01月01日 02:58/ 0 赞/ 153 阅读
相关 CSS盒模型 1 元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 我就是我/ 2022年06月14日 02:15/ 0 赞/ 245 阅读
相关 CSS盒模型 盒模型是CSS布局的最基本组成部分,它指定页面元素如何显示及在某种方式上如何交互,在页面上的每个元素都是以一个矩形的表现形式存在的,每个矩形是由元素的内容、内补丁(pa 旧城等待,/ 2022年05月30日 12:43/ 0 赞/ 218 阅读
相关 CSS盒模型 1)盒模型结构 ![70][] 想象一个盒子,它有:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性; 古城微笑少年丶/ 2022年05月27日 08:46/ 0 赞/ 231 阅读
相关 CSS盒模型 盒模型 单地说每个html标签都是一个方块,然后这个方块又包着几个小方块。盒模型分为IE盒模型和W3C标准盒模型两种。 Margin(外边距) - 清除边框外的区 r囧r小猫/ 2022年05月17日 02:25/ 0 赞/ 285 阅读
相关 CSS盒模型 1、盒模型基本概念: 标准模型 + IE模型 标准模型的width和height不包含border和padding: ![70][] IE模型的width和h 骑猪看日落/ 2022年05月11日 03:12/ 0 赞/ 237 阅读
相关 HTML/CSS -- CSS盒模型 基本概念 CSS盒模型分为俩种: 1:标准盒模型 2:IE盒模型 它们俩个的区别在于width和height的计算方式区别 ![watermark_type_Z Dear 丶/ 2022年03月30日 05:25/ 0 赞/ 191 阅读
相关 CSS盒模型 ![img1.gif][] 我们可以把它想像成现实中上方开口的盒子,然后从正上往下俯视,边框相当于盒子的厚度,内容相对于盒子中所装物体的空间,而填充呢,相当于为防震而在盒子内 秒速五厘米/ 2021年11月27日 00:28/ 0 赞/ 355 阅读
相关 (前端)html与css css 14、父子盒模型 父子盒模型 子盒子的整体占位不能超过父盒子的内容区域 父盒子的内容区域宽度≥子盒子width+padding\2+border\2 ![ContractedBlock 梦里梦外;/ 2021年11月05日 16:54/ 0 赞/ 291 阅读
还没有评论,来说两句吧...