从业三年，项目无数，现在回过头来，想要把一些重要的知识用白话整理出来：这个东西是什么？怎样才是最佳实践？希望对自己知识体系有梳理作用， 也希望对大家有些许帮助。...文字环绕效果 但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在，在inline-block出来之前，浮动大行其道。...浮动会导致父元素高度坍塌 浮动会脱离文档流，这个问题对整个页面布局有很大的影响。...文字环绕效果 这个不用说了，浮动本来就是为文字环绕效果而生，这是最基本的 ? 文字环绕效果 页面布局 浮动可以实现常规的多列布局，但个人推荐使用inline-block。...页面布局 多个元素内联排列 如果前文提到的，浮动可以实现类似inline-block的排列，比如菜单多个元素内联排列。但个人推荐使用inline-block。 ? 多个元素内联排列 又来点总结？
FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。...MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。...因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。 2....作用 BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。...、inline-grid、table-captain为什么可以呢？
3.box-sizing常用的属性有哪些？分别有什么作用？...1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; 2）页面被加载的时，link会同时被加载，而@import...LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。 为什么要使用它们？ 1）结构清晰，便于扩展。...9.block，inline和inline-block的概念以及区别 首先这是display中的三个属性值，不是元素指类型，元素类型在HTML5之前分为两种分别是块级元素（ block-level elements...即对inline-block元素可以设置宽度和高度，同时inline-block元素又可以在同行进行排列。 备注：属性为inline-block元素之间的空格或者换行在浏览器上会是一个空白的间隙。
使用多路绑定跟一般的绑定还是有区别的，首先它并不能很好的在标记扩展中使用，另外，使用多路绑定必须为其指定多路转换器，不指定的话系统不知道怎么处理从这几个源过来的数据，下面通过一个例子来讲解一下：.../> 使用多路绑定，就得写成属性元素的形式...，指定多路绑定的Converter，并且将更新设置为属性改变时，这样才能及时更新到button身上。...将这两个的Text绑定到Button的IsEnabled属性上，就能实现上述情景，效果如图： 只有当两个文本框都有值的时候登录按钮才能使用，至于为什么密码框不使用PasswordBox控件...，那是因为PasswordBox控件的Password属性不是依赖属性，Binding只能绑定依赖属性，在它身上不起作用，关于依赖属性，我们下节开讲，Binding相关到此结束...
5.3，scroll-view 在 ios 中下拉刷新，触发两次 bindscrolltoupper 事件？ 5.4，scroll-view 组件为什么有时候 scroll-x 不作用？...5.4，scroll-view 组件为什么有时候 scroll-x 不作用？ 有时候是鼠标无法滑动，在mac电脑上，用触控板就可以滑动。...inline-block兼具两者优势，子元素既在一行内显示、不换行，又能设置其宽、高等块元素属性。...理解了inline-block样式值的作用，回头再看为什么添加display:inline-block这个样式，就好理解了。...[Online]Available:jianshu.com/p/198c62482afa 「CSS中display:inline-block的作用」.
- - link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 加载顺序的差别。...当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。...@import可以在CSS中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。 2.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?...，作用在什么元素上？...高度不一样的inline-block元素如何顶端对齐?
Demo戳我 没有得到意料之中的结果，并没有实现所谓的两端对齐，查找原因，在 W3C 找到这样一段解释: 最后一个水平对齐属性是 justify，它会带来自己的一些问题。...才能起作用。...再寻找原因，原来是出在最后一个元素上面，然后我找到了 text-align-last 这个属性，text-align-last属性规定如何对齐文本的最后一行，并且 text-align-last 属性只有在... text-align 属性设置为 justify 时才起作用。...那么为什么使用了 :after 伪元素之后就可以实现对齐了呢？
38、为什么css放在顶部而js写在后面？ 39、z-index属性在什么情况下会失效 40、Flex 布局父级容器属性和子级项目属性有哪些？...33、CSS属性content有什么作用？有什么应用？ content属性与::before及::after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。...解决：float去除，改为display：inline-block； 40、Flex 布局父级容器属性和子级项目属性有哪些？...align-items属性定义项目在交叉轴上如何对齐。 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。...浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
至此这个选择器匹配结束，所有还在集合中的元素满足。 大体就是这样，不过浏览器还会有一些奇怪的优化。 注意： 1、为什么从后往前匹配因为效率和文档流的解析方向。...关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况； 应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性...display:inline-block 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。...比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。...自适应暴露的一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看内容太过拥挤。响应式正是针对这个问题衍生出的概念。
在使用CANVAS标签时，一定要设置宽高，而且这个宽高是作为canvas属性设置的，曾经被这个坑了，即 3 .dom...操作造成页面卡顿，解决方案。...把DOM元素从页面流中脱离或隐藏，这样处理后，只会在DOM元素脱离和添加时，或者是隐藏和显示时才会造成页面的重绘或重排，对脱离了页面布局流的DOM元素操作就不会导致页面的性能问题。...添加或删除disabled attribute会禁用或启用这个按钮。但 attribute 的值无关紧要，这就是我们为什么没法通过 仍被禁用这种写法来启用按钮。...less 编译calc计算属性发生错误，解决办法： 使用~符号标记计算属性，例如，计算宽度为100%减去定长，并平分7份的值。
，元素的 display 值被忽略，强制当成 block 方式处理，因此，vertical-align 也就失去了作用。...vertical-align的属性值来分点讲 baseline :star:当一个inline-block盒子A中有inline-block元素时，A的基线为A中最后一个inline-block元素的基线...浏览器解析渲染页面。 断开连接。 TCP握手 面试官，不要再问我三次握手和四次挥手 - 掘金 (juejin.cn) 为什么是三次？...DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为reflow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为...页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。
CSS布局 确定页面的大致结构，页面分多少块，每块的位置。每个部分怎么把该部分撑起来。...可以设置 父元素的overflow属性(除了 visible 以外的值（hidden，auto，scroll）)....* 让页面 在不同的设备上 能正常的使用 * 主要处理的是 屏幕大小的问题(严格来讲 还涉及到 是否有鼠标 是否是读屏软件 是否支持一些样式) * 在具体的方法上 涉及到 设计 和 实现 两方面。...(如果设计师直接给你固定宽度980的页面，位置都定死的话，那么到移动端 是没有办法 做适配的)所以 在设计的源头 就要想一些办法 去适配。...* 适配页面的viewport(页面的宽度 要和 移动端的宽度 适配，否则页面 在移动端上 会缩小，也就是一定要加viewport) * rem/viewport/media query
说明他们的作用? inline（默认）–内联 none–隐藏 block–块显示 table–表格显示 list-item–项目列表 inline-block 8 position的值？...CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。...多行文本垂直居中：需要设置display属性为inline-block。 35 怎么让Chrome支持小于12px 的文字？...-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。...下可能会出现FOUC现象（即样式失效导致的页面闪烁问题） 44 CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
说明他们的作用? inline（默认）--内联 none--隐藏 block--块显示 table--表格显示 list-item--项目列表 inline-block 8 position的值？...CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。...多行文本垂直居中：需要设置display属性为inline-block。 35 怎么让Chrome支持小于12px 的文字？...-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。...下可能会出现FOUC现象（即样式失效导致的页面闪烁问题） 44 CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
今天我们一起来梳理下CSS垂直居中的几种方法，我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center...在此之前，先解释一下CSS里头vertical-align这个属性，这个属性虽然是垂直置中，不过却是指在元素内的所有元素垂直位置互相置中，并不是相对于外框的高度垂直居中。...这时候就必须用到CSS特有的calc动态计算的能力，我们只要让要居中的div的top属性，与上方的距离是「50%的外框高度- 50%的div高度」，就可以做到垂直居中，至于为什么不用margin-top...height:40px; background:#00f; float:left; top:calc(50% - 20px); } 04 使用表格或假装表格 或许有些人会发现，在表格这个...transform:translateY(-50%); background:#095; } 关于Transforms的用法，笔者的这篇文章也有过介绍，感兴趣的同学可以点击《Transforms 属性在实际项目中如何应用
左右居中最为简单，使用 text-align:center; 就可以让绝大多数的对象居中对齐，并且这个属性也获得了几乎全部浏览器的支持。...实际上，这个属性定义的是块级对象内部文字的对齐方式，内部的文字或者图像一般是内联对象。 也许有人会提到，为什么不用 margin:0 auto;这个办法呢？...这是一个好问题，在做居中布局的页面时，这是我们最常用的让DIV容器居中的办法。margin作用于块级元素，而是否作用于其他内敛元素，不同的浏览器有着不同的解释，因此对于左右居中，没有使用这个方法。...在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 3、最后代码 综上，可以得出对于高度、宽度都不固定的容器，如何让其做到水平、垂直居中： 1 <!...position:absolute; _top:50%; _left:50%; } 9 #content { color:#fff; border:1px solid #000; display:inline-block
1.什么是浮动 首先我们需要知道定位 元素在页面中的位置就是定位，解决问题之前我们先来了解下几种定位方式 1、普通流定位 static（默认方式） 普通流定位，又称为文档流定位，是页面元素的默认定位方式...页面中的块级元素：按照从上到下的方式逐个排列 页面中的行内元素：按照从左到右的方式逐个排列 但是如何让多个块级元素在一行内显示?...overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...inline-level box， display属性为inline, inline-block, inline-table的元素，会生成inline-level box。
这里就是这个li标签里的所有属性了，我们在做开发时可以直接修改这里的属性值，然后直接在页面中查看效果，比如我现在在这里加一个 margin-bottom: 20px： ?...回车后即可在页面查看效果： ? 也可以在盒子上直接调整大小来进行盒子样式的调试： ?...div + css的应用 position：定位属性 作用：让标签显示在我们想要显示的位置 默认值：static 静态，不能动 relative：相对的，可以移动 lesson4.html 属性，这时候页面显示为： ?...比如微信公众号右侧有一个`在线问答`不管页面怎么动，它都是在浏览器右侧中部边缘： ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
