常见的 CSS 问题大杂烩

如何实现小于 12px 的字

css 复制代码

display:inline-block; /*scale只能缩放行内块或块元素*/
-webkit-transform: scale(0.5);  /*定义2D缩放*/
-webkit-transform-origin:left top; /*定义缩放源点为左上角*/

0.5px 的线如何实现

问题：

css 复制代码

.hr.half-px {
    height: 0.5px;
}
// 不同设备，不同浏览器差异较大

解决： 方案1：

css 复制代码

.hr.scale-half {
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 50% 100%; /*为了防止线模糊*/
}

方案2：利用svg解决。优点，可以利用svg画出各种图形的0.5px线条

css 复制代码

.hr.svg {
    background: none;
    height: 1px;
    background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
}

其中：svg是图片

html 复制代码

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
    <line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line>
</svg>
/**
使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width="1"，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，另外还可以使用svg的rect等元素进行绘制。
*/

注意 svg 在 firefox 有问题 解决方案如下：把svg转成base64

css 复制代码

.hr.svg {
    background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}

水平居中

前提：

父元素必须是块级盒子容器，不可自由嵌套的元素就是里面只能放内联元素的，他们包括有：标题标记<h1> 到 <h6> <caption>; 段落标记的<p>;分割线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。
父元素宽度必须已经被设定好。

场景1：

子元素是块级元素且宽度没有设定，不存在水平居中一说，因为子元素是块级元素没有设定宽度，那么他会充满整个父级元素的宽度，即在水平位置上宽度和父元素一致。

场景2： 子元素是行内元素，子元素宽度是由其内容撑开的，这种情况下解决方案是给父元素设定text-align:center。

场景3： 子元素是块级元素且宽度已经设定

给子元素添加 margin:0 auto;
通过计算指定父元素的 padding-left 和 padding-right，给父元素和子元素都设定box-sizing:border-box,计算：(父宽-子宽)/2
计算得到子元素的 margin-left 和 margin-right，给父元素和子元素都设定box-sizing:border-box,计算：(父宽-子宽)/2
通过子元素相对父元素绝对定位，子绝父相

css 复制代码

子：left:50%; margin-left: -子宽一半

子: left:50%;  transform:translateX(-50%)

弹性布局

css 复制代码

display:flex;
flex-direction: row;
justify-content: center;

垂直居中

前提： 父元素是盒子容器

场景1： 子元素是行内元素，高度是由其内容撑开的。

单行：设定父元素的line-height为其高度来使得子元素垂直居中。
多行：通过给父元素设定display:inline/inline-block/table-cell;vertical-align:middle来解决。

场景2： 子元素是块级元素但是子元素高度没有设定

通过给父元素设定display:inline/inline-block/table-cell;vertical-align:middle来解决。

flexbox 给父元素设置

css 复制代码

display: flex;
flex-direction: column;
justify-content: center;

场景3： 子元素是块级元素且高度已经设定

计算子元素的margin-top或margin-bottom 给父元素和子元素都设定box-sizing:border-box,计算：(父高-子高)/2。
计算父元素的padding-top或padding-bottom 给父元素和子元素都设定box-sizing:border-box,计算：(父高-子高)/2。
利用绝对定位，让子元素相对于相对于父元素绝对定位，子绝父相

css 复制代码

子：top:50%; margin-top: -子高一半

子: top:50%;  transform:translateY(-50%)

利用 flexbox 给父元素设置

css 复制代码

display: flex;
flex-direction: column;
justify-content: center;

总结：垂直和水平方向同时居中

利用定位

子绝父相已知子元素宽高度：

css 复制代码

top:50%; left:50%; margin-left:-子宽一半; margin-top:-子高一半

未知子元素高度

css 复制代码

top:50%; left:50%; transform:translate(-50%, -50%)

弹性布局

css 复制代码

.son{
	display: flex;
	justify-content: center;
	align-items: center;
 }

正三角形

css 复制代码

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

效果图：

下三角

css 复制代码

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

效果图：

左三角

css 复制代码

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

效果图：

右三角

css 复制代码

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

效果图：

左上三角

css 复制代码

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

效果图：

右上三角

css 复制代码

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
  }

效果图：

右下三角

css 复制代码

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

效果图：

点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

往期热门精彩推荐

面试相关热门推荐

前端万字面经------基础篇

前端万字面积------进阶篇

实战开发相关推荐

前端常用的几种加密方法

探索Web Worker在Web开发中的应用

不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化

【实战篇】微信小程序开发指南和优化实践

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM

移动端相关推荐

移动端横竖屏适配与刘海适配

移动端常见问题汇总

聊一聊移动端适配

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

更多精彩详见：个人主页