好用的——问答体

良好的表达能力,或者说写作能力。往往需要很好的逻辑能力。不然就是往往写了一大堆东西,别人也不知道你要表达什么东西,扫了两眼也就不往下看了。如何提高这种逻辑能力,最好的训练方式就是采用问答的方式:

(1)拆分。 内容尽量拆分成一系列简短而明确的小观点,粒度要细到每个观点都可以让人快速地、一目了然地领会。
(2)反复。 开头的几点用来吸引读者的注意力,然后进入核心部分时,采用各种形式反复展示,就是翻来覆去地讲,力求给人留下深刻印象。

只要用好这两个小技巧,一定可以取得不错的效果。你一点一点地展示,让别人跟得上你。即使他们没有跟你一直走到底,只看了一半,也好于一点没看进去。

00、如何注册谷歌账号

第一步:要能访问谷歌邮箱网址:https://mail.google.com/
第二步:如何你被墙了,也就是打不开gmail网址,可以试试谷歌访问助手插件:https://chrome.zzzmh.cn/info?token=gocklaboggjfkolaknpbhddbaopcepfp
第三步:填写注册资料
第四步:不出意外注册谷歌账户最后一步验证账户输入手机号,会显示此电话号码无法用于进行验证。如果有遇见此问题,请看第五步,没有请跳过直接注册成功。
第五步:把浏览器的默认语言改成英文,在走一遍注册流程。这时手机验证码会下发成功。例如我的:

G-137043 is your Google verification code.[INFO]

最后顺利喜提谷歌邮箱,赶紧绑定QQ邮箱。

01、前端如何使用margin做水平垂直居中

margin水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,div{
            height: 100%;
            background-color: red;
        }
        p{
            width: 200px;height: 200px;
            background-color: currentColor;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

大多数前端都知道盒子水平居中的代码为:

margin-left: auto;
margin-right:auto;

为什么设置如上代码能让盒子水平居中,原因就是盒子的流体特性,水平方向盒子宽默认为width:auto; 自动填充满父盒子。虽然垂直方向height 的值也是 auto ,但是因为没有流体特性,auto,也就意味着为 0,所以设置:

margin-top: auto;
margin-bottom: auto;

无效,我们平时也就只能做做水平居中,当然我们可以改变流的方向,让盒子垂直方向支持 auto,水平方向失效,做到只能垂直不能水平居中。只需要给 div 这样设置:

div{
    writing-mode: vertical-lr;
}
水平居中失效,垂直居中有效

一般前端都是做水平垂直居中的效果,随意如上的办法是不可取的,接下里就思考如何让垂直方向的 auto ,有高度这样水平方向上的 margin 就能奏效了。很显然绝对定位的元素有这个功能。完。

02、通栏的banner图适配不同的屏幕

通栏的banner图适配不同的屏幕

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通栏的banner图适配不同的屏幕</title>
    <style>
        *{margin:0;padding:0;}
        .banner{
            height: 254px;
            background-image: url(./banner.jpg);
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="banner"></div>
</body>
</html>

我们再写这种通栏的banner图,最常用的办法就是给banner定高,但是定高有个很大的问题就是分辨率低的小屏幕看,会造成banner图下面的部分没有大屏的显示的内容多。虽然影响不是很大,但是看着有点别扭。这时可以利用 padding 的百分比是相对宽度的来完成自适应布局:

/*height: 254px;*/
padding: 8% 50%;

就改动了一句,还是很划算的。

03、使用border模拟出三道杠

三道杠,常见于移动端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三道杠</title>
    <style>
        *{margin:0;padding:0;}
        div{
            margin: 100px auto;
            width: 30px;height: 5px;
            border-top: 15px double;
            border-bottom: 5px solid;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

首先的学习下 border-style:double:双线边框,顾名思义,即两根线且为实线。虽然平常我们使用少,但
是其兼容性非常好。视觉表现为线框——透明线框,根据border-width大小不同,其表现规则如表所示。

当边框宽度是1px和2px的时候,其表现和border-style:solid是一模一样的:当边框为3px的时候,才开始有双线边框的表现,包括retina屏幕也是如此,因为边框宽度是没有半像素的概念的。还记不记得上一节留下的问题,“为什么border-width的默认值是media(3px)?”答案就在这里,虽然说实际开发的时候1px大小的solid类型边框是最常用的,但是却无法让double类型边框有合乎语义的表现,因此使用了能表现double类型的最小边框宽度3px作为边框宽度默认值。

2020年3月13日22点53分