发表于: 2017-07-10 23:28:23

1 1001


一、今天完成的事:

1.整理小课堂知识点;

2.查看翻页功能实现,通过ng-class给html增加属性和属性值;

3.完成清空按钮的功能,将hhtp请求封装为函数;

二、明天的计划:

1.继续任务8

三、遇到的问题:

1.对翻页还没有很好的实现方法,需要继续研究;

四、收获:

1、清空按钮的实现,需要通过ng-modle绑定,将之前的input框中的数据全部赋值为空,然后发送http请求数据;

$scope.reset = function () {
//清空时将所有的input框赋值为空即可;
   document.getElementById("start").value = "";
   document.getElementById("end").value = "";
   $scope.searchType = "";
   $scope.searchStatus = "";
   $scope.start = "";
   $scope.end = "";
   $scope.type = $scope.searchType;
   $scope.status = $scope.searchStatus;
   http();
};

2、翻页那块,该开始渲染页面的时候默认是第一页,需要将首页和上一页禁止点击,查看ng-class属性,给元素添加class实现该功能:

<li ><a href="" ng-class="firstPage" >首页</a></li>
<li><a href="" ng-class="firstPage">< 上一页</a></li>
$scope.firstPage = "disabled";
.disabled {
cursor: not-allowed;
}

3、分享小课堂知识点:

1.背景介绍

在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。

Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

2.知识剖析

BFC 定义

BFC全称Block Formatting Context ,中文直译为块级格式上下文。它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。通俗的来说:BFC是一个独立的布局环境,BFC中的元素的布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

BFC布局规则

    内部的Box会在垂直方向,一个接一个地放置。

    Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

    每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

    BFC的区域不会与float box重叠。

    BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

    计算BFC的高度时,浮动元素也参与计算

    3.常见问题

    1、哪些元素会触发BFC

    2、BFC的作用

    4.解决方案

    1、哪些元素会触发BFC

      float属性不为none

      position为absolute或fixed

      display为inline-blcok、table-cell、table-caption、flex、inline-flex

      overflow不为visible

      2、BFC的作用

        1. 自适应两栏布局

        2. 清除内部浮动

        3. 防止垂直 margin 重叠

        5.编码实战

        1. 自适应两栏布局

        代码:

        body {width: 300px;position: relative;}

        .aside {width: 100px;height: 150px;float: left;background:#f66;}

        .main {height: 200px;background:#fcc;}



        根据BFC布局规则第3条:

        每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

        因此,虽然存在浮动的元素aslide,但main的左边依然会与包含块的左边相接触。

        根据BFC布局规则第四条:

        BFC的区域不会与float box重叠。

        我们可以通过通过触发main生成BFC, 来实现自适应两栏布局。

        .main {overflow: hidden;}

        当触发main生成BFC后,这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度,和aside的宽度,自动变窄。效果如下:



        2. 清除内部浮动

        代码:

        .par {border: 5px solid#fcc;width: 300px;}

        .child {border: 5px solid#f66;width:100px;height: 100px;float: left;}



        根据BFC布局规则第六条:

        计算BFC的高度时,浮动元素也参与计算

        为达到清除内部浮动,我们可以触发par生成BFC,那么par在计算高度时,par内部的浮动元素child也会参与计算。

        代码:

        .par {overflow:hidden;}


        3. 防止垂直 margin 重叠

        代码:

        p {color:#f55;background:#fcc;width:200px;line-height:100px;text-align:center;margin:100px;}



        两个p之间的距离为100px,发送了margin重叠。

        根据BFC布局规则第二条:

        Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

        我们可以在p外面包裹一层容器,并触发该容器生成一个BFC。那么两个P便不属于同一个BFC,就不会发生margin重叠了。

        代码:

        .wrap {overflow: hidden;}

        p {color:#f55;background:#fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}

        效果如下:



        总结

        其实以上的几个例子都体现了BFC布局规则第五条:

        BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

        因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

        6.扩展思考

        body是否可以触发BFC

        7.参考文献

        参考一:前端精选文章

        参考二:深入理解BFC

        8.扩展思考

        不同条件触发BFC产生的效果是否一样?

        BFC中position为absolute或fixed怎么理解,为何会覆盖浮动的元素?

        鸣谢

        感谢大家观看

        BY : 王振

        PPT链接

        链接: 百度网盘链接

        密码: 8nes



        返回列表 返回列表
        评论

          分享到