CSS tips - 星星眼

1.margin的重叠

属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。

“所有毗邻的两个或多个盒元素的 margin 将会合并为一个 margin 共享。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding 或 Border 分隔。”

所以我们可以在首位元素使用 padding 来替代 margin。当然有的时候使用 padding 不能满足需求，这时你也可以在“非空内容”这个条件做文章。即在父元素添加一个伪元素。

2. 1px在移动端的实现

【使用伪类+transform】

.border_bottom {
overflow: hidden;
position: relative;
border: none!important;
}
.border_bottom:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #d4d6d7;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}

缺点：在一些版本较低的机型也是会出现粗细不均、细线消失断裂的兼容性问题。

【使用box-shadow】

.border_bottom {
box-shadow: inset 0px -1px 1px -1px #d4d6d7;
}

缺点：颜色会变浅

【对 dpr 做了不同的处理】

.min-device-pixel-ratio(@scale2, @scale3) {
@media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
transform: @scale2;
}
@media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
transform: @scale3;
}
}

.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {
&::before {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
border: 1PX @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(.5);
}
@media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(.33);
}
}
}

.border-top-1px(@color: #DDD, @style: solid) {
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
border-top: 1Px @style @color;
transform-origin: 0 0;
.min-device-pixel-ratio(scaleY(.5), scaleY(.33));
}
}

3.box-sizing

给div设置border和padding时，不想影响其width和height，可设置box-sizing:border-box;

可定义如下，从html元素继承

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

优点：不会覆盖其他组件的box-sizing值，又不用为每个元素重复设置。

4.文字超出省略、文字两端对齐

【超出省略】

.line-camp( @clamp:2 ) {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @clamp;
-webkit-box-orient: vertical;
}

问题：-webkit-box-orient: vertical 在使用 webpack 打包的时候这段代码会被删除掉，原因是 optimize-css-assets-webpack-plugin 这个插件的问题。

解决：

.line-camp( @clamp:2 ) {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @clamp;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}

【两端对齐】

// html
<div>姓名</div>
<div>手机号码</div>
<div>账号</div>
<div>密码</div>

// css
div {
margin: 10px 0;
width: 100px;
border: 1px solid red;
text-align: justify;
text-align-last:justify
}
div:after{
content: '';
display: inline-block;
width: 100%;
}

5.使用Mixin归类重复样式

之前我们写 CSS 的时候，也会将一些重复使用的代码放在一个 class 中，这样的确达到了一定的复用性，不过最后的效果可能就是在一个元素里面放了很多 class。

mixin可理解为class的class。把可复用的样式放在 mixin 中，这样接手项目的人只需要熟悉你写的 mixin.less 就可以开始迭代需求了。

