亚洲必赢登录 > 亚洲必赢app > 潜藏着的BFC,前端框架

原标题:潜藏着的BFC,前端框架

浏览次数:82 时间:2019-10-07

灵活的 overflow

2017/12/07 · CSS

原著出处: 大漠   

说到overflow对此CSSer来说并不会目生,用来调控内容溢出的风貌。而不菲时候我们还有只怕会使用text-overflow来支配内容溢出的来得。日常是平素截取,另一种是截取之后让文本前面带有三个点的省略号。然则风趣的是,大家明日要说的灵巧overflow

前两天@kizmarh发的博文,让作者雅观。再一次让本身只能钦佩海外的技术员的立异手艺。大家兴许会说是什么成效呢?又是哪些功效技巧堪当是灵活的overflow啊?其余相当的少说,先上叁个功力:
Demo1

初看效用,好象并不曾两样。要是想见到自作者作古的作用,我们能够在上头的Demo做一下相关的操作。比方,将容器渐渐的变小,或然接纳复选框,就能够见到差异的遵循:图片 1

那么那样的法力是怎么落到实处的吗?那正是接下去要介绍的。

不菲同校恐怕会使用CSS的传播媒介询问来创制响应式的网址。而在及时当日,有个别组件无法只依赖于视窗的增长幅度来做为条件的判别。而是借助于不一样的口径做出差别的响应。

有三个很好的实施方案是Container Queries,而它的前身是Element Queries。他们的前途并不鲜明,可是中间的一对天性,能够因而Polyfills来促成。但话又说回来,使用Polyfill来兑现部分特征,并不是久久的方案,并且要透过Polyfill达到每贰个特色,那也是一件非常劳顿的天职。

然则大家只雅观重于JavaScript恐怕说Container Queries?假设咱们利用CSS就能够缓慢解决Container Queries提供的部分风味,那是否二个更值得可取的方案吗?接下去就来看多少个普遍的例证。

转换不按想要的秘籍浮

图片 2
像上图那样的款型,盒子由导航栏和侧边二个搜索框只怕登入名什么的一同组合,那也是大家常用调换的秘籍来消除那样的布局。
说变化前,先说三点概念:
1.变迁最先现身的意思是为着缓慢解决文字环绕图片这种在杂志报纸中常相会世的布局样式; (看下图)
2.变迁与相对定位能完成平等的职能,但的差别是,浮动未脱离寻常文书档案流,但绝对定位脱离了健康文书档案流;
3.变迁能拉动灵活的布局,但同不平日候也推动了父成分中度塌陷的隐疾(看下图),所以清除浮动是使用浮动前的必修课,前边会说起;
图片 3
图片 4
明天看一下冲天塌陷相关的代码:

JavaScript

<div class="test"> <img width="130" height="130" src="; 1.扭转最早出现的含义是为着缓和文字环绕图片这种在杂志报纸中常会现出的布局样式;<br> 2.转变与绝对定位能兑现均等的功能,但的分别是,浮动未脱离平常文书档案流,但相对定位脱离了正规文书档案流;<br> 3.浮动能带来灵活的布局,但还要也推动了父元素高度塌陷的后天不足,所以清除浮动是应用浮动前的必修课,前边会谈起;<br> <br> </div> <div class="blank"></div> <div> <div class="box"> <span class="dot"></span> 小编是上面多个div的文字。 </div> <div class="blank"></div> <div class="box"> <span class="dot"></span> 作者是再上面三个div的文字。。 </div> <input width="260" value="输入一段文字"/> </div> .test { background-color: yellowgreen; font-size: 18px; vertical-align: top; } .test span { background-color: bisque; } .blank { line-height: 20px; height: 20px; } img { width: 260px; height: 260px; float: left; } input { border: 1px solid red; height: 24px; margin-left: 30px; } .box { background: black; color: white; padding-left: 20px; line-height: 10px; } .box .dot { display: inline-block; width: 4px; height: 4px; background: white; vertical-align: bottom; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
    <div class="test">
    <img width="130" height="130" src="https://user-gold-cdn.xitu.io/2017/12/10/160409cc0f090c6f">
    1.浮动最初出现的意义是为了解决文字环绕图片这种在杂志报纸中常会出现的布局样式;<br>
    2.浮动与绝对定位能实现相同的效果,但的区别是,浮动未脱离正常文档流,但绝对定位脱离了正常文档流;<br>
    3.浮动能带来灵活的布局,但同时也带来了父元素高度塌陷的缺点,所以清除浮动是使用浮动前的必修课,后面会说到;<br>
    <br>
    </div>
    <div class="blank"></div>
    <div>
    <div class="box">
        <span class="dot"></span>
        我是下面一个div的文字。
    </div>
        <div class="blank"></div>
    <div class="box">
        <span class="dot"></span>
        我是再下面一个div的文字。。
    </div>
        <input  width="260" value="输入一段文字"/>
    </div>
      
    .test {
    background-color: yellowgreen;
    font-size: 18px;
    vertical-align: top;
    }
    .test span {
        background-color: bisque;
    }
    .blank {
        line-height: 20px;
        height: 20px;
    }
    img {
        width: 260px;
        height: 260px;
        float: left;
    }
    input {
        border: 1px solid red;
        height: 24px;
        margin-left: 30px;
    }
    .box {
        background: black;
        color: white;
        padding-left: 20px;
        line-height: 10px;
    }
    .box .dot {
        display: inline-block;
        width: 4px;
        height: 4px;
        background: white;
        vertical-align: bottom;
    }

