CSS盒模型 骑猪看日落 2022-05-11 03:12 287阅读 0赞 # 1、盒模型基本概念： 标准模型 + IE模型 # **标准模型**的width和height不包含border和padding： ![70][] **IE模型**的width和height包含border和padding： ![70 1][] -------------------- # 2、标准模型 和 IE模型的区别 # **标准模型**的width和height不包含border和padding **IE模型**的width和height包含border和padding -------------------- # 3、CSS如何设置这两种模型 # 用CSS3的属性来区别: 标准模型 box-sizing: content-box IE模型 box-sizing: border-box 浏览器默认的content-box(即标准模型) -------------------- # 4、JS如何设置获取盒模型对应的宽和高 # (css样式分为三种：1.节点内嵌/内联，即通过style样式直接写；2.通过增加的<style></style>标签或节点的方式；3.通过link外部引入css样式表，即外联) **(1) dom.style.width/height** 只能取到该dom节点的内联属性样式的宽和高 **(2) IE -> dom.currentStyle.width/height** **Chrome/FireFox -> window.getComputedStyle(dom).width/height** 该属性取到的是浏览器渲染后的宽和高，相对比较真实准确 **(3) dom.getBoundingClientRect().width/height** 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，返回一个Object对象， 该对象有6个属性：top、lef、right、bottom、width、height。 这个值也是比较真实准确的 -------------------- # 5、BFC( 边距重叠解决方案 ) # BFC概念： 块级格式化上下文 IFC概念： 内联元素格式化上下文 BFC原理(即渲染规则)： (1) 在BFC这个元素的垂直方向的边距会发生重叠 (2) BFC的区域不会与浮动元素的box重叠，即用来清楚浮动布局的 (3) BFC在页面上是一个独立的容器，里面的元素与外面的元素不会相互影响 (4) 计算BFC高度的时候，浮动元素也会参与计算 创建BFC的方式： (1) float值不为none (2) position的值不为 static和relative (3) display的值为table的几个属性：table、table-cell、table-column . . . (4) overflow的值不为visible ， 即hidden或者auto都可以 [70]: /images/20220511/5df02ec2088e4603b29ba2aa280e765b.png [70 1]: /images/20220511/981b9d8d9d174b92be5dad40923b88d3.png
相关 CSS-盒模型 盒模型组成 先定义一个class名为box的盒子，定义宽、高、外边距、内边距、边框。 <!DOCTYPE html> <html> <h Myth丶恋晨/ 2024年03月27日 17:37/ 0 赞/ 72 阅读
相关 CSS盒模型 盒子模型： 盒子模型,又称框模型 (Box Model) ![4c87c5ede4c2210fcc827a0d7de07e1e.png][] 盒子模型主要的属性：w 不念不忘少年蓝@/ 2023年01月01日 02:58/ 0 赞/ 200 阅读
相关 CSS盒模型 1 元素分类 在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 我就是我/ 2022年06月14日 02:15/ 0 赞/ 300 阅读
相关 CSS盒模型 盒模型是CSS布局的最基本组成部分，它指定页面元素如何显示及在某种方式上如何交互，在页面上的每个元素都是以一个矩形的表现形式存在的，每个矩形是由元素的内容、内补丁（pa 旧城等待，/ 2022年05月30日 12:43/ 0 赞/ 270 阅读
相关 CSS盒模型 1）盒模型结构 ![70][] 想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性； 古城微笑少年丶/ 2022年05月27日 08:46/ 0 赞/ 283 阅读
相关 CSS盒模型 盒模型 单地说每个html标签都是一个方块，然后这个方块又包着几个小方块。盒模型分为IE盒模型和W3C标准盒模型两种。 Margin(外边距) - 清除边框外的区 r囧r小猫/ 2022年05月17日 02:25/ 0 赞/ 341 阅读
相关 CSS盒模型 1、盒模型基本概念： 标准模型 + IE模型 标准模型的width和height不包含border和padding： ![70][] IE模型的width和h 骑猪看日落/ 2022年05月11日 03:12/ 0 赞/ 288 阅读
相关 css盒模型 首先提个问题，在写HTML文件时第一行为什么要写<!DOCTYPE html>呢？ 什么是盒模型 盒模型分为标准盒模型和IE盒模型，下图是Google开发者工具的截图： 傷城~/ 2022年01月20日 07:35/ 0 赞/ 285 阅读
相关 CSS：盒模型 [2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 在CSS中有两种盒模型: (1)W3C标准盒模型：包括 悠悠/ 2022年01月13日 10:04/ 0 赞/ 316 阅读
相关 CSS盒模型 ![img1.gif][] 我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内 秒速五厘米/ 2021年11月27日 00:28/ 0 赞/ 404 阅读
Myth丶恋晨
不念不忘少年蓝@
旧城等待，
骑猪看日落
傷城~
还没有评论，来说两句吧...