2023年6月20日发(作者：)

css盒⼦模型实验报告总结_html盒⼦模型和CSS难点总结⼩马把写HTML理解为就是盒⼦的嵌套和堆叠，⼀切皆盒⼦。CSS定位和浮动⼩马觉得是前端⾥算难理解的⼀部分吧，在此总结复盘下。HTML盒⼦模型话不多说，直接上⼀段代码(参考来⾃这⾥)：div { width: 400px;height: 100px;border: 6px solid #949599;margin: 20px;padding: 20px;}效果(图⽚来⾃这⾥)：这⾥⾮常有趣，实际所占的空间是：width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-leftheight = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom也就是：Width: 492 = 20 + 6 + 20 + 400 + 20 + 6 + 20Height: 192 = 20 + 6 + 20 + 100 + 20 + 6 + 20为什么呢？这就是盒⼦模型的概念。特别值得注意的是padding的⽩⾊背景，是的，它的空间是和内容空间⼀样的，也就是如果内容部分是红⾊背景，那么padding也是红⾊的，直接影响了可见区域的效果。总结起来就是，内外边距都是透明的。可以来这⾥体验⼩⼯具感受⼀下。因此我们写HTML时候经常做的第⼀步⼯作就是先把基本的元素进⾏重置，使其能够到顶部。⽐如：body,div,dt,dl,dd,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,textarea{ margin:0;padding:0;font-family:"Helvetica Neue",;}块级和内联元素块级元素在浏览器显⽰时，通常会以新⾏来开始(和结束)。实例:,,,内联元素在显⽰时通常不会以新⾏开始。实例: ,,, , ，定义了⽂档的区域，块级 (block-level)⽤来组合⽂档中的⾏内元素， 内联元素(inline)布局的时候注意：ul,ol,dl等的使⽤可以事半功倍。CSS position 和浮动CSS position 属性:把元素放置到⼀个静态的、相对的、绝对的、或固定的位置中。脱不脱离⽂档流是 对定位前原本位置还占不占⽂档空间⽽⾔，脱离⽂档流则不占原⽂档空间。不脱离则相对原位置定位，脱离则相对于⽗级元素来定位。相对定位原位置不脱离⽂档流(相对于原位置左上⾓的点)，绝对定位原位置脱离⽂档流(相对于⽗元素的左上⾓的点)。float是脱离⽂档流的，但浮动的元素是⼀个接⼀个紧挨着的且满了就往下，没有⾏概念(参考下图“浮动”)。因此经常对某个div(浮动或不浮动)使⽤clear:both; 来清除元素周边的浮动，使后⾯的新元素正常换⾏。clear 属性的值可以是 left、right、both 或 none，它表⽰框的哪些边不应该挨着浮动框。强制换⾏。不管脱不脱离⽂档流，定位或者浮动的元素都是会对其他元素造成覆盖的。以下图⽚来w3c。图1中框1原位置不占位，图2中框1覆盖了不浮动的框2说明浮动就是⼀个挨⼀个，没有⾏概念这⾥清理div是⾮浮动的，clear的妙⽤是撑开了原来不浮动的容器div对容器进⾏浮动也是⼀种解决⽅案还有css的继承性也是⼀个很好玩的东西，哈哈。HTML框架iframe等于新开⼀个浏览器打开src源内容。(内嵌访问其他⽹页内容)例⼦：注意src属性。前端⾃适应实现⽅法⽔平有限，⼩马这⾥只抛砖引⽟不做深究，(参考⽂章)。1、使⽤meta标签：viewport类似：2、使⽤css3单位rem使⽤ em 来设置字体⼤⼩如果要避免在 Internet Explorer 中⽆法调整⽂本的问题，许多开发者使⽤ em 单位代替 pixels。W3C 推荐使⽤ em 尺⼨单位。1em 等于当前的字体尺⼨。如果⼀个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体⼤⼩时，em 的值会相对于⽗元素的字体⼤⼩改变。浏览器中默认的⽂本⼤⼩是 16 像素。因此 1em 的默认尺⼨是 16 像素。可以使⽤下⾯这个公式将像素转换为 em：pixels/16=em(注：16 等于⽗元素的默认字体⼤⼩，假设⽗元素的 font-size 为 20px，那么公式需改为：pixels/20=em)⼿机的可变像素部分⽤rem 宽度⽤百分⽐以html的字体宽度(默认1rem=16px)为基础来控制rem代表的像素，⽀持⾃响应。body默认字体的像素不同则像素也不同。html, body {font-size: 100%;/*1rem=16px*/}.f3m {font-size:.3rem;width:0.3rem;}3、使⽤css3媒体查询媒体查询的功能就是为不同的媒体设置不同的css样式，这⾥的“媒体”包括页⾯尺⼨，设备屏幕尺⼨等。例如：如果浏览器窗⼝⼩于 500px, 背景将变为浅蓝⾊：@media only screen and (max-width: 500px) {body {background-color: lightblue;}}4、使⽤百分⽐css的百分⽐值是相对于⽗级元素的。body默认宽度是屏幕宽度(PC中指的是浏览器宽度)⼦孙元素按百分⽐定位(或指定尺⼨)就可以了，这只适合布局简单的页⾯，复杂的页⾯实现很困难。在使⽤百分⽐布局的时候需要注意的⼏点：1.你所设置的百分⽐，是针对他的⽗级元素来说的，⽽不是浏览器的宽度。2.当你设置了width：100%时，请避免设置margin和padding。因为你的div实际宽度将是width+margin+padding 从⽽⼤于外框。3.每⼀⾏中，如果存在多个div，尽量不要让他们的总宽度刚好等于100%。原因是，当像素数出现⼩数时，浏览器是采取四舍五⼊的⽅式计算的。⽐如你的外框是11像素宽，⾥边的两个div的宽带均设置为50%，则计算为5.5px,浏览器四舍五⼊的算法得出6px，所以总宽度将变成12px，超出了外框的总宽度。所以我们在设置的时候尽量不要把总宽度设置成100%。4.为整个⽹站设置最⼩宽度，为了保证⽤户在任何浏览器窗⼝中都能正常浏览，避免那种极端⼩的浏览器窗⼝，你可以写上min-width 以保证页⾯不变形，在浏览器窗⼝极⼩时出现横向滚动条。但是IE6是不⽀持此属性的，可以针对IE6使⽤js控制⼀下。设计稿的⽹页⼤⼩⼀般会是1024 * 768。5、前端框架 Bootstrap等

2023年6月20日发(作者：)

css盒⼦模型实验报告总结_html盒⼦模型和CSS难点总结⼩马把写HTML理解为就是盒⼦的嵌套和堆叠，⼀切皆盒⼦。CSS定位和浮动⼩马觉得是前端⾥算难理解的⼀部分吧，在此总结复盘下。HTML盒⼦模型话不多说，直接上⼀段代码(参考来⾃这⾥)：div { width: 400px;height: 100px;border: 6px solid #949599;margin: 20px;padding: 20px;}效果(图⽚来⾃这⾥)：这⾥⾮常有趣，实际所占的空间是：width = margin-right + border-right + padding-right + width + padding-left + border-left + margin-leftheight = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom也就是：Width: 492 = 20 + 6 + 20 + 400 + 20 + 6 + 20Height: 192 = 20 + 6 + 20 + 100 + 20 + 6 + 20为什么呢？这就是盒⼦模型的概念。特别值得注意的是padding的⽩⾊背景，是的，它的空间是和内容空间⼀样的，也就是如果内容部分是红⾊背景，那么padding也是红⾊的，直接影响了可见区域的效果。总结起来就是，内外边距都是透明的。可以来这⾥体验⼩⼯具感受⼀下。因此我们写HTML时候经常做的第⼀步⼯作就是先把基本的元素进⾏重置，使其能够到顶部。⽐如：body,div,dt,dl,dd,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,textarea{ margin:0;padding:0;font-family:"Helvetica Neue",;}块级和内联元素块级元素在浏览器显⽰时，通常会以新⾏来开始(和结束)。实例:,,,内联元素在显⽰时通常不会以新⾏开始。实例: ,,, , ，定义了⽂档的区域，块级 (block-level)⽤来组合⽂档中的⾏内元素， 内联元素(inline)布局的时候注意：ul,ol,dl等的使⽤可以事半功倍。CSS position 和浮动CSS position 属性:把元素放置到⼀个静态的、相对的、绝对的、或固定的位置中。脱不脱离⽂档流是 对定位前原本位置还占不占⽂档空间⽽⾔，脱离⽂档流则不占原⽂档空间。不脱离则相对原位置定位，脱离则相对于⽗级元素来定位。相对定位原位置不脱离⽂档流(相对于原位置左上⾓的点)，绝对定位原位置脱离⽂档流(相对于⽗元素的左上⾓的点)。float是脱离⽂档流的，但浮动的元素是⼀个接⼀个紧挨着的且满了就往下，没有⾏概念(参考下图“浮动”)。因此经常对某个div(浮动或不浮动)使⽤clear:both; 来清除元素周边的浮动，使后⾯的新元素正常换⾏。clear 属性的值可以是 left、right、both 或 none，它表⽰框的哪些边不应该挨着浮动框。强制换⾏。不管脱不脱离⽂档流，定位或者浮动的元素都是会对其他元素造成覆盖的。以下图⽚来w3c。图1中框1原位置不占位，图2中框1覆盖了不浮动的框2说明浮动就是⼀个挨⼀个，没有⾏概念这⾥清理div是⾮浮动的，clear的妙⽤是撑开了原来不浮动的容器div对容器进⾏浮动也是⼀种解决⽅案还有css的继承性也是⼀个很好玩的东西，哈哈。HTML框架iframe等于新开⼀个浏览器打开src源内容。(内嵌访问其他⽹页内容)例⼦：注意src属性。前端⾃适应实现⽅法⽔平有限，⼩马这⾥只抛砖引⽟不做深究，(参考⽂章)。1、使⽤meta标签：viewport类似：2、使⽤css3单位rem使⽤ em 来设置字体⼤⼩如果要避免在 Internet Explorer 中⽆法调整⽂本的问题，许多开发者使⽤ em 单位代替 pixels。W3C 推荐使⽤ em 尺⼨单位。1em 等于当前的字体尺⼨。如果⼀个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体⼤⼩时，em 的值会相对于⽗元素的字体⼤⼩改变。浏览器中默认的⽂本⼤⼩是 16 像素。因此 1em 的默认尺⼨是 16 像素。可以使⽤下⾯这个公式将像素转换为 em：pixels/16=em(注：16 等于⽗元素的默认字体⼤⼩，假设⽗元素的 font-size 为 20px，那么公式需改为：pixels/20=em)⼿机的可变像素部分⽤rem 宽度⽤百分⽐以html的字体宽度(默认1rem=16px)为基础来控制rem代表的像素，⽀持⾃响应。body默认字体的像素不同则像素也不同。html, body {font-size: 100%;/*1rem=16px*/}.f3m {font-size:.3rem;width:0.3rem;}3、使⽤css3媒体查询媒体查询的功能就是为不同的媒体设置不同的css样式，这⾥的“媒体”包括页⾯尺⼨，设备屏幕尺⼨等。例如：如果浏览器窗⼝⼩于 500px, 背景将变为浅蓝⾊：@media only screen and (max-width: 500px) {body {background-color: lightblue;}}4、使⽤百分⽐css的百分⽐值是相对于⽗级元素的。body默认宽度是屏幕宽度(PC中指的是浏览器宽度)⼦孙元素按百分⽐定位(或指定尺⼨)就可以了，这只适合布局简单的页⾯，复杂的页⾯实现很困难。在使⽤百分⽐布局的时候需要注意的⼏点：1.你所设置的百分⽐，是针对他的⽗级元素来说的，⽽不是浏览器的宽度。2.当你设置了width：100%时，请避免设置margin和padding。因为你的div实际宽度将是width+margin+padding 从⽽⼤于外框。3.每⼀⾏中，如果存在多个div，尽量不要让他们的总宽度刚好等于100%。原因是，当像素数出现⼩数时，浏览器是采取四舍五⼊的⽅式计算的。⽐如你的外框是11像素宽，⾥边的两个div的宽带均设置为50%，则计算为5.5px,浏览器四舍五⼊的算法得出6px，所以总宽度将变成12px，超出了外框的总宽度。所以我们在设置的时候尽量不要把总宽度设置成100%。4.为整个⽹站设置最⼩宽度，为了保证⽤户在任何浏览器窗⼝中都能正常浏览，避免那种极端⼩的浏览器窗⼝，你可以写上min-width 以保证页⾯不变形，在浏览器窗⼝极⼩时出现横向滚动条。但是IE6是不⽀持此属性的，可以针对IE6使⽤js控制⼀下。设计稿的⽹页⼤⼩⼀般会是1024 * 768。5、前端框架 Bootstrap等