图表一中,完毕了文字环绕图片这种想要的功能,並且后边的元素未有前进错位,其原因是地方说过的,假如块探花素未有体现的安装中度,其惊人由其成分内的参天的linebox决定,所以首先张图片div的莫大是比img中度高的,因为笔者注重的专门的职业说了二回,文字够多。而第二张图纸,div中度唯有144px,因为img是变化的,他的linebox被转移属性破坏了,而文字又远远不足多,所以就导致了所谓的冲天塌陷,致使最终多个div陷进了图片所在的div中,要知道,这种情景在例行块状成分布局中是常有不会油不过生的。至于消除浮动引起的万丈塌陷,小编计算了两条,分别是:

  1. 利用clear:both,常见的什么样clearfix;
  2. 接触浮动成分父成分的BFC(块状格式上下文,为消除盒子与盒子之间,内容不切合影响而生的概念);

免除浮动,相信大家都懂,而触发bfc。

自己说说小编常用的几条,英特网讲bfc的居多:

  • float属性不为none的要素
  • position(absolute,fixed)
  • display (table-cell,inline-block,flex等)
  • overflow属性不为visible

除外上边讲的那些,我还越过过有人问,为何本身用了变化,但成分未有浮在这一行,却换了行,像下图这样
图片 5

JavaScript

<div> <div class="gr">作者是导航栏的一部分文字</div> <div class="fr">笔者想浮在左臂</div> </div> .gr{ background-color: yellowgreen; margin:5px; } .fr{ float:right; background-color: green; }

1
2
3
4
5
6
7
8
9
10
11
12
   <div>
    <div class="gr">我是导航栏的一些文字</div>
    <div class="fr">我想浮在右边</div>
   </div>
   .gr{
      background-color: yellowgreen;
      margin:5px;
    }
    .fr{
      float:right;
      background-color: green;
    }

地点这种没按想要的方法浮,是因为块状成分会不敢其剧情长度有未有一行的尺寸,其都会占用一行的长度,前面的因素会活动换行。化解那些其最简便易行的艺术便是将fr成分放在gr元素前,为什么这么就足以,因为float破坏了div成分的疙瘩属性,但其未撑开父成分的莫大,其变化属性为right,默许从右边最早布局,所以前面包车型大巴div仍按常规的文书档案流从最左端早先布局。

总结

上述便是有关BFC的片段深入分析,BFC 是一种概念,是对前边一个布局本领的一种理论上的下结论,明白它能够让大家在应用CSS +DIV进行布局时,知道有个别非同一般操作以及回避难点的原理。BFC的概念比较空虚,但透超过实际例分析,有援助我们对BFC的通晓。

在此仅列举了多少个例证,招待大家共同商量更加多^_^

1 赞 4 收藏 1 评论

图片 6

Ember

Ember 是三个我行我素的 web 应用程序框架,关怀程序猿的工效。Ember 相比较盛行,它的主干团队包罗像曾是 Ruby on Rails 和 jQuery 大旨团队成员的 Yehuda Katz 的智囊。Ember 自称是“三个用于创设大范围 web 应用程序的框架”,且不浪费你的时日。它很执着,为你提供了过多取舍。

