常见的 CSS 问题大杂烩

如何实现小于 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： 子元素是行内元素，高度是由其内容撑开的。

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

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

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

2. flexbox 给父元素设置

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

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

1. 计算子元素的margin-top或margin-bottom 给父元素和子元素都设定box-sizing:border-box,计算：(父高-子高)/2。

2. 计算父元素的padding-top或padding-bottom 给父元素和子元素都设定box-sizing:border-box,计算：(父高-子高)/2。

3. 利用绝对定位，让子元素相对于相对于父元素绝对定位，子绝父相

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

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

1. 利用 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;
}

效果图：

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

往期热门精彩推荐

面试相关热门推荐

实战开发相关推荐

移动端相关推荐

Git 相关推荐