随笔分类 - DIV+CSS
摘要：过渡（Transitions）: div { width: 100px; height: 100px; background-color: red; transition: background-color 0.5s ease-in-out; } div:hover { background-col
阅读全文
摘要：一、核心术语 容器 设置了 "display: gird / inline-grid" 的元素，就称之为网格容器（grid container） 项目（Item） grid 容器中的直接子元素就为网格项目（grid item） 下面的 .container 元素就为网格容器（grid contain
阅读全文
摘要：当一个长单词超过容器宽度时，如果不断句则会溢出容器，如下： 遇到这种情况，就需要断句，使用word-wrap:break-word和word-break:break-all都能达到断句的效果，两者有啥区别，看图： word-break:break-all正如其名字，所有的都换行。毫不留情，一点空隙都
阅读全文
摘要：1.引用变量值的var函数，可以指定第二个参数做为默认值（即当变量不存在时，使用该值），需注意的点 第二个参数不要加单双引号，正确的示例：var(--x,#fffff) 第二个参数中的空格不会被忽略 var(--margin,10px 20px) 2. 变量值的写法 变量值有单位时，不能写成字符串格
阅读全文
摘要：https://www.cnblogs.com/ranyonsue/p/9487599.html
阅读全文
摘要：在前端面试中，经常会被问到两栏布局问题，即左栏宽度固定，右栏占满剩余空间。 常见的实现方法有以下几种，最后一种不推荐： 1. 对容器元素使用flex布局，然后右侧子容器使用flex-grow:1 2. 容器元素使用display:table，右侧子容器使用display:table-cell实现 .
阅读全文
摘要：align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。取值为flex-start | flex-end | center | space-between | space-around | stretch; 1.什么时候会有多根轴线？答案是flex-wrap的值
阅读全文
摘要：1. 使用calc函数时，100%参与计算该如何表示？ cacl(~"100% - 20px")； 2. webpack.resolve.alias中定义的路径映射符在less中该如何使用? webpack映射如下: less中使用时： background: url('~img/dataManag
阅读全文
摘要：开源实现：https://github.com/lugolabs/circles 自行实现：圆环与svg画布间剩的空间太多。
阅读全文
摘要：1.不同布局模式对性能的影响 table-layout:auto(创建的table默认是此布局模式)： 对table和td、th指定的宽度无效，浏览器会计算所有单元格的内容宽度才能得出一列宽度 如果想对单元格的内容自动折行需使用word-wrap:break-word;word-break:brea
阅读全文
摘要：background-origin: 该属性为background-position提供背景图的开始参考点，比如background-position为10px 20px,那这10px 20px是以谁（border-box、padding-box、content-box）进行移动呢？这就需要由bac
阅读全文
摘要：一共有三个属性会使元素脱离文档流： （1）浮动(float) （2）position:absolute|fixed 元素脱离文档流会导致父元素高度塌陷，要修复高度塌陷问题，可以将子元素与父元素放在同一个BFC中
阅读全文
摘要：:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码： p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素； h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
阅读全文
摘要：一、line-height 1.line-height line-height行高是指文本行基线之间的距离。 line-height不用于块级元素，当对块级元素设置行高时，只会对其中的行内子元素产生影响。在应用到块级元素时，line-height定义了元素文本基线之间的最小距离，即最小行高。 如果块
阅读全文
摘要：翻译-你必须知道的28个HTML5特征、窍门和技术 HTML5表单新特征简介与举例——张鑫旭
阅读全文
摘要：position：absolute/fixed优先级最高，有他们在时，float不起作用 postion与display:使用定位属性时，元素的display变成了inline-block，宽度从100%变成了auto postion与z-index:z-index必须在position的值不为st
阅读全文
摘要：我们知道行内元素有很显的个性：不独占空间，设置宽和高无效，margin只有左右有效，padding四个方向都有效。 运行结果： 那么当行内元素浮动时会发生什么情况呢？答案是行内元素浮动以后类似于display:inline-block的特性，不独占一行，但是可以设置宽高和margin-top和mar
阅读全文
