随笔分类 - css
摘要：含义 margin:auto是具有强烈计算意味的关键字，用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值，一侧auto，则auto为剩余空间大小 (2) 如果两侧均是auto，则平分剩余空间 左边距是20px,右边距是80px。这里son宽度是200px，容器是300px，
阅读全文
摘要：可以看出div高度为20像素，明明span的高度为0，div的高度也应是0，为甚么会如图显示20像素。因为它存在每个“行框盒子”前面，同时具有该元素字体和行高属性的0宽度的内联盒 参考阅读： 《CSS世界》
阅读全文
摘要：以前一直对绝对定位下的margin作用很模糊，今天细看一下 不使用top,left，margin等 可以看出，自然状态下，绝对定位元素参照标准流位置，紧邻before元素 只定义left、top不使用margin 可看出定位元素是相对于使用了定位的父级元素 只使用margin 可以看到它是根据未用p
阅读全文
摘要：z index使用条件 CSS3之前，z index属性只有和定位元素在(postion不为static的元素)一起的时候才会有作用，但CSS3中flex盒子的子元素也可以设置z index。理论上来说，数值越大层级越高，然实际上不是 层叠规则 谁大谁上：当具有明显的层叠水平标识的时候，如生效的z
阅读全文
摘要：```
经常写hover 效果的时候，不经意间，父级有宽度，而hover 里的内容是撑开的，正常情况下 hover 的宽度，不是撑开的就会继承父级的宽度：例如hover 文字撑开一行，撑开的，但是父级有宽度，就会继承父级导致hover 里的文字换行。这往往是我们不想要的。解决办法就是，white-space:nowrap 属性。根本不用写js。用法就是在需要宽度自动撑开的元素上面添加样式： w...
阅读全文
摘要：inline block元素间隙问题原因及解决方法 原因： 解决方法：
阅读全文
摘要：Active的一段话 active的英文解释为“积极的”，表现在鼠标上就是点击的意思。关于active选择器最多的示例恐怕就是应用在链接上面的，然而打开链接是一个一瞬间的动作，这不能很好的体现active选择器的特点。 Active的特点 其实我们打开一个带有active链接，激活acive是有一个
阅读全文
摘要：一、应用 效果： 美国进口Culturelle康萃乐 益生菌30片儿童水果味LGG... 二、理解 注意：-webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 -webkit-
阅读全文
摘要：转载自https://blog.csdn.net/FE_dev/article/details/75948659 说明 vertical-align属性，是CSS属性中一个比较重要的属性，也是比较不好理解的一个。 我们今天就来说说它。 解释 先来看看他的定义。 定义和用法 vertical-alig
阅读全文
摘要：对于表单，input[type="radio"] 的样式总是不那么友好，在不同的浏览器中表现不一。 对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。 如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，
阅读全文
摘要：CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项
阅读全文
摘要：CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。 一、行内样式 使用style属性引入CSS样式。 示例：<h1 style="color:red;">style属性的应用</h1><p style="font-size:14px;color:green;">直接在HTML标签中设置的样
阅读全文
