如何实现小于 12px 的字
display:inline-block; /*scale只能缩放行内块或块元素*/
-webkit-transform: scale(0.5); /*定义2D缩放*/
-webkit-transform-origin:left top; /*定义缩放源点为左上角*/
0.5px 的线如何实现
问题：
.hr.half-px {
height: 0.5px;
}
// 不同设备，不同浏览器差异较大
解决：
方案1：
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%; /*为了防止线模糊*/
}
方案2：
利用svg解决。优点，可以利用svg画出各种图形的0.5px线条
.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是图片
<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
.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 - 通过子元素相对父元素绝对定位，子绝父相
子：left:50%; margin-left: -子宽一半
子: left:50%; transform:translateX(-50%)
- 弹性布局
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 给父元素设置
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。 -
利用绝对定位，让子元素相对于相对于父元素绝对定位，子绝父相
子：top:50%; margin-top: -子高一半
子: top:50%; transform:translateY(-50%)
- 利用 flexbox 给父元素设置
display: flex;
flex-direction: column;
justify-content: center;
总结：垂直和水平方向同时居中
利用定位
- 子绝父相
已知子元素宽高度：
top:50%; left:50%; margin-left:-子宽一半; margin-top:-子高一半
- 未知子元素高度
top:50%; left:50%; transform:translate(-50%, -50%)
- 弹性布局
.son{
display: flex;
justify-content: center;
align-items: center;
}
正三角形
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
效果图：
下三角
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
效果图：
左三角
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
效果图：
右三角
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
效果图：
左上三角
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
效果图：
右上三角
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
效果图：
右下三角
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
效果图：
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
