发表于: 2018-08-28 21:40:44

1 925


今天没把持住,浪费了很多时间在游戏上,玩的时候很爽,过后十分后悔,不能再有下次了!

【今天完成的事】

1. 完成了任务三。

2.看了CSS权威指南基本视觉格式化一章,对块级元素和行内元素以及行内块元素(inline-block)有了大致的了解,但因为基础不好,有的地方看得不甚明白,不过收获还是很多。

【明天计划的事】

1. 看CSS权威指南的内边距,边框,外边距和浮动及定位这两章。

2.继续写任务。

【遇到的问题】

今天的任务三真是采坑无数,在让我放弃的边缘反复试探,不过我最终还是坚强的挺过来了,一把辛酸泪。任务三的开局还是很简单了,我以前用过PS,所以切图方面很简单的就过了,之后就兴致勃勃的写好了基本布局,在添加css的时候却发现一个弥天大坑。任务三要求自适应,百度之后发现rem是完成自适应的神器,就将设置了html{font-size: 625%;},于是问题来了,当时出问题时我也没截图,为了更好的说明问题,我又写了一个demo,代码如下:

这是css

效果图如下:

不知为啥图片四周有了很多空白,我原本以为是padding或者margin没清除,但是f12后发现,无论是div还是img,它们的padding和margin都是0,是的,你没看错,那空白就是如此莫名其妙,我用了很多种方法可还是不明白到底多在哪儿,这赘肉也忒神奇了。随后我就自由发挥了一下,将包裹图片的div设置了float:left;

代码如下:

 body{

         margin: 0;

         padding: 0;

         background: #ddd;

}

 html{

         font-size: 625%;

}

 .one{

         background-color:red;

        float: left;

}

 img{

        height: 84px;

        width: 84px;

}

效果如下,也许你会问为什么不直接将图片float(这是解决办法之一),我当时是自由发挥的,这大概是上天给我的考验吧。

那两大坨红色的空隙依旧是如此耀眼,那么我们继续往下探索,为了能有个对比,我添加了一个class为two的div,里面依旧包裹了一张图片;

<div class="one"><img src="tim1g.jpg"></div>

<div class="two"><img src="tim1g.jpg"></div>

css代码不变,即div.one左浮动,div正常,效果图如下:

然后我发现由于我的手贱,又多造出了一个问题。按照float的特性来讲,浮动的div.one已经脱离的文档流,浮在了半空中,那div.two就应该跑到div.one的下面才对,换句话说,div.one理论上应该将div.two覆盖掉才对,然而并没有。为了验证,我为div.two设置了背景色和高度,发现img的表现方式竟然和内联元素有些相似。效果图如下:

请忽略那个原谅色。事实证明,div.one确实将div.two覆盖了,但由于img比较特殊,有点类似于文字,为了验证,我们将div.two中的图片换成文字,看下图:

<div class="one"><img src="tim1g.jpg"></div>

<div class="two">你好库洛洛团长こんにちはクロロの団長</div>

这不就是float最初的功能,文字环绕么!有此可见img和文字纵是有点联系的,然后我就百度了一下,发现图片和文字一样都是内联元素。基础不好害死人,我绕了一大圈才找到最终结果,其实如图片文字等内联元素,它默认对齐方式都是和它的父级的 baseline 去进行对齐的,但是对齐的是 baseline,撑开高度的却是元素整体的高度(bottom line),这样肯定就会造成一定的间隙。接下来感受一下文字是如何以基线对齐的:


关于基线,行高,内容区,行距等具体内容,请点击这篇博文,写的清楚又明白:深入理解css基线与行高。说到基线对齐就不得不提到vertical-align,这个东西经常用在垂直居中的情况下,但又时灵时不灵,具体原因,请看张鑫旭大神的博客:我对CSS vertical-align的一些理解与认识

知道了问题的原因就可以上方案了,度娘上有很多,推荐一篇博文:解决img标签上下出现间隙的方法。   

世界终于清静了!

说到这里不得不提一下,img标签支持宽高,如果没有宽高的,就默认为图片本身的大小,如果只给宽度,那么高度是自适应的,如果只给高度,那么宽度也是自适应的。这种宽高等比变动的特性也许可以用来完成任务一的九宫格,具体的实践我还没做,明天有时间可以试一试。

2. 关于自适应和响应式的区别:

找了很多自适应与响应式的资料,结果看的云里雾里,越看越不明白,后来发现一张图,醍醐灌顶了。

3. 关于rem,将根元素html的字体大小设置为font-size:62.5%原因:浏览器默认字体大小是16px,rem与px关系为:1rem = 10px,10/16=0.625=62.5%,只要将设计稿中量到的px尺寸除以10就得到了相应的rem尺寸,方便极了。当然,直接将html元素设置为10px,也是可以的。

实际项目设置成 font-size: 62.5%可能会出现问题,因为chrome不支持小于12px的字体,计算小于12px的时候,会默认取12px去计算,导致chrome的em/rem计算不准确。

针对这个现象,可以尝试设置html字体为625%,即100px,body 修正为16px,这样 0.1rem 就是 10px,而body的字体仍然是默认大小,不影响未设置大小的元素的默认字体的大小。

但是具体有关媒体查询中的rem换算我还没有整明白,明天需要继续奋斗。

4. 关于viewport,参考博客:http://www.cnblogs.com/2050/p/3877280.html 明白了不少东西。

     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

      width=device-width: 页面宽度等于设备宽度。 

      initial-scale=1          :初始缩放指数为1,相对于理想视窗缩放。

      minimum-scale=1   :最小缩放指数为1

      maximum-scale=1  :最大缩放指数为1

     user-scalable=no     :用户不能对页面缩放


    Viewport 分为:视觉视窗、理想视窗、布局视窗。

    视觉视窗:设备的实际宽度,可通过window.innerWidth | window.innerHeight来获得对应的宽和高。

    布局视窗:通常比视觉视窗大,可通过document.documentElement.clientWidth | document.documentElement.clientHeight来获得宽和高。

    理想视窗( ideal viewport) : 其意义在于,无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横                                                向滚动条,都可以完美的呈现给用户。

    布局视窗的宽高值是在页面没添加viewport 时所获得的值。如果你给页面添加了viewport 并且 设置了width = device-width 时,通过上面的代码所获得的值就不是布局视窗的默认值了,而是设备宽度。

    (1) 要得到ideal viewport(理想视窗)就必须把默认的layout viewport(布局视窗)的宽度设为移动设备的屏幕宽度(视觉视窗)。因为meta viewport中的width能控制layout viewport(布局视窗)的宽度,所以我们只需要把width设为width-device(设备宽度)这个特殊的值就行了。

      <meta name="viewport" content="width=device-width">

   (2) 

      <meta name="viewport" content="initial-scale=1">这句代码也能达到和上一句代码一样的效果,也可以把当前的的viewport变为 ideal viewport(理想视窗)。因为这句代码的作用是不对当前的页面进行缩放,也就是页面本该是多大就是多大。这里的缩放是相对于 ideal viewport(理想视窗)来进行缩放的,当对ideal viewport进行100%的缩放,也就是缩放值为1的时候,就得到了 ideal viewport。


【收获】

如上。






返回列表 返回列表
评论

    分享到