美文网首页我爱编程
2018-02-08 为什么你写的 height:100% 不

2018-02-08 为什么你写的 height:100% 不

作者: 胡諾 | 来源:发表于2018-02-09 09:10 被阅读0次

    第一组:杨昊 为什么你写的 height:100% 不起作用?

    之前小黄有问过我这个问题,我虽然搞定了,但是具体是什么情况却没有具体的回复。事后我查过网上的解释,现在分享给大家。

    1.百分比宽高的设定

    按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的:
    http://www.w3school.com.cn/cssref/prdimwidth.asp
    http://www.w3school.com.cn/cssref/prdimheight.asp

    2.width:100%;

    我们写下这样一段代码,随意设置一个背景色便于观察元素

    <body>
    <div tyle="width:100%;height:100%;background-color:blueviolet;">
     width:100%;height:100%; 
    </div>
    </body>
    
    <body>
       <divstyle="width:100%;height:200px;background-color:blueviolet;">
       width:100%;height:200px;
       </div>
    </body>
    

    效果如下:


    可以看到基本上宽的100%很容易就实现的,但是这里的height却不能设置成%比的(该元素会消失看不见),这是为什么呢?

    3. 浏览器是如何计算高度和宽度的

    Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽,会自动填满整个横向宽度,如下:
    <div style="height:100%;">height:100%;</div>


    但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。

    因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。

    即父元素的高度只是一个缺省值:height: auto;我们设置height:100%时,是要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。
    各个浏览器对于宽高的解析也不相同,大家可以自己搜索一下。
    参考:http://www.webhek.com/post/css-100-percent-height.html

    4.如何解决

    现在你知道了吧,%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。


    第二组:叶佳意 Angular JS过滤器

    • uppercase|lowercase:大小写转换过滤
    • json:json格式过滤
    • date:日期格式过滤
    • number:数字格式过滤
    • currency:货币格式过滤
    • filter:查找
    • limitTo:字符串对象截取
    • orderBy:对象排序

    第三组:蔡永坚 AugularJS-功能介绍2

    ajax

    $http 服务是AngularJS的核心服务之一,它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流。

    $http 服务是这样一个函数:它接受一个设置对象,其中指定了如何创建HTTP请求;它将返回一个承诺(*参考JavaScript异步编程的promise模式),其中提供两个方法: success方法和error方法。

    demoApp.controller("demoController", function($http, $scope){
    $scope. getAjaxUser = function(){
    $http.get({url:"../xxx.action"}).success(function(data){
    alert(data);
    }).error(function(){
    Alert(“出错了!”);
    });
     
    };
    });
    

    AngularJS的AJAX与jquery等框架的AJAX基本一致,这里就不多说了。

    表达式

    ng中的表达式与javascript表达式类似但是不可以划等号,它是ng自己定义的一套模式。表达式可以作为指令的值,如ng-modle=”people.name”、ng-click=”showMe()”,看起来是如此像字符串,故而也叫字符串表达式。也可以在标记中使用表达式,如{{1+2}},或者与过滤器一起使用{{1+2 | currency}}。在框架内部,字符串不会简单的使用eval()来执行,而是有一个专门的$parse服务来处理。在ng表达式中不可以使用循环语句、判断语句,事实上在模板中使用复杂的表达式也是一个不推荐的做法,这样视图与逻辑就混杂在一起了

    我们在使用其他模板库时,一般都会有模板的循环输出、分支输出、逻辑判断等类似的控制。

    要想理解指令属性的运作,我们必须先理解表达式。在之前的例子里我们已经见过表达式,例如 {{ user.name }}。
    请查看例03、例04、例05。
    {{ 8 + 1 }} 9
    {{ person }} {"name":"Ari Lerner"}
    {{ 10 * 3.3 | currency }} $33.00
    表达式粗略来看有点像 eval(javascript) 的结果。它们会经过Angular.js的处理,从而拥有以下重要而独特的性质:

    • 所有表达式都在scope这个context里被执行,因此可以使用所有本地 $scope 中的变量。
    • 如果一个表达式的执行导致类型错误或引用错误,这些错误将不会被抛出。
    • 表达式里不允许任何控制函数流程的功能(如if/else等条件语句)
    • 表达式可接受一个或多个串联起来的过滤器。

    第四组:张元一 Pygame编写游戏《外星人入侵》

    三.创建飞船
    ship.py
    import pygame
    from pygame.locals import *
    class Ship():
        def __init__(self,ai_settings,screen):
            self.screen = screen
            self.ai_settings = ai_settings
            self.image = pygame.image.load('images/ship.bmp')
            self.rect = self.image.get_rect()
            self.screen_rect = screen.get_rect()
            self.rect.centerx = self.screen_rect.centerx
            self.rect.bottom = self.screen_rect.bottom
            self.center = float(self.rect.centerx)
            self.moving_right = False
            self.moving_left = False
    
        def update(self):
            if self.moving_right and self.rect.right < self.screen_rect.right:
                self.center += self.ai_settings.ship_speed_factor
            if self.moving_left and self.rect.left > 0:
                self.center -= self.ai_settings.ship_speed_factor
    
            self.rect.centerx = self.center
    
        def blitme(self):
            self.screen.blit(self.image,self.rect)
    
        def center_ship(self):
            self.center = self.screen_rect.centerx
    

    其中,飞船图片为png格式时,若pygame不能正常识别,可使用工具JQTools 进行转换,下载地址:https://github.com/188080501/JQTools

    四.在屏幕上绘制飞船
    alien_invasion.py
        ship = Ship(ai_settings,screen)
    while True:
    ship. blitme()
    

    第五组:陈孚楠 VS调试技巧之附加进程

    每次按下F5进行断点调试时,都要等待好长时间:先让解决方案编译通过,然后启动VS自带的简版IIS作为服务器启动,进而开启浏览器,最后进行相应的操作进入我们的断点。而一旦解决方案过多,就要等待很长时间。为了解决这类问题,就要用到附加进程调试。

    其实原理还是一样的,只不过用F5的时候VS自动的把各种动作执行完毕,现在我们来手动操作而已。大致的步骤如下:

    1. 将网站部署到本地IIS

    部署网站的话,不是这里的重点,如果不太会的话可以进行百度,教程很多。我这次的测试是通过建立虚目录,然后将目标项目转换为应用程序进行的。

    2. 在IIS中浏览要调试的页面

    在IIS添加的项目中右键目标页,选择浏览,等待浏览器响应即可(这个时候相当于启动了IIS进程)

    3.将IIS的进程附加到VS中

    在VS中找到“调试”菜单,选择“添加到进程”,之后弹出如下对话框,将“显示所有回话中的进程”打勾,找到IIS的相关进程“w3wp.exe”,之后点击“附加”即可。

    相关文章

      网友评论

        本文标题:2018-02-08 为什么你写的 height:100% 不

        本文链接:https://www.haomeiwen.com/subject/ekfftftx.html