如何实现小于 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 给父元素设置
cssdisplay: 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;
}效果图：
点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。
往期热门精彩推荐
面试相关热门推荐
实战开发相关推荐
移动端相关推荐
Git 相关推荐
更多精彩详见：个人主页