Ember 也是一个 MVC 框架。它回顾四个模板和视图引擎,当数码变动时自动更新,就像是Angular,Backbone 和 React 同样。它富含 web组件 的观念,令你利用自身标签扩充 HTML(就好像Angular 同样)。它也是有多个明亮哪些与你的 RESTful API 一同干活的路由和模型引擎。

曾几何时使用 Ember?当您只须要二个能够运作的框架时。当您因为预算紧张或工期非常短而不要求灵活性时,请使用 Ember。

GitHub: 
近期版本: 2.1.0
网站: emberjs.com

先读后写

一再地读写 DOM 会导致「强制同步布局」(forced synchronous layouts),可是在技术提升进度中它演化成了更形象的词 — 「布局抖动」(layout thrashing)。前文也可以有提到,浏览器会跟踪「脏成分」,在适当的时候将改动进程储存起来。在读取了一定属性以往,开采者能够强制浏览器提前总结。那样再三的读写会促成重排。幸运的是有一个简练的解决方法:读完再写。

为了参谋上述功能,请看下边那个对读写有严格必要的事例:

boxes.forEach(box => { box.style.transform = “translateY(“ + wrapper.getBoundingClientRect().height + “px)”; })

1
2
3
boxes.forEach(box => {
    box.style.transform = “translateY(“ + wrapper.getBoundingClientRect().height + “px)”;
})

将「读」放到 forEach 外面,实际不是和「写」一同在种种迭代里都试行,就能拉长质量:

let wrapperHeight = wrapper.getBoundingClientRect().height + 'px'; boxes.forEach(box => { box.style.transform = “translateY(“ + wrapperHeight + “px)”; })

1
2
3
4
let wrapperHeight = wrapper.getBoundingClientRect().height + 'px';
boxes.forEach(box => {
    box.style.transform = “translateY(“ + wrapperHeight + “px)”;
})

总结

那篇小说首要思路是根源于@kizmarh发的博文,小编的新意让小编毕恭毕敬的崇拜。通过牺牲HTML的冗余,合营局地CSS的特色,举例Flexbox只有的特色,CSS庞大的选拔器,可以扶持大家灵活的兑现overflow的功力。也正是说,不依据其余的JavaScript代码,能够让大家依照容器的深浅展现分裂的公文,让我们的用户体验更加的和煦。感兴趣的同校不仿试试。

2 赞 4 收藏 评论

图片 7

自己脑中飘来飘去的 CSS 玄幻属性

2017/12/27 · CSS · 属性

初稿出处: Denzel   

近来看看一篇贰十一个CSS高端技术汇总的汇总,感触很深,然而本身想,与技术比较,有个别常见css布局难点,一时候尤其让我们的通常费用变得支支吾吾失落吧。
在写这一篇小说在此之前,本身还写过一篇:本身所相当的大心的那二个CSS冷知识,但却阻止了自家做项指标进度,假诺您看了,笔者深信不疑你也会收益的。

6、flex boxes (元素的display: flex或inline-flex);

注:也可以有人以为display: table能生成BFC,小编觉得最要害原因是table会暗中认可生成一个无名氏的table-cell,正是这些无名氏的table-cell生成了BFC。

PhantomJS

运转总体的浏览器来测验你的代码相比较耗内存和 CPU。PhantomJS 允许你运维一个轻量的 WebKit —— Safari 和Chrome(今后是 Blink)后台的渲染引擎。它同意你通过 JavaScript API 运转测验,捕捉截图,监察和控制网络和电动浏览页面。

哪天使用 PhantomJS ?当您要求举办越来越多的测验,操作页面和监视互联网央求时。

GitHub: 
脚下版本: v2.0
网址: phantomjs.org

绘制

转换布局后,浏览器将页面绘制到显示屏上。那些环节和「布局」步骤类似,浏览器会追踪脏元素,将它们统一到一个超大的矩形区域中。每一帧内只会发出叁回重绘,用于绘制那些被传染区域。重绘也会开支多量个性,能免则免

达成方案

先是在大家的模版中有两部分结构,都停放在overflower的容器个中,在那之中overflower-short中放置的是短文本内容,同期还会有二个overflower-long容器中放置的是长文本内容。为了让内容更具可读性,在短文本的器皿中利用aria-hiddentitle来增加阅读性。比方:

