2016年3月23日

css

margin属性

• 垂直外边距合并

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

请注意，如果不设置 div 的内上边距(padding-top)或上边框(border-top)，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上或下外边距也会发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并:

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。 http://www.w3school.com.cn/css/css_margin_collapsing.asp

html与body

宽高的百分比是基于包含它的块级对象的百分比宽高。 父元素没高度，子元素100%的父元素高度也是0

当body里只有一个relative元素的时候，只有同时设置html和body的100%高度才能使这个元素的宽高填充。

一旦设置了html标签height:100%;则无论哪个浏览器下body都支持height:100%;了，而body内部的容器也可以支持height:100%;了。

angularjs

• ng-app 指令初始化一个 AngularJS 应用程序。

  • ng-app 指令告诉 AngularJS，哪个元素是 AngularJS 应用程序 的"所有者"，也是angularjs程序的开始。

• ng-model 指令读取元素的值（比如输入域的值），然后绑定到应用程序。

  • ng-model 指令把输入域的值绑定到应用程序变量 name。

• ng-bind 指令把应用程序数据绑定到 HTML 视图。

  • ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

• ng-init 指令初始化 AngularJS 应用程序变量。

• AngularJS 属性以ng- 开头，但是您可以使用data-ng- 来让网页对 HTML5有效。

<div ng-app="">
    <!-- ng-model指令读取用户输入信息，然后传递给变量name -->
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>


<div ng-app="" ng-init="firstName='John'">
    <!-- ng-bind指令是控制标签的innerHTMl，内容为参数值。 -->
    <p>姓名为 <span ng-bind="firstName"></span></p>
    <p>姓名为 <span data-ng-bind="firstName"></span></p>
    <p>姓名为 <span>{{name}}</span></p>
</div>

<!-- ng-app定义了一个angularjs应用，在哪个标签插入，应用就在哪开始。 -->
<!-- ng-controller确定了使用模块下哪个控制器 -->
<div ng-app="myApp" ng-controller="myCtrl">


名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);//定义一个模块，
app.controller('myCtrl', function($scope) {//调用模块的方法
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

自定义的指令

使用驼峰法来命名一个指令，runoobDirective , 但在使用它时需要以 - 分割, runoob-directive。

调用方式：

• 元素名

<div ng-app="myApp">
    元素名：<hi-boy></hi-boy>
    <script type="text/javascript">
        var app=angular.module('myApp',[]);
        app.directive("hiBoy",function(){
            return {
                template:"<span>hello boy </span>"
            };
        });
    </script>
</div>

• 属性

<div ng-app="myApp">
    属性：<div hi-boy></div>
    <script type="text/javascript">
        var app=angular.module('myApp',[]);
        app.directive("hiBoy",function(){
            return {
                replace:true,
                restrict:'M',
                template:"<span>hello boy </span>"
            };
        });
    </script>
</div>

• 类名

<div ng-app="myApp">
    属性：<div class="hi-boy"></div>
    <script type="text/javascript">
        var app=angular.module('myApp',[]);
        app.directive("hiBoy",function(){
            return {
                // 必须设置 restrict 的值为 "C" 才能通过类名来调用指令。
                restrict:'C',
                template:"<span>hello boy </span>"
            };
        });
    </script>
</div>

• 注释

<div ng-app="myApp">
    注释：<!-- directive:hi-boy -->
    <script type="text/javascript">
        var app=angular.module('myApp',[]);
        app.directive("hiBoy",function(){
            return {
                replace:true,//需要在该实例添加 replace 属性， 否则评论是不可见的。
                restrict:'M',//须设置 restrict 的值为 "M" 才能通过注释来调用指令。
                template:"<span>hello boy </span>"
            };
        });
    </script>
</div>

restrict 值可以是以下几种:

• E 只限元素名使用

• A 只限属性使用

• C 只限类名使用

• M 只限注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。