inline元素的对齐问题

CSS HTML inline inline-block 盒模型

元素对齐是CSS中最常见的问题之一,控制元素对齐的属性包括text-align, verticle-align, margin, line-height等。 本文便来探讨inline元素的对齐行为,以及text-alignverticle-align的使用方法,并给出实例。

text-align

text-align指定了行内内容(例如文字)如何相对它的块父元素对齐。作用于当前元素的子元素,且子元素需是inline。例如:

常用的取值有:left, right, center

<style>
.right{
  text-align: right;
}
</style>
<div class="right">
  <span>Gesetz zur Änderung des Fernstra</span>
</div>

css: pull right

vertical-align

vertical-align指定行内(inline)元素或表格单元格(table-cell)元素的垂直对齐方式。 与text-align不同,vertical-align作用于当前元素

为什么要是行内元素呢?因为如果是块元素的话,它总是会占据整行,就无所谓谁和谁垂直对齐了。

常用的取值有:top, bottom, middle,默认值为baseline

CSS Line Box:溢出与折行

CSS DOM HTML inline inline-block overflow text-overflow white-space 盒模型

CSS 将 DOM 树转换为由矩形 Box 构成的树,并通过设置这些 Box 的属性来改变其位置和大小,描述每个元素或文本的布局。这些 Box 分为三个级别:

  • block-level Box:display属性为block的Box,比如段落标签<p>
  • inline-level Box:display属性为inline-block的Box,它们就像一行中的单词一样布局。它里面可以包含其他inline-level的Box,也可以包含block-level的Box;
  • Line Box:一行单词就构成一个LineBox,这种Box是自动生成的,可以看做是inline-levelBox的容器。

溢出、折行、断词是Line Box中常见的问题,设置这些行为的CSS属性包括white-spaceline-spacingtext-overflowword-wrapword-break等。 下面几小节中详细介绍这些属性的取值与对应的行为、以及常见的使用方法。

更多信息请参考:W3C 标准:CSS3-Box

line Box

下面的小节中介绍的CSS属性只适用于LineBox,那么什么是LineBox呢?请看下面的HTML片段:

<ul>
 <li>The first item in the list.
 <li>The second item.
</ul>

ul会生成一个block-level的 Box,然后为每个li元素生成一个block-level的 Box。 而每个li的 Box 中有一个Line Box,它包含了两个inline-level的 Box: 一个用来显示“ · ”,一个用来显示文本。

如果li产生了换行,将会变成多个inline-levelBox,如果在ul中间产生了分页,那么ul会显示为两个block-levelBox。

AngularJS 路由:ng-route 与 ui-router

AngularJS HTML JavaScript MVC 模板 路由

AngularJSng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲,ng-route模块中的$routeService监测$location.url()的变化,并将它映射到预先定义的控制器。也就是在客户端进行URL的路由。 下面首先给出$route的使用示例,然后引入一个更加强大的客户端路由框架ui-router

Angular 路由

在APP中定义多个页面的控制器,并给出对应的模板。然后$routeProvider进行配置,即可将URL映射到这些控制器和视图。 首先定义一个基本的Angular APP,并引入ngRoute

Angular$routeService在ngRoute模块里。需要引入它对应的javascript文件,并在我们的APP里ngRoute添加为模块依赖(如何添加模块依赖?)。

var app = angular.module('ngRouteExample', ['ngRoute'])
    .controller('MainController', function($scope) {
    })
    .config(function($routeProvider, $locationProvider) {
      $routeProvider
          .when('/users', {
              templateUrl: 'user-list.html',
              controller: 'UserListCtrl'
          })
          .when('/users/:username', {
              templateUrl: 'user.html',
              controller: 'UserCtrl'
          });

        // configure html5
        $locationProvider.html5Mode(true);
    });

上述代码中,$routeProvider定义了两个URL的映射:/users使用user-list.html作为模板,UserListCtrl作为控制器; /users/:username则会匹配类似/users/alice之类的URL,稍后你会看到如何获得:username匹配到的值。先看首页的模板:

HTML5Mode: 服务器端路由和客户端路由的URL以#分隔。例如/foo/bar#/users/alice,Angular通过操作锚点来进行路由。 然而html5Mode(true)将会去除#,URL变成/foo/bar/users/alice(这需要浏览器支持HTML5的,因为此时Angular通过pushState来进行路由)。 此时服务器对所有的客户端路由的URL都需要返回首页(/foo/bar)视图,再交给Angular路由到/foo/bar/users/alice对应的视图。

<div ng-controller="MainController">
  Choose:
  <a href="users">user list</a> |
  <a href="users/alice">user: alice</a>

  <div ng-view></div>
</div>

注意到模板文件中有一个div[ng-view],子页面将会载入到这里。

AngularJS 模块化与依赖注入

AngularJS HTML JavaScript MVC 模块化 依赖注入 工厂方法 构造函数

AngularJS使用模块化的组织方式,和依赖注入的设计。这使得模块之间耦合度较低,模块更容易复用。同时支持声明式的编程风格。 在你创建Angular Module 或者 Service 之前,首先需要了解一下 Angular Module 和 Service 的工作方式。

模块概念

在Angular中,一个Module通常对应一个js文件,其中可以包括Controller、Service、Filter、Directive等。 下面我们声明一个模块:helloApp,并在其中声明一个Controller:worldCtrl,一个Directive:customer,和一个Filter:count

