css盒子模型实验报告总结-html盒子模型和CSS难点总结

css盒⼦模型实验报告总结_html盒⼦模型和CSS难点总结⼩马把写HTML理解为就是盒⼦的嵌套和堆叠，⼀切皆盒⼦。CSS定位和浮动⼩马觉得是前端⾥算难理解的⼀部分吧，在此总结复盘下。HTML盒⼦模型话不多说，直接上⼀段代码(参考来⾃这⾥)：div{width:400px;height:100px;border:6pxsolid#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:"HelveticaNeue",;}块级和内联元素块级元素在浏览器显⽰时，通常会以新⾏来开始(和结束)。实例:,,,内联元素在显⽰时通常不会以新⾏开始。实例:,,,，定义了⽂档的区域，块级(block-level)⽤来组合⽂档中的⾏内元素，内联元素(inline)布局的时候注意：ul,ol,dl等的使⽤可以事半功倍。CSSposition和浮动CSSposition属性:把元素放置到⼀个静态的、相对的、绝对的、或固定的位置中。脱不脱离⽂档流是对定位前原本位置还占不占⽂档空间⽽⾔，脱离⽂档流则不占原⽂档空间。不脱离则相对原位置定位，脱离则相对于⽗级元素来定位。相对定位原位置不脱离⽂档流(相对于原位置左上⾓的点)，绝对定位原位置脱离⽂档流(相对于⽗元素的左上⾓的点)。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来设置字体⼤⼩如果要避免在InternetExplorer中⽆法调整⽂本的问题，许多开发者使⽤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,背景将变为浅蓝⾊：@mediaonlyscreenand(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.为整个⽹站设置最⼩宽度，为了保证⽤户在任何