mutouren_abc的博客

letter-spacing， 清除空格

响应式开发, flex布局，防止图片变形，文本溢出

css三种引入方式：内联、页级、外联内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。 页级CSS也可称为内部CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。 外联CSS也可称为外部

什么是Flex布局？Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。display:flex 与 display: inline-flexdisplay:flexflex容器指定为块级元素 display:inline-flexflex容器指定为行内元素..

一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。网格容器(Grid Container)属性display grid-template-columns grid-template-rows grid-template-areas grid-template grid-column-gap grid-row-gap grid-gap ju

浮动元素使其父元素高度塌陷情况描述：给一个元素设置浮动之后float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。原因：当元素设置浮动后，会自动脱离文档流，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）解决方法：.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px);}auto-fit：自适应数量，栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的100px宽的列。 minmax()：定义的范围大于或等于 min， 小于或等于 ma...

可以通过设置transform属性，达到字体缩放的目的。span { font-size: 12px; font-weight: bold; transform: scale(0.7);}

在一个层叠上下文中，一共可能出现七个层叠等级，从最低到最高排列，依次是：背景和边框 ：形成层叠上下文的元素的背景和边框，它是整个上下文中层叠等级最低的 Z-Index 为负数 ：设置了 z-index 为负数的子元素以及由它所产生的层叠上下文 块级盒模型：位于正常文档流中的、块级的、非定位的子元素 浮动盒模型 ：浮动的、非定位的子元素 内联盒模型 ：位于正常文档流中的、内联的、非定位的子元素 Z-index 为 0：设置了 z-index 为 0 的、定位的子元素以及由它所产生的层叠上下文

使用案例把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:

定义和用法text-overflow 属性规定当文本溢出包含元素时发生的事情。取值clip: 修剪文本。 ellipsis: 显示省略符号来代表被修剪的文本。 string: 使用给定的字符串来代表被修剪的文本。示例...

1. 利用 CSS 穿透覆盖默认样式常见发生场景：假如我们需要通过 input，type=”file”来上传文件，而这个 input 的默认样式，可以说是非常地丑。所以我们希望通过一张图片，与这个 input 大小一样，位置一致地盖在上面。这个时候，显然，这个时候点击图片，input 是不会起作用的。就是因为 img 隔绝了 click 的穿透，而我们希望的是，这个 img 只是视觉上遮挡了 input 的样式，但是点击的时候还是点击到 input。所以，只要让 img 可穿透即可。css 代码如下：

flex布局，css布局