Day 12

今天完成的事情

      1. 修改任务三

      2.复习了浮动，并学习了弹性盒子

遇到的问题

      1.在修改任务的时候，突然发现body的盒子上多出来一块空隙，怎么找都找不到问题出在哪了

        直到学习浮动的时候看到一篇文章，里面有这样一句话

如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。

margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。

所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。

收获 

      1. 明白了可以自适应手机端的代码的具体含义

width=device-width ：表示宽度是设备屏幕的宽度

height=device-height ：表示高度是设备屏幕的高度

initial-scale：表示初始的缩放比例

minimum-scale：表示最小的缩放比例

maximum-scale：表示最大的缩放比例

user-scalable：表示用户是否可以调整缩放比例

即：如果想要一打开网页，自动以原始比例显示，并且不允许用户拖动和放大缩小的话

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />

      2. 整理浮动及相关知识点

       首先，web页面的制作是“流”状的，必须从上而下，像织毛衣，它的微观表现主要有

· 空白折叠

· 底边对齐

· 自动换行

       标准文档流内等级森严，标签分为两种等级

· 行内元素（只占据内容所需宽度，不能设计宽高）

· 块级元素（占满整个一行，接受设计宽高，默认为父元素宽度的100%）

       行内元素与块级元素的分类

       我们可以通过display属性将块级元素与行内元素互相转换

· display：inline 将块级元素转化为行内元素

· display: block 将行内元素转化为块级元素

· display：inline-block 既具有行内元素的可并行性又同块级元素一样可设置宽高

       在CSS中一共有三种方式脱离标准流

· 浮动

· 绝对定位

· 固定定位

       · 浮动的表现形式：块级元素在页面当中自上而下独占一行，在元素浮动之后，就会被移出正常的文档流，根据设置在上方进行平移，直至碰到所处容器的边框或另一个浮动元素为止，元素浮动之后就不会影响到块级框的布局，只会影响内联框的排列

        浮动也会造成混乱，为了消除浮动带来的影响，我们可以

                      · 给浮动元素的祖先元素增加高度：只要浮动在一个有高度的盒子里，这个浮动就不会影响后面的浮动元素

                      · clear:both 即清除左右浮动，但如果盒子没有设置高度，则会出现margin属性失效的问题

                      · overflow:hidden overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要裁切隐藏掉。但它的副作用可以清除浮动，且能够使margin生效

                      （overflow的拓展知识）

明天计划学习

      继续完善任务三，并学习相关知识点