JavaScript

<span class="overflower"> <!-- 放置短文本的器皿 --> <span class="overflower-short" aria-hidden="true" title="Some long text that could become shorter"> Short text here is.</span> <!-- 放置长文本的容器 --> <span class="overflower-long">Some long text that could become shorter.</span> </span>

1
2
3
4
5
6
7
<span class="overflower">
<!-- 放置短文本的容器 -->
<span class="overflower-short" aria-hidden="true" title="Some long text that could become shorter">
Short text here is.</span>
<!-- 放置长文本的容器 -->
<span class="overflower-long">Some long text that could become shorter.</span>
</span>

这里大家将用到CSS的flex-wrap属性。将overflower容器设置为inline-flex,而且还要把flex-wrap的值设置为wrap。然后再overflower-shortoverflower-long安装不一致的样式。别的对于不协理flex-wrap的浏览器,如故利用text-overflow:ellipsis来处理。

JavaScript

.overflower { line-height: 1.5em; display: inline-block; overflow: hidden; box-sizing: border-box; max-width: 100%; height: 1.5em; white-space: nowrap; text-overflow: ellipsis; } .overflower-long { display: inline; } .overflower-short { display: none; } @supports (flex-wrap: wrap) { .overflower { display: inline-flex; flex-wrap: wrap; } .overflower-short { display: block; overflow: hidden; width: 0; text-overflow: ellipsis; flex-grow: 1; } .overflower-long { flex-basis: 100%; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.overflower
{
    line-height: 1.5em;
 
    display: inline-block;
    overflow: hidden;
 
    box-sizing: border-box;
    max-width: 100%;
    height: 1.5em;
 
    white-space: nowrap;
    text-overflow: ellipsis;
} .overflower-long
{
    display: inline;
} .overflower-short
{
    display: none;
} @supports (flex-wrap: wrap)
{
    .overflower
    {
        display: inline-flex;
 
        flex-wrap: wrap;
    } .overflower-short
    {
        display: block;
        overflow: hidden;
 
        width: 0;
 
        text-overflow: ellipsis;
 
        flex-grow: 1;
    } .overflower-long
    {
        flex-basis: 100%;
    }
}

原理正是如此轻便,大家来看多少个实例:
Demo2

拖动容器右下角更换容器大小,恐怕选用复选框,你将见到独树一帜的成效:图片 8

她俩是何等专门的学业的,来走访CSS:

  • 使用@supports做了七个渐进加强的拍卖,要是浏览器援助flex-wrap个性,那么将应用Flexbox的部分性质的特色,比方容器overflowerinline-flex容器,然后同盟flex-grow:1text-overflow:ellipsis来拍卖短文本样式,对于长文本,将flex-basis设置为100%
  • 除此以外索要给容器多个一定的莫斯中国科学技术大学学。所以设置height的值,同期为了文本能垂直居中,再设置line-height的值和height等同
  • 对于不扶助flex-wrap的浏览器,在overflower相当于最外面包车型客车器皿中,通过text-overflow:ellipsiswhite-space来决定文件,当然那个时候短文本就不展现了

粗粗正是那般的一个职业规律。即使这种办法让我们贯彻了灵活的overflow,效果是更令人感到很爽,但对此追求HTML干净的同班来讲,那是一件非常小概忍受的事情。为了这种意义,让大家的HTML变得冗余。鱼和熊掌不可兼得嘛!

透过那几个效应,再度注解了CSS的雄强!

除却,为了记生理残疾行动障碍者人员能越来越好的拜见网址,这里还经过aria-hidden='true'以及title等等的习性,巩固可阅读性。

缘何这里li标签内的p成分看起来独自撑开了一整套

潜藏着的BFC,前端框架。那是自己在segmentfault上见到的二个主题材料,在此之前本身遇到过,所以就异常闷热情的去回应了弹指间,难道遇到个协和平交涉会议的,示例代码是那样的:
CSS:

JavaScript

li{ display: inline-block; text-align: center; } .left,.center,.right{ width:300px; height:300px; } .left{ background-color: #999; } .center{ background-color: #ccc; } .right{ background-color: #eee; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
li{
    display: inline-block;
    text-align: center;
}
.left,.center,.right{
    width:300px;
    height:300px;
}
.left{
    background-color: #999;
}
.center{
    background-color: #ccc;
}
.right{
    background-color: #eee;
}

HTML:

JavaScript

<ul> <li class="left"> <p style="display: inline-block;">1</p> </li> <li class="center"></li> <li class="right"></li> </ul>

1
2
3
4
5
6
7
<ul>
    <li class="left">
        <p style="display: inline-block;">1</p>  
    </li>
    <li class="center"></li>
    <li class="right"></li>
</ul>

图片 9
粗粗正是那样子,其实文和图有一些不对应,代码中率先个模块他只写了一个“1”,小编为了现象越发鲜明,且好注解为什么,就打了一大段文字,今后我们来讲说为啥。先来一张图,看懂vertical-align的多少个属性,顺便带上图形出处,小说讲得还足以,理解那张图片,前面就好通晓了。

图片 10

inline-block的vertical-align 属性私下认可是baseline对齐(深切明白的送福利),也便是英语文字小写字母a,b,c那类字母底部的那条线,因为这个是外人发明的,所以以日文字母才有针对性。inline-block具备vertical-align属性,其暗许是基线对齐的,所以那八个inline-box需求基线对齐,而其基准线正是平时流中最终一个line box的基线,假如那么些成分是空的,未有内容,那么这么些基线正是最终这些成分的margin-bottom线;倘若那么些元素不为空,那么那个成分的基线就是因素里面内容最后一行文字的基线;所以我们多少个贰个来套,发掘那四个li成分在一行,第多少个有文字,其基线为文字尾部;最终一个从未有过文字,其基线为margin-bottom线,考试要考,划入眼,能够协和为要素设置margin-bottom试试,那就能够导致第4个和二,七个错行的感到,其实她两是为着基线对齐,所以多敲几11个文字就能够生硬见到其分化。所以最简便的缓和方案就是为li增多vertical-align: 属性不为baseline,气不气,改造其纵向的对齐形式的暗中认可属性;为什么非弄个折腾人勒。关于vertical-align,尽管还想做那方面包车型客车一遍处处思念理解,能够看看张铁汉的深入分析

5、display的值为inline-block、table-cell、table-caption;

D3.js

数据可视化和图纸是一种广泛的 web 应用程序需要。D3.js 是别的数据操作和可视化的事实规范。它是 GitHub上最受款待的类型之一,被巨大的协会利用。大量的图片,图表和可视化库在 D3 上营造。

D3 允许你操作任何来源的数据文书档案,调换到 DOM 或/和 SVG 或/和 CSS。D3 关切今世 web 规范,确认保障您不受任何专有格式的约束,比方 Flash 和 Silverlight。

何时使用 D3.js?在您要求其余情势的可视化的时候。

GitHub: 
现阶段版本: 3.5.6
网站: d3js.org

兑现达标 60FPS 的高质量交互动画

2017/10/31 · CSS, JavaScript · 1 评论 · 动画

原稿出处: Emily Hayman   译文出处:kmokidd   

翻译注:那篇大部分是故态复萌,但也略微有局地新东西吧,要察看最终哦 =)

长文本变得越来越短

在大家Web的实际采纳中,常有那样的一种功用。在有丰富的上空里呈现全体的公文内容出来,但在平素不丰富的空中里,通过text-overflow:ellipsis把要展现的开始和结果变短。但大家并不只是想把内容截取,举个例子大家想在有丰富的空中显得一行文本,在不丰盛的空间内显示另一行文本,以致是在更加短的半空中,只经过贰个Logo来突显。那也正是你在篇章早先见到的功用。那么如此的职能是怎么落到实处的吧?

img图片撑不满整个div,有空当

直接上海体育地方更加直观(箭头所指):
图片 11
相关css和html:

JavaScript

<style> body,div{margin: 0;padding: 0;} .test{ background-color: yellowgreen; } img{ width:260px; height:260px; } </style> <body> <div class="test"> <img width="130" height="130" src="; </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    body,div{margin: 0;padding: 0;}
    .test{
        background-color: yellowgreen;
    }
    img{
        width:260px;
        height:260px;
    }
</style>
<body>
<div class="test">
    <img width="130" height="130" src="https://user-gold-cdn.xitu.io/2017/12/10/160409cc0f090c6f">
</div>
</body>

实在那么些难题,若是您独有那样看,和本人同样涉世未深的话,是一眼看不出答案的,但是如若你在图片后边多敲多少个文字,你就能意识,和上个难点,那又是贰个关于于vertical-align属性相关的标题。

JavaScript

<div class="test"> <img width="130" height="130" src="; </div>

1
2
3
<div class="test">
    <img width="130" height="130" src="https://user-gold-cdn.xitu.io/2017/12/10/160409cc0f090c6f"><span>abcd看文字</span>
</div>

令人顿觉的功能图:
图片 12
那下你应该就懂了,下边包车型客车空隙的距离实际上等与1个line-height的尾巴部分与baseline之间的区间。留意考查,图片的底层是和a的底下缘是在一条水平线上的,并不是和‘看’字上面缘一条水平线上的。所认为什么下面说那又是多少个和vertical-align属性相关的主题素材。先说建设方案
本着于父元素div:

  • 设置行高丰盛小,举例.test{line-height:0},至于那样小吗,其实中度小于top线和baseline线之间的离开的离开就行了,至于到底多小,这和font-size是有关的,其指标正是没有剩余的冲天拿来给baseline下边包车型客车空中用(个人理解);
  • 地方说了安装line-height最小和font-size相关,所以,还应该有的方法,就是一贯设置字体大小为0,.test{font-size:0;},道理你应该懂;

本着于图片div:

  • 地点说了那是一个和vertical-align属性相关的难题,所以设置vertical-align属性不为baseline也足以减轻,比如img{vertical-align:top;},当然也能够是数字,比方img{vertical-align:-10px;},这么些数值相对不是正在,其数值应该是大于bottom线和line-height的平底距离的;
  • 最终一种,正是vertical-align是三个对块状成分无效的习性,仅针对于内联成分有效的,当然inline-block也可以有效.所以img{display:block;}也能够解决难点。

大概到此地,你和自己同样,有困惑,为什么vertical-align是贰个对块状成分无效的习性,设置img为块级成分,其和div就足以圆满在一块儿,而一个内联成分放在块状成分里,就非得有鸿沟。开始,小编也有那几个难点的,个人知道便是块状成分里面装了三个内联成分,假使块状未有展现的装置中度,其入骨是由中间的万丈的lineboxes组成的,这么些div其实便是有五个lineboxes组成,图片linebox和,其实还应该有贰个linebox就是div自个儿的innerText(”),那不过此处内容为空,假设你把span去掉,你就更能精晓这些隐形的linebox,所以就如五个内联成分在联名,须求baseline对齐。所以网络有人讲设置img{font-size:0;},是拾分荒唐的,img成分很特出,他不只是内联元素,他要么二个换到成分(上边会讲),它的可观不是文字内容撑开的,是其置换的图片高度撑开的,所以设置font-size是没用的。

实例3、化解私吞浮动成分的难题

我们驾驭浮动成分会脱离文书档案流,然后浮盖在文书档案流成分上。

JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>BFC私吞浮动成分的标题</title> <style> .box1 { float: left; width: 100px; height: 100px; background-color: pink; } .box2 { width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BFC侵占浮动元素的问题</title>
    <style>
        .box1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

图片 13

 

当三个要素浮动,另一个成分不转换时,浮动成分因为脱离文档流就能够盖在不转移的成分上。

咱俩做如下修改:

.box2 { width: 200px; height: 200px; background-color: skyblue; overflow: hidden; }

1
2
3
4
5
6
.box2 {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        overflow: hidden;
    }

或如下修改:

.box2 { width: 200px; height: 200px; background-color: skyblue; /* overflow: hidden; */ float: left; }

1
2
3
4
5
6
7
.box2 {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        /* overflow: hidden; */
        float: left;
    }

图片 14

咱俩为非浮动成分创设BFC境况,依照BFC的不与float box重叠的法规,化解了抢占成分难题。

这一性情,我感到照旧很有用的,特别是利用在两栏布局上,相比大家健康为非浮动成分或非定位成分设置margin来挤开的主意,其优点在于无需去精通浮动或一定成分的肥瘦。

至于作者:cucr

图片 15

今日头条今日头条:@hop_ping 个人主页 · 笔者的篇章 · 17

图片 16

复合

末段一步,将有着绘制好的要素实行理并答复合。暗中认可景况下,全数因素将会被绘制到同贰个层中;如若将成分分别到分歧的复合层中,更新成分对质量友好,不在同一层的要素不便于遭遇震慑。CPU 绘制层,GPU 生成层。基础绘图操作在硬件加快合成人中学完效率率高。层的分别允许非破坏性的更动,正如您所测度的,GPU 复合层上的改造代价最小品质消耗起码

有一种行内成分,又叫置换到分

比如您看下边一题代码的时十足留意,你会意识自家给img设置了width和height五个属性值为130,但出于又在css属性里定义了宽高260,但最后表现出的宽高为260。借使css不定义宽高呢?答案是稍微,要不你试试,你逐步试,小编依旧先宣布答案:130.这里我们将会说三个css中的三个不为人知的术语:沟通成分,那什么样又是换到成分呢?

交流到分是指:浏览器依照元素的标签和性质,来调整作而成分的切实可行展现内容。

比方说:浏览器依照<img>标签的src属性显示图片。input成分依据标签的type属性决定突显输入框照旧按键。还应该有,还应该有那二日很红的canvas。

置换来分有如下共同点:

  1. 调换元素经常内置宽高属性,由此能够安装其宽高;
  2. 沟通成分与平日的行内成分比较,其能够设置margin,padding,height,width等css属性;

以为要写的还或者有许多,事件根本非常不足用,先睡了,未完待续
假定文中有任何不足和错误之处,还请立时指正。

2 赞 3 收藏 评论

图片 17

三、BFC的布局法则

简言之归结如下:
1、内部的成分会在笔直方向三个接三个地排列,能够清楚为是BFC中的贰个常规流
2、成分垂直方向的距离由margin决定,即属于同三个BFC的八个相邻盒子的margin或然会发出重叠
3、每个成分的左外边距与蕴涵块的右边手界相接触(从左往右,否则反而),即便存在浮动也是那样,那注解BFC中的子成分不会超越它的盈盈块
4、BFC的区域不会与float成分区域重叠
5、计算BFC的冲天时,浮动子成分也参加总括
6、BFC正是页面上的贰个切断的独门容器,容器里面包车型大巴子元素不会潜移暗化到外面的因素,反之亦然

Babel

JavaScript 语言正在快捷进步。ECMAScript二零一四于二〇一八年夏季公布,它的累累新天性在新型的浏览器上贯彻了。若是你想看看 ECMAScript 二〇一四 的宽容性,你能够看看来自 @kangax 的那一个 表。你会注意到,最新版本的 Edge,Firefox 和 Chrome 已经大致完全协作了。

我们并非在世在三个圆满的世界。作为开拓职员,大家要求持续辅助旧的浏览器,它们从不流行最棒的 JavaScript 天性。大家要力促 web 和革新我们的代码库。Babel 是叁个JavaScript 编写翻译器,用于把最新的 JavaScript 规范编译成可在 IE9 等老浏览器上运营的包容ES5的 JavaScript。它有局地插件,使得 React 开垦更便于,以致能够选用部分不属于该标准的表征(举例ES7)。

什么日期使用 Babel?当您想行使新的 JavaScript 语言特征,同一时间还要援救老版本浏览器时。

GitHub: 
当前版本: 6.1.2
网址: babeljs.io

滚动

贯彻品质出色的平缓滚动然而个挑战。幸运的是,方今职业提供一些可配备选项。开垦者不再需求经过禁绝浏览器暗中认可行为 (preventDefault),开启 Passive event listeners 就能够进步滚动品质(注脚之后,就没有须求经过阻止成分的 touch 事件监听和鼠标滚轮事件监听以优化滚动品质)。使用方式仅是在要求的监听器中表明 {passive: true}

element.addEventListener('touchmove', doSomething(), { passive: true });

1
element.addEventListener('touchmove', doSomething(), { passive: true });

从 Chrome 56 开始,那几个选项就要 touchmovetouchstart 中暗中认可开启。

新出的 Intersection Observer API 能够告诉开辟者有个别元素是或不是在视口内,只怕是或不是和别的因素有互动。和透过事件管理这种会阻塞主线程的交互格局相比较,Intersection Observer API 能够监听元素,只有当成分交叉路线的时候才会执行相应操作。这几个 API 在特别滚动和懒加载的景象都能够应用。

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:潜藏着的BFC,前端框架

关键词:

上一篇:图像入门教程,响应式Web设计实战计算

下一篇:没有了