1.margin与百分比单位 Paste_Image.png Paste_Image.png 2.margin重叠 margin重叠通常特性： 只发生在block水平元素（例如：p、div、list、item...class="father"> 我是子元素 Paste_Image.png...class="father"> 我是子元素 Paste_Image.png...image.png 上图水平方向剧中了，但是垂直方向不剧中，父级元素高度有了，子元素高度也有了，为什么还是不垂直居中呢？...这时上图蓝色旁边的空间尺寸就是被强制更改的尺寸，也就是margin:auto可以用来分配的尺寸空间，此时在设置margin:auto空间就被重新分配了，从而就实现了绝对定位元素的水平和垂直居中效果。
当然，广义的故障艺术不仅仅指这种效果，我觉得是很宽泛的，本文将介绍一些 CSS 能够模拟完成的故障艺术效果。 使用混合模式实现抖音 LOGO 首先从静态的开始，抖音的 LOGO 就是很好的一个例子。...而实际上，是两个 J 形重叠在一起，重叠部分表现为白色，这个特性，使用 CSS 的混合模式 mix-blend-mode 非常好实现，而单个 J 形示意图如下： ?...然后，有的时候，效果不希望和背景混合在一起，可以使用 isolation: isolate 进行隔离。 好，上述效果可以归类为一个分类。...clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。...我自己对 Glitch Art 的理解其实也比较浅显，只是觉得使用 CSS 去实现这样一些类似的效果比较有意思，就动手尝试实践了一番，相关术语或者名词理解错误烦请各位谅解指出。
关键渲染路径 关键渲染路径是指浏览器将 HTML、CSS 和 JavaScript 转换成实际运作的网站必须采取的一系列步骤，通过渲染流程图我们可以大致概括如下： 处理 HTML 并构建 DOM Tree...更详细的说明可以在 使用 JavaScript 添加交互 这篇文章中查阅。 解析 CSS 解析的步骤与 HTML 的解析是非常类似的。...内联样式会放到已经排序的结果集合最后，所以如果不设置 !important，内联样式的优先级是最大的。 !important 优先级 在设置 !important 的声明前，会先设置不包含 !...盒模型 众所周知，文档的每个元素都被表示为一个矩形的盒子（盒模型），通过它可以清晰的描述 Render Object 的布局结构；在 blink 的源码注释中，已经生动的描述了盒模型，与原先耳熟能详的不同...class="div1"> 可以看到后面两个节点重叠而压缩到了同一个
CSS作用的是盒子(Box), 而不是元素(Element); * 2. JS无法直接操作盒子。...首先css属性width和height作用于div元素所产生的盒子，而不是元素本身; 2. 另外盒子模型由4个盒子组成，那width和height到底是作用于哪些盒子呢？ ... xp子元素的文字 xp父元素的文字 其他元素 ?...当block-level box高度为0，垂直方向的border和padding为0，并且没有in-flow的子元素。那么它垂直方向的margin将会发生重叠。 2....否则inline-level box会捅破line box(即line box宽度不变) 行——换与不 先看看关于换行的CSS属性吧！
（一般情况下参考元素 == 父级元素，这里写成参考元素而不是父级元素，在下面我会再细说） 2.width:auto也是以“占满参考元素宽度”为目标。...在设置width:100%后，子元素“溢出”了父元素 【注意】宽度默认为width:auto，但高度默认height:0 二.浮动/定位对width:auto和width:100%的影响 1.浮动/定位对...没错，在一般情况下（没有浮动，不是行内框），并排的div 的margin可以彼此重叠,而且重叠后值为两者中较大的那个 ?..."div4"这个文本不是被包裹在div4这个元素里面吗，为什么被浮动元素div2“怼”下来了？刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗？对啊，这里说的是元素，并不是文本。...【实现思路】：正如上面所说，浮动会脱离文档流从而不占据其他元素的物理位置,而我们让div1向左浮动了，这表示我们在考虑div2的布局的时候完全可以把div1当作不存在。
从属差异：link 为 html 标签，可以加载 css, 也可以引入网站图标（facaion）, 定义 rel 链接属性，而 @import 是 css 提供，只能用于加载 css 2....加载差异：link 引用的 css,在页面加载时同时加载。而 @import 在页面加载完后才加载 3. 兼容性：link 是 html 标签，没有兼容问题。...权重差异： • 在样式中：link 样式的权重高于 @import 的权重吗，例如: /* @import "03.css"; */ body, html { background-color:...不要使用 @import 前缀引用样式，会影响 css 加载速度 6. 避免选择器嵌套过深 7. 不滥用 web 字体 • 可维护性，健壮性 1. 抽离公共样式 2. 样式与内容分离 16....与 fixed 的根元素不同，absolute 的根元素可设置，fixed 的根元素是html • 在有滚动的页面中，absolute 会跟随父元素进行滚动，而 fixed 固定在某个位置 27.
来相对原位置作移动; 根据spread distance缩放阴影盒子的尺寸(会影响盒子的位移); 根据blur radius对阴影盒子作加工; 最后将阴影盒子与元素border box重合部分剪切掉。...对阴影盒子进行剪裁 剪切掉不与元素padding box重叠的部分； 仅显示元素各padding edge至其对应的guideline间的区域。...为0的效果，可以看到阴影尺寸与元素尺寸一模一样。...看sample3中阴影尺寸已经与元素盒子重叠了，因为阴影盒子左边框向左发散了20px了，超过它俩之间10px的水平距离了，而sample2则恰恰邻近而已。...CSS3盒子阴影属性
（关于分层显示的内容可参考《CSS魔法堂：你真的理解z-index吗？》） ?...:#06f;width:200px;height:100px;"> 通过创建BFC翻身做主人 同样是盒子，为啥你就可以在我上面呢？....clearfix方案 不管是浮动闭合也好，清除浮动也罢，我们的目的往往是两者结合——Float定位的范围与Normal flow定位的范围分明，且采用Normal flow的父容器包裹所有子元素。...与第一个Normal flow的子元素的margin-top产生margin collapsing效果。...时至今日再次遇见语文老师时候我惭愧的告诉她我已经不写文了，也没有像她说的那样成为一个天才，我只能微微一笑告诉她我至少还没停下笔。
三种常见的布局方案方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行...，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。...属于同一个BFC两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素 margin重叠,仅仅是垂直方向，左右不是这个样子的），会发生外边距合并，指的是当两个垂直外边距相遇时，它们将形成一个外边距...（不设置浮动，不设置左边距，块级子元素，一律靠左竖直向下排列，内联子元素一律从左向右排列，想想，正常写代码，都是这样，设置左浮动的靠近父元素的左边，设置右浮动，靠近父元素的右边。）...在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
写css，你少不了与margin打交道。你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？...什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？...——CSS权威指南 我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin...负margin技术及其应用 在margin所有的实际应用中，负margin技术是我学习css路上最重要一课之一，许多高级应用和页面上的疑难杂症都可以用负margin技术来实现。...在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。 解决方法：把左侧块级元素更改为内联元素，比如把div更换为span。
那是因为.div1与.div2都生成了层叠上下文，它们的子元素z-index再大也不会作用于上下文以外的元素。但如果子元素位置重叠了，那怎么确定哪个在上面呢？...此时上下关系对比的是.div1Child与.div2在根元素层叠上下文中层叠水平的对比。...它的每一个子孙元素，一旦形成了层叠上下文，那么连上它的子元素，都就会被装入一个小一点箱子（上述过程可以无限次执行，小箱子中有元素形成了层叠上下文，会独立包成一个更小的箱子）。...我的傻孩子啊，其实你也对，你看，蓝色不久在红色上面吗？完美对应这条规则。...只是，不希望自己把回避问题变为习惯，而且了解下来还是蛮有趣的，之后再出现类似的状况时，不至于束手无策。 感谢各位看官看到这里，文章太长了～希望对大家有所帮助，我对层叠水平与层叠顺序感觉不是特别透彻。
[title='我的文件']" nth-child(2)表示取div的第二个 子元素选择器(>)，表示只能选择下一级的元素 例如：#ab>p 含义：匹配id为ab的下一级中的p标签 实例（f-data-copy-detail...匹配最后一个标签 3. xpath 与 css 的对比 4. xpath 与 css 更详细示例对比 直接子元素 XPATH 中的直接子元素是使用“/”定义的，而在 CSS 上，它是使用“>”定义的...XPATH：//div/input CSS: div>input 后代元素 如果一个元素在另一个元素的内部（子元素或者孙元素），则它在 XPATH 中使用“//”定义，而在 CSS 中仅使用空格定义...'submit'] 第一个子元素 XPATH: //div[@id='u1']/a[1] CSS: div#u1 a:first-child 最后一个子元素 XPATH: //div[@id='u1...']/a[last()] CSS: div#u1 a:last-child 第二个子元素 XPATH: //div[@id='u1']/a[2] CSS: div #u1 a:nth-child(2)
前言 大家好，我是HoMeTown，今天想聊一聊CSS中的BFC，很多朋友应该都听过这个名词，搞懂BFC可以让我们理解CSS中一些很诡异的地方，话不多说，直奔主题！ 什么是BFC BFC是什么？...大白话讲，我理解BFC其实就是CSS中的块级作用域，包含上下文元素中的所有子元素，但不包括内创建了新的BFC的子元素的内部元素，也就是 A -> B -> C 但是 A !...BFC的渲染规则 BFC中有特定的渲染规则，如下： 同一个BFC中两个相邻的元素的margin重叠问题 BFC在计算高度是，即使浮动的元素也会参与高度计算 BFC的区域不会与float的元素区域重叠 每个元素的左外边距与包含块的左边界相接触...，.main也是，这并不是我们想看到的，那么，可以利用BFC的特点，BFC包含上下文元素中的所有子元素，但不包括内创建了新的BFC的子元素的内部元素，手动给.main创建BFC，改动如下： .main...总结 BFC内部的渲染规则，在现代flex布局中其实有更多的解决方案，但是作为一个职业前端，还是需要了解一下。以上就是我的见解，不喜勿喷。
在以下情况下，margin 会重叠： 相邻的兄弟姐妹 完全空盒子 父元素和第一个或最后一个子元素 依次来看看这些场景。...但是你会发现实际的效果是第一项和最后一项与父元素的的margin齐平，好像子元素和父元素之间没有50px的margin一样。...如果我们再看父元素和第一个或最后一个子元素的示例，可以在 wrapper 元素加上 display: flow-root就会创建一个新的BFC，从而阻止 margin 合并 ... .wrapper {...最简单的方法是只在元素的顶部或底部定义 margin。这样，就很少会遇到 margin 重叠的问题，因为有margin的边总是与没有margin的边相邻。...这个解决方案并不能解决你可能遇到的问题，因为子元素的margin会与父元素相互重叠。这个特定的问题往往不那么常见，但知道它为什么会发生可以帮助你想出一个解决方案。
在以下情况下，margin 会重叠： 相邻的兄弟姐妹 完全空盒子 父元素和第一个或最后一个子元素 依次来看看这些场景。...在下面的示例中，有一个类名为 wrapper 的div，给这个div一个红色的outline，这样就可以看到它在哪里了。 这个div里面的三个子元素的 margin 都是50px。...但是你会发现实际的效果是第一项和最后一项与父元素的的margin齐平，好像子元素和父元素之间没有50px的margin一样。...如果我们再看父元素和第一个或最后一个子元素的示例，可以在 wrapper 元素加上 display: flow-root就会创建一个新的BFC，从而阻止 margin 合并 ... .wrapper {...这样，就很少会遇到 margin 重叠的问题，因为有margin的边总是与没有margin的边相邻。 这个解决方案并不能解决你可能遇到的问题，因为子元素的margin会与父元素相互重叠。
在css世界中，内联元素极为重要，涉及的css属性也非常多，这些属性往往具有继承特性！ 内联盒模型.png 内容区域：只与字号和字体有关，与行高无关！...父级和第一个/最后一个子元素； 空块级元素； margin合并的意义：在页面中任何地方嵌套或直接放入任何裸，都不会影响原来的块状布局。...或者定宽容器的子元素的margin-right失效 一个普通元素，在默认流下，其定位方向是左侧及上方，此时只用margin-left和margin-top可以影响元素的定位。...border-color 没有指定时，会使用当前元素的 color计算值 border 与透明边框 场景一：距离右下方50px background默认是相对于左上角，在宽度不固定的情况下，我们可以通过..."高度塌陷"可以让跟随的内容和浮动元素在一个水平线上；行框盒子如果和浮动元素的垂直高度有重叠，则行框盒子在正常定位下只会跟随浮动元素，而不会产生重叠。这是实现文字环绕的重要两点！
如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。 如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。...如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素 浮动元素会尽可能地向顶端对齐、向左或向右对齐 重叠问题 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上...块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上 clear属性 clear属性：确保当前元素的左右两侧不会有浮动元素。...（不推荐使用） 方法二：使用空元素，如 (.clear{clear:both}) 原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动...（不推荐使用） 方法三：让父级div 也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。
，我还是决定还是写一篇关于BFC的文章，因为考虑到我可以用比较简介的语言讲明白，不是为了水文章，看完绝对有点帮助的。...，比如块级元素默认就会占据文档一行，高度会根据内容填充，行内元素可以相互挨着，不会占据多余的空间等规则，BFC很明显你可以浅显的将他理解为将一块元素封闭起来，与别的元素进行隔开，自己内部的属性不干扰外部的元素的属性...包含内部浮动元素 说现象 因为css的默认规则，当父元素没有进行设置高度的时候，他的高度取决于内部元素的高度，当内部元素设置浮动了之后，父元素就没有了高度，这个过程叫做不包含内部浮动元素，这是css...} 给文字div添加BFC属性之后效果 解决margin重叠 说现象 margin重叠其实也是css规则里面的一种，当父元素内部两个子元素中间没有任何可以影响高度的属性或者元素，那么这个时候两个元素设置对立面...div> 看现象 可以看到，我们明明设置了距离上面100 和距离下面100 但是最后距离只有100 这个现象就做margin重叠 给其中一个子元素添加BFC进行解决
/* 所有在#mydiv1后面的元素都会向上 移动10px，而#mydiv1一点都不会移动 */#mydiv1{margin-bottom:-10px;} 如果宽度没有设置，左右负边距会把元素向两个方向拉以增加宽度... 如果对一个浮动的元素使用负边距，它会产生一个空白，其他元素就可以覆盖这一部分。...学以致用 既然我们知道使用负边距在CSS2中是有效的，使用它可以给我们提供一些非常有趣的CSS技巧。 把单个列表变成三列 如果你有一个列表垂直方向太长了，为什么不把它分成几列呢？...负边距可以让你在不增加任何浮动和标签的情况下完成。...重叠效果可以增强深度感从而为突出特定元素。一个很好地例子就像上图一样，通过重叠来吸引注意力。只需要使用z-index属性和一点小创意你就可以做到。 惊艳的3D文本效果 ? 这是一个精致的技巧。
就可以让子元素不定宽高水平垂直居中了。文字在垂直和水平方向重叠的两个属性分别是什么？ 垂直方向：line-height。...Less只是在CSS语法上做了扩展，所以老的CSS代码也可以与Less代码一同编译。CSS 3的新增特性？ie9开始支持1.选择器增加；2.样式增加：常用 比如：圆角。...将CSS代码放在标签内部；内联样式，将CSS样式直接定义在HTML元素内部；移动端的布局用过媒体查询吗？通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。...描述一个“reset”的css文件并如何使用它。知道normalize.css吗？你了解他们的不同之处吗?...网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！
领取专属 10元无门槛券
手把手带您无忧上云
