良好的表达能力，或者说写作能力。往往需要很好的逻辑能力。不然就是往往写了一大堆东西，别人也不知道你要表达什么东西，扫了两眼也就不往下看了。如何提高这种逻辑能力，最好的训练方式就是采用问答的方式：
（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分
网友评论