.font-description {
.font-des-style(24px,#fff,1.5em);
.line-camp(2);
}

// less
/* 多行显示 */
.line-camp( @clamp:2 ) {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @clamp;
-webkit-box-orient: vertical;
}

.font-des-style( @fontSize, @color, @lineHeight, @textAlign:left ) {
font-size: @fontSize;
color: @color;
line-height: @lineHeight;
text-align: @textAlign;
}

6.合理使用 px | em | rem | % 等单位

在 CSS 中有许多距离单位，比如 px | em | rem | %，还有 CSS3 中的 vh | vw 等单位。

那么我们在项目中应该如何使用呢？我们在 pc 端不需要考虑的这么复杂，所以这里我们主要讲讲这些单位在移动端中的使用。

基础单位 px

px 是我们最早接触到的单位了，不过我们在移动端自适应的要求下，使用的频率不是很高；我总结了以下使用的情况：

比较小的图案

比如需要我们画一个 r 为 5px 的圆，如果我们使用 rem 作为单位，我们很快会发现在一些机型上的图案不圆，会呈现椭圆形。这是由于 rem 转 px 会存在精度丢失问题。

所以这个时候我们就需要使用 px 配合 dpr 来实现：

// less 
/*@size 建议取双数*/
.circle(@size, @backgroundColor) {  
    width: @size;
    height: @size;
    background-color: @backgroundColor;
    [data-dpr="1"] & {
        width: @size * 0.5;
        height: @size * 0.5;
    }
    [data-dpr="3"] & {
        width: @size * 1.5;
        height: @size * 1.5;
    }
}

字体大小（基本都是用 rem 作为单位）

一般情况字体的大小我也会使用 rem 作为单位，因为精度丢失我认为在可以接受的范围之内。

相对单位 rem

rem 是 CSS3 新增的一个相对单位（root em），即相对 HTML 根元素的字体大小的值。

rem 应该是自适应使用的最广泛的单位了。

相对单位 em

em 也是一个相对单位，却是相对于当前对象内文本的字体大小。

line-height

一般建议在 line-height 使用 em。因为在需要调整字体大小的时候，只需修改 font-size 的值，而 line-height 已经设置成了相对行高了。

首行缩进两个字符

在存在首行缩进的需求，我也会使用这个单位。

text-indent: 2em

视口单位 vw | vh

vw: 1vw = 视口宽度的 1%
vh: 1vh = 视口高度的 1%

我们知道以 rem 单位设计的弹性布局，是需要在头部加载一段脚本来进行监听分辨率的变化来动态改变根元素字体大小，使得 CSS 与 JS 耦合了在一起。

那么有没有方案解决这个耦合的问题呢？

答案就是视口单位 vw | vh。

以下就是前人给出的使用方案：

$vm_fontsize: 75;
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

7.flex布局

1.任何元素都可以指定为flex布局

2.设置flex布局后，子元素float、clear和vertical-align属性将失效

flex属性

1.flex-direction

2.flex-wrap

3.flex-flow

4.justify-content

5.align-items

6.align-content

flex子元素属性

1.order

2.flex-grow

3.flex-shrink

4.flex-basis

5.flex

6.align-self

8.水平居中

mairgin: 0 auto;

父元素设置text-algn:center;

9.垂直居中

1）line-height等于hieght/只设line-height

这种方法比较适合文字的居中，其核心是设置行高（line-height）等于包裹他的盒子的高，或者不设高度只设行高，这种适合文字居中且高度固定的场景，使用起来比较方便也比较有用。

//html
<div class="middle">555</div>

//css
.middle{
height: 50px;
line-height: 50px;
background: red;
}

注意：如果是行内元素，因为其没有高度，需先把行内元素转换为行内块或者块元素。

2）vertical-align: middle

这种实现元素的居中需要配合父元素设有等于自身高度的行高，且此元素是行内块元素。只有三个条件都具备，才能实现垂直居中。

//html
<div class="main">
<div class="middle"></div>
</div>

//css
.main {
width: 200px;
height: 300px;
line-height: 300px;
background: #dddddd;
}
.middle{
background: red;
width: 200px;
height: 50px;
display: inline-block;//或者display: inline-table;
vertical-align: middle;
}

注意：需要一个固定的行高，且实现的居中其实是近似居中，并不是真正意义的居中。

3）绝对定位加负外边距

这种方法核心在于先设置需要居中的元素为绝对定位，在设置其top:50%; 加上 margin-top等于负的自身高度的一半来实现居中。好处是实现起来比较方便，且父元素的高度可以为百分比，也不用设行高。

//html
<div class="main">
<div class="middle"></div>
</div>

//css
.main {
width: 60px;
height: 10%;
background: #dddddd;
position: relative;//父元素设为相对定位
}
.middle{
position: absolute;//设为绝对定位
top: 50%;//top值为50%
margin-top: -25%;//设margin-top为元素高度的一半
width: 60px;
height: 50%;
background: red;
}

4）绝对定位加margin:auto

//html
<div class="main">
<div class="middle"></div>
</div>

//css
.main {
width: 60px;
height: 10%;
background: #dddddd;
position: relative;//父元素设为相对定位
}
.middle{
width: 30%;
height: 50%;
position: absolute;//设为绝对定位
top: 0;
bottom: 0;//top、bottom设0即可，
left: 0;//如果left、right也设为0则可实现水平垂直都居中
right: 0;
margin:auto;
background: red;
}

注意：这种方法好处是不止可以实现垂直居中，还可以实现水平居中，坏处是在网络或性能不好的情况下会有盒子不直接定到位的情况，造成用户体验不好。

5）flex布局

flex布局可以很方便的实现垂直与水平居中，好处很多，在移动端使用比较广泛，坏处就是浏览器兼容性不好。

//html
<div class="main">
<div class="middle"></div>
</div>

//css
.main {
width: 60px;
height: 10%;
background: #dddddd;
display: flex;//设为flex
justify-content: center;//水平居中
align-items: center;//垂直居中
}
.middle{
width: 30%;
height: 50%;
background: red;
}

链接：https://juejin.im/post/5cb45a06f265da03474df54e 、https://juejin.im/post/5cdac538518825686c249e34
来源：掘金

posted on 2019-05-15 14:21 星星眼阅读(599) 评论(0) 收藏举报

刷新页面返回顶部