接着在模板中,使用上面声明的helloApp模块作为Angular APP:

  • Module依赖:在声明helloApp模块时,需要给出依赖模块的列表。同时这些模块对应的JS需要在HTML中加以引入。在helloApp中可以直接使用依赖模块中声明的Service、Directive、Filter。
  • Service依赖:在声明Controller、Service、Directive、Filter的工厂方法中,把依赖的Service直接放到参数列表,Angular Injector会为你生成这些Service的实例。

AngularJS 数据绑定与 $digest 循环

AngularJS DOM HTML HTTP JavaScript MVC WebSocket 事件 回调函数 数据绑定

数据绑定可以说是AngularJS最大的特色。在Angular中,视图和模型的数据不仅是双向绑定的,并而且是实时的。 使用Angular可以做到良好的甚至是神奇的用户体验,例如用户在输入表单的过程中实时地提示输入有误或者输入正确。

双向绑定

下图是模板引擎中常见的单向数据绑定:

通常在服务器端,将数据模型和模板结合,生成视图。当视图中的数据发生改变时,数据模型不会自动更新;模型发生改变时,视图也不会自动刷新。 因此开发者不得不写大量的代码来同步视图和模型。例如:

  • 视图->模型:绑定DOM事件来监听视图的改变,进而通过javascript函数来同步数据模型,更改javascript对象,或者发送HTTP请求到后台。
  • 模型->视图:模型改变时通过jQuery操作来更新DOM。如果数据模型在后台,可能还需要websocket之类的推送机制。

而Angular提供了双向的数据绑定,我们可以在Angular Controller的$scope中声明数据模型,在模板中进行绑定。 Angular会自动添加DOM事件,并在$scope发生改变时自动进行DOM操作。下面是Angular双向绑定的MVT关系示意图:

图片来源: https://docs.angularjs.org/guide/databinding

AngularJS Resource:与 RESTful API 交互

AngularJS HTML HTTP JavaScript 数组

REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。RESTful风格的设计不仅具有更好的可读性(Human Readable),而且易于做缓存以及服务器扩展(scalability)。REST风格体现在URL设计上:

  • 每个URL对应一个资源
  • 对资源的不同操作对应于HTTP的不同方法
  • 资源表现形式(representation)通过AcceptContent-Type指定

AngularJS提供了$resourceService来更方便地与RESTful服务器API进行交互,可以方便地定义一个REST资源,而不必手动所有的声明CRUD方法。

参考文档: https://docs.angularjs.org/api/ngResource/service/$resource

Resource Factory

$resourceService定义在ngResourceModule中,需要在你的HTML中引入这个Module对应的JS,同时在你的APP中添加这样一个依赖:

var app = angular.module('helloApp, ['ngResource']);

然后为资源建立一个Factory:

app.factory('Notes', ['$resource', function($resource) {
    return $resource('/notes/:id');
}]);

当然,你也可以不把$esource的实例放到Factory里,直接在控制器中存起来:var Notes = $resource('/notes/:id)

AngularJS HTTP Service

AJAX AngularJS HTTP JavaScript Promise 链式调用

$httpAngularJS提供的一个核心Service,通过浏览器的XMLHttpRequest或JSONP与服务器进行交互。 这是一个非常常用的Service,类似于jQuery提供的AJAX。与jQuery类似,$http也采用了deferred/promise模式,不同的是Angular的deferred/promise模式是由Angular的$qService来提供的。

在Angular应用中尽量使用$http而不是jQuery函数来进行AJAX请求,因为$http会在响应到达时触发Angular更新视图($digest循环)。 与此同时,$http还可以通过$httpBackend来Mock和单元测试。

$http文档参见: https://docs.angularjs.org/api/ng/service/$http

基本使用

如果你熟悉了jQuery的AJAX操作,那么使用$http只是重新记住几个方法名而已。把done, fail, always换成success, error, finally

$http.get('/someUrl')
    .success(function(data, status, headers, config){
    // GET成功时被回调
    })
    .error(function(data, status, headers, config){
    // GET失败时被回调
    });

$http方法返回的是一个由$qService提供的Promise对象,事实上Promise对象有三个通用方法:then, catch, finally。 上述的successerror$http提供的两个额外的方法。Promise的三个方法参数如下:

then(successCallback, errorCallback, notifyCallback);
catch(errorCallback);
finally(callback, notifyCallback);

Promise方法是可以链式调用的。

配置$httpProvider

$http Service定义在ng Module里,由$httpProvider提供。于是我们可以通过设置$httpProvider来配置$http的行为。比如,给HTTP请求插入一个拦截器:

someModule.config(['$httpProvider', function($httpProvider){
    $httpProvider.interceptors.push(function($q, dependency1, dependency2){
        return {
            request: function(config){
                // 这里可以调整HTTP请求的配置
                return config;
            },
            response: function(response){
                // 这里能拿到响应对象,当然也可以更改它
                return response;
            }
        }
    });
}]);

还可以通过设置$httpProviderdefaults属性来进行请求/响应的转换(transformRequest, transformResponse)、设置请求的HTTP头字段(headers)。

更多信息,请参考$httpProvider文档: https://docs.angularjs.org/api/ng/provider/$httpProvider

导航: 上一页 下一页

加载中...

🔝