发表于： 2019-06-04 23:43:02
1 839
今天完成的事：
复习了盒子模型，通过谷歌搜索获取到优质文章对盒子模型有了详细了解。
参考文献：https://juejin.im/post/59ef72f5f265da4320026f76
作者：哆来咪er
可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。
盒模型分为IE盒模型和W3C标准盒模型。
IE盒模型和W3C标准盒模型的区别是什么？
1. W3C 标准盒模型：
属性width,height只包含内容content，不包含border和padding。
2. IE 盒模型：
属性width,height包含border和padding，指的是content+padding+border。
在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的。
content-box（标准盒模型）
width = 内容的宽度
height = 内容的高度
border-box（IE盒模型）
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
盒子的大小为content+padding+border即内容的(width)+内边距的再加上边框，而不加上margin。很多时候，我们会错误地把margin算入。
css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定，把margin算进去的那是盒子占据的位置，而不是盒子的大小！
当我们为盒子设置box-sizing属性为border-box会发现：无论我们怎么改border和padding盒子大小始终是定义的width和height。
明天计划的事：
了解viewport并应用在程序里解决移动端页面显示问题
遇到的问题：
在开发者模式里切换到移动端，对页面进行缩放盒子的最小宽度锁死在了868px，页面缩小盒子宽度不变，整体样式随着页面缩小放大不能自适应。
收获：详细的了解了盒子模型原理，对float浮动有了深度了解，在任务中使用了左浮动和右浮动对下面两个图标就行了定位。
返回列表
评论