一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。... 这是一个常用的div写法，下面我们来书写样式。...如果div wai中还包含其他的div，我不允许它出现在nei的右侧，我们则用样式clear:both指定这个div，不允许它浮动在nei右侧。 这些在ie6里面是正确的。...当我们没有给wai这个div设置高度的时候，nei这个div的高度，就会撑开wai这个div，而在另一个方面，我们要注意到的是，当我们给wai这个div加上一个高度值，那么无论nei这个div的高度是多少...而当nei的高度超过wai的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！ 我相信，通过我的这些文字，大家对overflow:hidden这个属性有了全新的认识。
块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。...这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。 我们通常有两种方法来解决这个布局问题。...一种方法是使用 clearfix hack，它的作用是在文本和图像下面插入一个元素，并将其设置为 clear:both。另一种方法是使用 overflow 属性，其值不是缺省值 visible。...BFC 可以防止 margin 折叠 了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 div。 这个 div 包含两个标签 p。...你的浮动项将包含它里面的任何东西。 使用以下方式都能创建 BFC float 的值不是 none。 position 的值不是 static 或者 relative。
块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。...删除一些文本 这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。 我们通常有两种方法来解决这个布局问题。...一种方法是使用 clearfix hack，它的作用是在文本和图像下面插入一个元素，并将其设置为 clear:both。另一种方法是使用 overflow 属性，其值不是缺省值 visible。...BFC 可以防止 margin 折叠 了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 div。这个 div 包含两个标签 p。...你的浮动项将包含它里面的任何东西。 使用以下方式都能创建 BFC float 的值不是 none。 position 的值不是 static 或者 relative。
而按照HTML5的另一个设计原理，它必须向前向后兼容，兼容未来的HTML版本——不管是HTML6、HTML7，还是其他什么——都要与当前的HTML版本，HTML5，兼容。...因此，把一个版本号放在doctype里面没有多大的意义，即使对验器证也一样。 刚才，我说doctype不是为浏览器写的，这样说大多数情况下没有问题。...我觉得语言本身应该提供一种开关，让作者能够表明自己想做什么。”比如说，想使用某种特定的语法，像XHTML，而不是使用其他语法。我理解这些人的想法。但我不赞成在语言里设置开关。...而每个分区里还可以嵌套另一个分区，被嵌套的分区仍然可以有自己的头部和脚部，是这样吧？... 其中包含可能是有关内容作者的元数据，而下面会给出一些链接，差不多就这样。
既然article元素已经保证了头部会出现在文档概要中，而header又不能包含多个元素（如上文所定义的），那么为什么要写多余的代码。...你只是让你自己蛋疼，而并不能使你的页面内容更清晰。 规范中将figure描述为“一些流动的内容，有时候会有包含于自身的标题说明。一般在文档流中会作为独立的单元引用。”...如果不是，那可能也不是（也许是个）。继续：“我可以把它移动到附录中吗？”如果两个问题都符合，则它可能是 。...Logo并不是figure 进一步的说，logo也不适用于figure。下面是我常见的一些代码片段： Figure也不仅仅只是图片 另一个常见的关于figure的误解是它只被图片使用。
然后身为一个前端工程师，再想到这个解法以后，当然就是上 Github 找一个简单又方便的组件来解决它 ，而最后找到的 vue-scroll-loader 使用起来非常容易，代码也少少的，所以就在处理完...issue 后，看它内部是如何实现 Lazy Loading，于是就看到今天主要讲的 Intersection Observer API 啦！... 接著我们用 Intersection Observer API 的 observe 方法，把要监听的 div 当作参数传给它，并用 callback 让它可以在 div 出现和离开的时候给个消息... 要注意监听的元素必须要在载入数据的最下面哦！不然它不会被监听到“出现在页面上”了（这个下方会更详细说明注意事项）。...API 因为 loading 出现在页面中执行了 render，但是 render 后的数据量却不足以把 loading 移到画面外，那 loading 就会一直停留在画面中，而不是“出现在画面中”，
上节我们说到了一个问题：就是如何让菜单出现在每个页面的左侧。 比如我们刚研发好的home.html，配上菜单看才会更好看。...打开welcome.html，在它里面 body标签内的最后位置加上一个空div,给这个div写一个属性。...，给它的内容加载另一个url返回的页面。...现在让我们来修改home函数，因为现在除了child函数外，所有的后台函数都要返回的是welcome.html，而原来的真正目标页面home.html则变成了区区字典里的一个值，它的key是 whichHTML...然后把下面的内容 剪切到这个div中来 变成如下图所示： 然后我们把body中的居中样式 给挪到div上： 然后回去刷新页面看看吧。
如果没有flexbox，我们可能会把三个元素全部进行浮动，但想让它按理想的方式工作显得并不直观。而且，按传统的方式做这件事会出现一个众所周知的问题：每一列仅仅和它的内容一样高。...让flexbox来救场吧。 让我们Flex flexbox的要点是出现在display属性上的flex值，它需要被设置在容器元素上。如此设置会让它的子元素变成“弹性项目（flex item）”。...她想让成为页面的第一个元素，显示在之前。那好，同样的，flexbox是你的朋友（虽然像在此例中，可能你得跟你的客户好好谈谈，而不是跟随指示）。...例子flexbox-demo-5.html 在Flexbox里两端对齐 另一个控制对齐的属性是justify-content，当你想让多个元素等分空间时非常有用。...这个属性是以下独立属性的简写： flex-grow：一个数字，指明元素如何相对其他flex项来拉伸 flex-shrink：一个数字，指明元素如何相对其他flex项来收缩 flex-basis：元素的长度
DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的。...【重要】 它只返回HTML节点，甚至不返回文本节点。 在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。...比如说：用 div.title = '我是标题'设置属性，用 div.getAttribute('title')获取属性，就是混用。...可以打印出来，但是不会出现在标签上 //采用方式二进行set div.setAttribute("bbbb","2222"); //bbbb作为新增的属性，会出现在标签上...（老版本的火狐用textContent） 获取内容举例： 如果我们想获取innerHTML和innerText里的内容，看看会如何：（innerHTML会获取到标签本身，而innerText则不会）
在本文，你将学会如何使用CSS变量，并把它集成到你的CSS开发流程中，让你的样式表更好维护，且减少重复。 让我们现在就开始吧！ 什么是CSS变量？...在这里它的值就是5。你可以动态地修改变量里的值，并在程序中使用它们。在上面的代码中，我把number1的值更新为4，然后再进行求和。使用相同的变量，这个时候total里存储的值就是5，而不再是7了。...当你在另一个元素里，为改自定义属性设置了一个新值时，那么所有该元素的子元素都会继承那个新值。...如何在SVG中使用CSS变量 CSS变量和SVG配合得很好。你可以使用CSS变量去修改SVG中的样式，以及和呈现相关的属性。 举个例子，假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。... 现在，让--icon-color变量局部化，即把它放在.success中，并设置一个green值。
我们应该为我们数据添加类型限定，下面有些有用的知识点： 使用类型联合和交集。官网解释了如何使用 TS 编译器组合类型以轻松工作。这在处理来自 RESTful API 数据的时非常有用。...，我们需要在 interface 里面可选指明。...否则，编辑器坚定它无法推断变量的类型，而认为是 any 类型。实际情况并非如此，尽管将该标志设置为 true 会导致发生意想不到的复杂情况，当会让你的代码管理得很好。...this.get(`${this.relativeUrl}${id.toString()}`); } } 复制代码 现在，你只需要将 API 调用的逻辑抽象到基类中，现在就可以专注于你将接收哪些数据以及如何处理它...请注意，这里我用了比原始更难的词语，而不是复杂这个词。这是因为除了检查直接的条件语句之外，任何逻辑都应该写在组件的类方法中，而不是写在模版中。
在本文，你将学会如何使用CSS变量，并把它集成到你的CSS开发流程中，让你的样式表更好维护，且减少重复。 让我们现在就开始吧！ 什么是CSS变量？...在这里它的值就是5。你可以动态地修改变量里的值，并在程序中使用它们。在上面的代码中，我把number1的值更新为4，然后再进行求和。使用相同的变量，这个时候total里存储的值就是5，而不再是7了。...如何在SVG中使用CSS变量 CSS变量和SVG配合得很好。你可以使用CSS变量去修改SVG中的样式，以及和呈现相关的属性。 举个例子，假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。...> 现在，让--icon-color变量局部化，即把它放在.success中，并设置一个green值。...如何通过JavaScript操作CSS变量 另一个超级酷的事情就是，你可以直接通过JavaScript代码访问CSS变量。
正是因为React的灵活性，React官网只说自己是一个UI library而不是UI Framework。 react官网 很强的灵活性有好处也有坏处。...换句话来说就是：大组件不需要关心子组件的内容，它只需要定义子组件在其内部是如何布局的，并且传递必要的上下文信息即可。...可是如果Child组件也需要被export出来被其它组件使用的话，代码就会开始变得混乱了，例如可能会有下面这种import语句出现: Parent和Child同时出现在import语句里面 因此我们这里更好的做法应该是...其实在我的团队里面，我不但要求不同的组件定义到不同的文件里面，我还要求每一个组件都要有一个单独的文件夹，组件的定义放在它对应文件夹的index.jsx文件里面。...因为这个原因很多开发者在写组件的时候都喜欢在最外层包一个毫无意义的div: 上面的写法会导致最终渲染在页面的无用div越来越多，这不但会影响到我们页面的accessibility，还可能会让无用的div
下面写下我的学习笔记~ 闭包-无处不在 在前端编程中，使用闭包是非常常见的，我们经常有意无意，直接或间接用到了闭包。闭包可以使传递数据更加灵活(比如处理一些点击事件) !...它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。...原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）...这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。...这也是Node里面常用到特性吧~ 常见错误之循环闭包 下面这个案例，我们添加3个div，值分别为aaa,bbb,ccc，我们想实现的是点击aaa输出1，点击bbb输出2，点击ccc输出3 document.body.innerHTML
什么是容器查询 首先，让我定义容器。 它就包含另一个元素的元素，一般我们叫它 wrapper。...我可以把这些组件分成以下几个部分 Viewport (媒体查询) Parent （容器查询） 通用:不受影响的组件，如按钮、标签、段落。 对于示例UI，下面是我们如何划分组件。...它可以是一个完整的页面设计，也可以是一个显示如何使用每个组件的简单图。 注意我是如何将每个变体映射到一个特定的上下文，而不是一个视口。...让一个组件对它的父宽度做出反应是非常有用的。正如刚才所看到的，我们重新查看了桌面大小的页面，并且有不同的部分，每个部分的列数不同。...我们可以根据当前的变化对它们进行排序，但所有的东西都有一个限制。有时，前端开发人员最好处理一个全新的组件，而不是使用容器查询创建变体。 考虑以下。
浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 这个就很有意思，其实浮动感觉像是起了另一层的文档流。...浮动的元素不与正常的文档元素互动，但是会影响相邻的行框（可以让文本完整地展示出来而不是覆盖文本），但是块框就不会跟浮动产生任何互动。 ? w3school.com.cn ?... ---- 如果说像绝对定位脱离了文档流，那在这个例子里面，图片肯定是盖住了文字导致文字无法正常看的，但是用浮动的话，文字会围着图片，而不会导致文字被挡住的情况。...我们并不想靠水流自己的力量去影响元素，比如我们并不想让文字围绕着图片，因为我可能想另起一段，在图片的下面，又比如我想要让浮动元素全部贴着边框，而不是一个个排满了才会贴着边框，这个就需要用到clean属性了...还记得我上面讲的那个水流的例子吗。利用clean可以给元素一块“完整的板”，让他遇到浮动元素的时候，不是围绕着它，而是“卡住”。跑到浮动对象的下面去。
容器内添加一个box，并将其定位在右下角之外，我们可以看到它位于绿色盒子的上面和粉色盒子的下面。...main容器内的三个盒子让事情变得扑朔迷离起来。 Content box 1的z-index值为6，但出现在header下面，而header的z-index值为5。...在层叠上下文中思考层叠顺序的一个好方法是，把它看作是嵌套有序列表中的一个子项目。...要把一个元素放在另一个元素的下面，它只需要有一个较低的z-index值，但这个较低的值可以是负值。 当使用伪元素并希望将其定位在其父元素的内容之后时，负值的z-index是非常有用的。...另一个好处是，如果需要在其他两个图层之间添加一个新的图层，有99个潜在的值可以挑选。
我敢说，如果你仅仅是因为这种代码看上去不怎么好看而羞于使用它. 那么你将错失最重要的东西。除非使用BEM让代码增加了不必要的维护困难，或者这么做确实让代码更难读了，那么你在使用它之前就要三思而行了。...另一个没有使用BEM的例子是： .site-logo {} 这是一个logo，我们可以把它写成BEM格式，像下面这样： .header {} .header__logo {} 但我们没必要这么做... 在这个例子里，我们也许仅仅只需要另一个class，可以叫它.headline；它的样式取决于它是如何被层叠的，因为它在.content的内部；或者它只是恰巧在.content...于是我们有了下面的代码： .site-logo {} .site-logo--xmas {} 我们可以通过使用--修饰符来快速地为我们的代码构建另一个版本。...-- ... --> 其次，有悖BEM思想，BEM是不考虑结构的，比如上面的分页按钮，即使它是在ul列表里面，它的命名也不应该考虑其父级元素。
. - 如果你对 CSS 有些了解，完全不知道 Flexbox，我写了一篇综合指南（免费文章，阅读时间约为 46 分钟） - 如果你对 CSS 掌握得不是很好，我推荐你阅读 CSS 全面（实用）指南（74...示例一：如何用 Flexbox 制作一个影片集 使用 Flexbox 实现横向纵向排列比大多数人想象的要简单。...除了能得到一个免费的响应式图片集外，使用 Flexbox 的另一个优势就是它的对齐选项。....cards { min-height: 100vh} 建立 Flexbox 布局 下面的代码块新建了一个在 .cards 里面的 Flexbox 布局样式。...一行内有两个元素，其中一个是另一个的两倍大小。一行三个元素居中嵌套排列在较大的元素里 你可以在这里查看最终的布局效果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
