CSS:盒模型 悠悠 2022-01-13 10:04 336阅读 0赞 [2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 在CSS中有两种盒模型: (1)W3C标准盒模型:包括content(内容),padding(内边距:内容与边框的距离),border(边框);margin(与其他元素的距离),在此模型中,width/height(宽度和高度就是内容的宽和高); (2)IE下怪异模型:当html没有写<!doctype html>时,在IE6下就会开启怪异模式,此时的宽度和高度(width/height)=content+padding+border; eg: 应用: * 在父子盒子中,给子元素加padding想要移动子元素的位置,而不改变父元素的大小,可以将标准模型转化为怪异模型(box-sizing:border-box;); * eg:![65698628786737440914f2dc160ee4ae338.jpg][] * 结果:![ad2f2cdeda89e92230aa9a827b43dfbb769.jpg][] * **box-sizing:border-box的应用:原生普通文本框<input >和文本域<textarea>的100%自适应父容器的宽度;**width/border 和 padding 注定要共存,同时还要整体宽度 100%自适应容器。**<input >,<textarea>都有border,而且需要padding的大小,否则输入的光标会顶着边框。** **解决: textarea\{** **width:100%;** **-ms-box-sizing:border-box** **box-sizing:border-box;** **\}** * **eg:** * ![2908ba7a79874fb17251897b059dec06b30.jpg][] * 结果 * ![19d8a9cf26a3f75138ec55d045d916523c1.jpg][] * **box-sizing:改变width****/height****的作用细节;** **内在盒子:content-box,padding-box,border-box,margin-box;默认情况下width是作用在content-box上的,box-sizing的作用是把width作用的盒子变成其他几个;** **\{** **box-sizing:content-box;//默认值** **box-sizing:padding-box;//** **box-sizing:border-box;//支持,此时,border和padding****/content****平分width** **box-sizing:margin-box;//不支持** **注意事项:绝对定位的元素,使用百分比设置其宽和高时,它参考的是其第一个定位非static祖先节点的padding-box;即width:padding+content** 转载于:https://my.oschina.net/u/4045971/blog/3017010 [2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697 [hot3.png]: /images/20220113/8afedfcd9e094dc9b9f993b89bb7a7c6.png [65698628786737440914f2dc160ee4ae338.jpg]: /images/20220113/a7bec29efd744174991f2681945d38cd.png [ad2f2cdeda89e92230aa9a827b43dfbb769.jpg]: /images/20220113/76cf4c99f8bd431793cda3e5767c5d38.png [2908ba7a79874fb17251897b059dec06b30.jpg]: /images/20220113/f1b9d5fc8bea44e692b4df49b189cc45.png [19d8a9cf26a3f75138ec55d045d916523c1.jpg]: /images/20220113/b333dcfb38f644bf8e01b086dabb0966.png
相关 CSS-盒模型 盒模型组成 先定义一个class名为box的盒子,定义宽、高、外边距、内边距、边框。 <!DOCTYPE html> <html> <h Myth丶恋晨/ 2024年03月27日 17:37/ 0 赞/ 90 阅读
相关 CSS盒模型 盒子模型: 盒子模型,又称框模型 (Box Model) ![4c87c5ede4c2210fcc827a0d7de07e1e.png][] 盒子模型主要的属性:w 不念不忘少年蓝@/ 2023年01月01日 02:58/ 0 赞/ 212 阅读
相关 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 赞/ 356 阅读
相关 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 赞/ 298 阅读
相关 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 赞/ 421 阅读
还没有评论,来说两句吧...