flexbox布局，媒体查询自适应屏幕大小，box-sizing-The idle Process

flexbox布局，媒体查询自适应屏幕大小，box-sizing

box-sizing的用途：防止盒子被撑大。

假设有个块元素，width和height都是200px，如果这个块元素的border是1px，那么这个时候块元素的实际宽高就是202px；假设块元素设置padding属性为1px，那么这个时候块元素的实际宽高就是204px。所以，块元素的padding和border实际都会撑大这个盒子。

要让盒子保持原来的尺寸，不受border和padding的影响的话，可以在css中加这么一句话：

* {

box-sizing: border-box;

}

box-sizing更改默认的计算元素宽高属性值。更改为border-box后，width=content+border+padding

媒体查询自适应屏幕大小

不同的设备浏览器大小是不同的，媒体查询就是查询窗口大小动态的显示或者调整元素。

@media (min/max-width: px)

{

元素 {

width: px;

height: px;

}

@media (prefers-reduced-motion:no-preference){* {
  scroll-behavior: smooth;
}}

flexbox布局

弹性布局方式，与常规的流式或块式布局不同。items 将会在主轴 (main axis) 或者在交叉轴(cross axis) 排版。

display: flex

Comments

We may be able to produce plastic with carbon dioxide someday

Due to the overuse of humans, there are now about 8 billion tons of plastic waste piled up on the surface and in the ocean. It is no wonder that plastics have been in poor reputation in recent years. But the importance of plastic is also unquestionable. The invention of plastic revolutionized life in the 20th century. It is durable, versatile, and hygienic. Such materials are almost non-existent in nature. If there is no plastic, we will never create records, tapes, film, etc. Naturally, we will not be able to record music, film, or develop modern medicine. Auto parts, light aircraft materials, satellites and spacecraft also rely on plastics, and global travel and space exploration are possible, not to mention computers, mobile phones and a wide range of networking technologies. Look around, if there is no plastic, our life will be difficult. Despite the importance of plastics, the disposal of plastics has always been a tricky issue. Not only that, but the source of plastic is...

布谷

作者：亚莱克斯　　1 　　1月的清晨6点钟，风中的布赖顿海滨灰蒙蒙的，又湿又冷。可对凯茨·弗拉德来说，却再也找不出比这里更好的地方了。昨天的小警员，今天成了警探，什么也阻挡不了她。　　凯茨身穿着比基尼短裤坐在台阶上，早餐之前她要完成4英里快速跑。想到这里，她迅速套上短袜、护膝，穿上艳丽的健身衣，两脚伸进运动鞋里。下楼出门前，她顺手抓起一副白色棉质运动手套，毕竟冬天到了。　　凯茨的公寓在一条巷子里，门前是一段平缓的下坡路。此时，她迈着舞步一般轻松的步子朝海边慢步走去。刚出门的时候，冷风吹在脸上还微微有些疼。没过多久，风就让人振奋起来，在她脸上吹出了红晕。长期锻炼的凯茨称不上胸部丰满，今天她就没穿胸衣。现在她越跑越热，只觉得毛孔发汗。不一会儿，人就觉不到什么寒意了。活动开了，她准备做二英里快速跑。今天她感觉不错，未来终于在眼前渐渐显出轮廓。大学毕业6年了，她的目标就是像今天这样拥有一份体面的工作，保持健康独立，工作得心应手，而且还能不断得到提升。　　她向东往海豚馆的方向跑去，经过海豚馆的时候加快了脚步。为了练力量，周二和周四凯茨都在海滩上跑步。今天是星期一，她要在速度上跟自己较量一番。远处房顶上显出微红的曙光，黄色的街灯渐渐暗淡了下去。　　路上渐渐有了几辆车，它们在沾满露水的路上缓缓行驶着。凯茨到了海豚馆，穿过马路沿着缓坡费力地往上跑，几乎没有注意到身边的车辆。一辆巡逻车缓缓驶来，司机按了一下喇叭，和她并肩行驶。凯茨跑完了全程，才回过头注意到这辆车。司机哈里干警察这一行已经有十个年头了，现在正是发胖的年纪。　　“早晨好。”凯茨上气不接下气地说道。　　“这身衣服挺合身嘛。” 　　“别逗了，忙你的正事去吧。”凯茨朝他笑了笑。　　“对了，是不是该称弗拉德警探，现在您是高我们一头了。” 　　“哈里，你也会有这么一天的。” 　　警车里的对讲机响了起来，哈里咧嘴一笑；“行了，不管怎么样，好好干吧。”他一边对着对讲机回话，一边来了个大转弯，回头向城里驶去。　　“对，好好干，”凯茨在心里对自己说：“新人要做出个样子来。” 　　她慢跑到终点，心不在焉地伸了伸四肢，然后穿过马路朝自家走去。　　隔壁莱蒂斯夫人穿着晨衣，正到门口取牛奶。凯茨心里哼着摇滚，脚下迈着舞步，跳着向老人过去。　　“早晨好，夫人。天气不错啊。” 　　“我可不这么看，太冷了，简直出不了门。” 　　“多...

《菊与刀》――解读日本人

第一章任务―研究日本由在美国曾经全力以赴与之战斗的敌人中，日本人的脾气是最琢磨不透的。这个强大对手，其行动和思维习惯竞与我们如此迥然不同，以至我们必须认真加以对待，这种情况在其他战争中是没有的。我们正如前此1905年的沙俄一样，作战的对手是一个不属于西方文化传统、而又充分武装和经过训练的民族。西方国家所公认的那些基于人性的战争惯例，对日本人显然是不存在的。这就使得太平洋上的战争不仅是一系列岛屿登陆作战和困难卓绝的后勤工作问题，从而使了解"敌性"成为一个主要问题。为了与之对抗，我们就必须了解他们的行动。困难是巨大的。自从日本锁国的大门被打开以来的七十五年间，对日本人的描述总是使用一系列令人极为迷惑的"但是，又……"之类的词句，远非对世界其他民族的描述可比。一个严肃的观察家在论及其他非日本民族时，是不大会既说他们彬彬有礼，又加上一句说："但是，他们又很蛮横、倔傲。"他也不会既说该民族无比顽固，又说："但是，他们又极易适应激烈的革新"；也不会既说该民族性格温顺，又说他们不轻易服从上级的控制；也不会既说他们忠诚、宽厚，又宣称："但是他们又心存叛逆，满腹怨恨"；也不会既说他们勇敢成性，又描述他们如何怯懦；也不会既说他们的行动完全出自考虑别人的评价，即自己的面子，又说他们具有真诚的善良倾慕西方文化，又渲染他们顽固的保守主义。他不会既写一本书讲这个民族如何普遍爱美，如何对演员和艺术家给予崇高荣誉，如何醉心于菊花栽培，又另外写一本书来补充说，该民族崇尚刀剑和武土的无尚荣誉。然而，所有上述这些矛盾却成为有关日本论著中纵横交织的经纬。而且，都是千真万确。刀与菊，两者都是一幅绘画的组成部分。日本人生性极其好斗而又非常温和；黩武而又爱美；倔傲自尊而又彬彬有礼；顽梗不化而又柔弱善变；驯服而又不愿受人摆布；忠贞而又易于叛变；勇敢而又懦怯；保守而又十分欢迎新的生活方式。他们十分介意别人对自己的行为的观感，但当别人对其劣迹毫无所知时，又会被罪恶所征服。他们的军队受到彻底的训练，却又具有反抗性。了解日本既已成为美国的当务之急，我们就不能对这些矛盾以及其他许多同样令人烦躁的矛盾置之不理了。严重的事态接二连三地出现在我们面前。日本人下一步将采取什么行动？能否不进攻日本本土而获致投降？我们是否应该...

The idle Process

Search This Blog