花铛

自定义属性：也可以称作 CSS 变量或者级联变量。），由var()函数来获取值（例如：）它包含的值在整个 CSS 文档中都可以重复使用。自定义属性会继承。

一个盒子不设置 height，当子元素都设置浮动后，无法撑起自身的高度。原因就是这个盒子没有形成 BFC。BFC：Block Formatting Context，块级格式化上下文。是页面上的一个隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

图片地图允许在一个图片上关联多个 URL，目标 URL 的选择取决于用户单击了图片上的哪个位置。图片地图有两种类型：服务器端图片地图：将所有点击提交到同一个目标 URL，向其传递用户单击的 x、y 坐标。客户端图片地图：通过 HTML 的<map>标签来实现。<map>标签被用于定义客户端图片地图，即一个具有可点击区域的图片。<map>标签只是一个容器，其中包含一组<area>标签，正是这些<area>标签定义了图片地图里的可点击区域。name 属性是<map>

问题：父元素无法被撑开出现横向滚动条。解决方法：分别给子元素增加属性 flex-shrink:0，确保父元素不够大时子元素不会被压缩，从而撑开父元素的宽度出现横向滚动条。

原因图片默认的vertical-align是baseline（元素放置在父元素的基线上，也就是下边距）。

如果子元素根据父元素设置宽度，那么将其高度设置为0，并将padding-bottom设置为百分比，则该百分比将根据当前宽度计算。.div1{ width:400px; height:800px;}.div2{ width:100%; height:0; padding-bottom:100%; background-co...

目前，基于 webkit 内核的浏览器总体市场占用率比较高；特别是在移动端，大部分浏览器都是基于 webkit。

Chrome浏览器将font-size设置为12px以下时无效，字体会默认显示为12px。其他浏览器会正常显示。原因：Chrome浏览器做了如下限制：font-size 有一个最小值 12px（不同操作系统、不同语言可能限制不一样），低于 12px 的，一律按 12px 显示。理由是 Chrome 认为低于 12px 的中文对人类是不友好的。但是允许把 font-size 设置为 0。...

<div class="parentDiv"> <div class="childDiv1"></div> <div class="childDiv2"></div></div>flex弹性布局：.parentDiv{ border:1px solid black; ...

懒加载：在需要的时候才加载图片，延迟加载甚至不加载图片。作用： 延迟请求数或减少请求数，减轻了服务器压力，页面加载速度更快。

CSS 的定位机制有 3 种：文档流（普通流、标准流）、浮动和定位。文档流：一个网页内标签元素按照从上到下、从左到右的顺序排列，块级元素会独占一行，行内元素会按顺序依次前后排列。未脱离文档流，即浏览器按照 dom 结构从上而下，从左而右对页面进行渲染时，某元素按照顺序出现在页面中。脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。脱离文档流的方法：浮动、绝对定位、固定定位。浮动最早用来控制图片，以实现文字环绕图片的效果。

不同浏览器有不同的私有前缀，用来对试验性质的 CSS 属性加以标识。Chrome 浏览器的前缀是-webkit-；Firefox 浏览器的前缀是-moz-；IE、Edge 浏览器的前缀是-ms-；欧朋浏览器的前缀是-o-。

CSS（cascading style sheet）：样式表，又叫层叠样式表、级联样式表。是用来美化网页的语言，用来给 HTML 标签添加样式，实现了将结构与样式的分离。不同浏览器对于小数的处理是不一样的，有的会四舍五入，有的会向下取整，因此设置样式最好不要使用小数。

堆叠顺序属性z-index设置元素的堆叠顺序(设置一个定位元素沿z轴的位置)。属性值是一个没有单位的整数，可以为负数，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。z-index仅能在定位元素上有效。...

代码】CSS实现箭头、三角形、旋转的正方体。

行内元素(图片,文字等):水平居中:div{ text-align:center };// div标签内图片和文字等将水平居中对齐垂直居中:vertical-alignvertical-align属性只对行内元素有效，对块级元素无效！设置display属性为inline-block属性时仍然没有效果，是因为将对象呈递为内联对象，但是对象的内容作为块对象呈递。&amp;amp;lt;div ...

浏览器解析 CSS 的两种模式：标准模式和怪异模式。浏览器解析使用标准模式还是怪异模式，与 DTD 声明直接相关。如果网页代码不含有任何 DTD 声明，那么浏览器就会采用怪异模式解析；如果网页含有 DTD 声明，浏览器就会按照声明的标准解析。

【代码】文本超出显示省略号。

display属性可以设置元素的外部和内部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现（块级或行内元素）；元素的内部显示类型可以控制其子元素的布局（flex、grid等）。行内元素设置上下外边距无效，左右外边距有效。行内元素设置上下内边距，只对自身有效，不会撑开父元素，也不会对周围元素的布局产生任何影响。设置左右内边距有效。但是，标准毕竟只是标准，不规范的写法也是可能通过浏览器认证的。...