随笔分类 - CSS
摘要：根据9.4.2 IFC小节中的高亮文字可以看出，IFC中是这样布局行内盒的：IFC首先创建一个行框，将行内盒一个一个水平地排列。一个行框用完了，就创建一个新的行框接着放。如果一个行内盒在当前行框的剩余部分放不下，则会创建一个新的行内盒装下剩余的部分，放到下一个行框。被分割的行内盒在分割处（即上一个行
阅读全文
摘要：蓝色区域为.parent的content box。由此可以看出，规范中所说的，若某元素的position为absolute，其视口应该为其第一个position为absolute、relative或fixed的祖先元素的内容边界，而不是内边距边界。
阅读全文
摘要：假设现在有一个红色box和一个绿色box。 红色box在上，绿色box在下。 红色box设置float: left，绿色box使用clear:both清除浮动。 请问，绿色box的哪个上边缘（content box的上边缘、padding box的上边缘、border box的上边缘、margin
阅读全文
摘要：/* 这是一个规则集，由一个选择器和后跟的声明块组成 */ 选择器 { /* 这是一个声明 */ 属性名1: 属性值1; ... }
阅读全文
摘要：概述 1）什么是BFC BFC，全称Block Formatting Content，译为“块级格式化上下文”。它是一个独立的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局。这个区域与外部毫不相干。 BFC是一个独立的布局环境，其中的元素布局不
阅读全文
摘要：不同情况的margin合并 两个竖直方向上相邻的margin会发生合并。合并的margin的高度等于两者中的较大者。 兄弟关系 父子关系 当父元素没有设置内边距或边框，以及没有触发BFC时，如果子元素的margin值大于父元素的margin值，就会发生margin塌陷。解决方法是给父元素添加边框或内
阅读全文
摘要：rem 先将1rem设为屏幕宽度的1/20： document.addEventListener('DOMContentLoaded', function () { document.documentElement.style.fontSize = document.documentElement.
阅读全文
摘要：[1] display:table-cell知识点总结 匿名表格元素 有时候我们在编写table元素的时候，会少些一些元素。这些“丢失”的元素会被模拟出来，使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table元素，从而使得其符合table/inline-table、ta
阅读全文
摘要：float元素的特性 包裹性 包裹性由“包裹”和“自适应”两部分组成。 1）包裹 “包裹”是指浮动元素若没有指定宽度和高度，则设置适应内容的宽度和高度。即使是块级元素，width也不再占满屏幕的一行。 （图中红色为father，蓝色为浮动元素son，绿色为content） 2）自适应 “自适应”是指
阅读全文
摘要：word-wrap：是否对超出容器的长单词进行换行。 normal：只在允许的断字点换行。 break-word：在长单词或URL地址内部进行换行。 word-break：定义如何换行。 normal：使用浏览器默认的换行规则。 break-all：允许在单词内换行。 keep-all：只能在半角空
阅读全文
摘要：以前我对css优先级的理解很浅，一直以为id选择器最高，并且当出现class="a b c"时，优先级c>b>a。后来又错误地理解为a、b、c三者的优先级高低是根据出现的先后次序来的，后出现的会覆盖先出现的。为此产生了不少bug。于是今天就来把这个问题给搞清楚了。 在讲css优先级之前，先明确几个重
阅读全文
摘要：将bar固定在底部是一个非常常见的需求，比如分页器。于是，今天就来说一说有哪些方法能够将bar固定在底部。 fixed法 这是最简单的，但同时缺陷也最大，因为fixed元素的百分比宽度是相对于浏览器视口来计算的，因此如果出现像下面这样的布局，fixed元素将无法实现宽度自适应父容器的需求。 <bod
阅读全文
摘要：table布局的优点是能够自动分配水平方向的宽度，且在垂直方向上，让子元素等高。其技术原理是先不渲染，等全部数据加载完之后计算出尺寸后再渲染，因此性能上不是很好，不适合大范围的布局。 而div布局的话，不能实现自适应的布局，但在性能上较优。 我们不能用table实现整个网站的布局，但可以做一些小范围
阅读全文
摘要：固定布局（fixed layout） 即传统布局，网页上的所有元素的尺寸一律用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居
阅读全文
摘要：标准盒模型 低版本IE盒模型 CSS3 box-sizing box-sizing：content-box | border-box | inherit | initial 参考资料 1.盒模型，标准模型和怪异模型有什么区别？
阅读全文
浙公网安备 33010602011771号