前端爱好者学习周刊：第 2 期

2018-12-21

html

css

js

• 前端爱好者学习周刊：第 2 期
  • 1. CSS 如何实现文字两端对齐
  • 2. css3 的 column 多列布局
• 3. css3 resize

1. CSS 如何实现文字两端对齐

左边的效果，一般我在昵称中间补充 

<label>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</label>：<input type="text" style = 'width: 100px'><br><br>
<label>电子邮箱</label>：<input type="email" style = 'width: 100px;'>

事实上这样比较麻烦；

使用text-align:justify;

<div class="demo">
	<label>昵称</label>：<input type="text" style="width: 100px" /><br /><br />
	<label>电子邮箱</label>：<input type="email" style="width: 100px;" />
</div>

input {
	width: 100px;
}
label {
	width: 100px;
	height: 23px;
	border: 1px solid red;
	text-align: justify;
	float: left;
}
label:after {
	display: inline-block;
	content: '';
	overflow: hidden;
	height: 0;
	width: 100%;
}

此处需要说明的是：

• border:1px solid red;：只是为了查看效果，当不写 height 的时候，其 label 其实产生的是两行的效果，此时由于 border 的占位，错开了；当删掉 border，仍然不写 height，此时就是两行的效果，label 高度为 46px；

• 而我们最好设置 height 为 label 一行文本的高度：height:23px;,此时加不加 border 都不会影响。

• float: left;这句必须加

• width:100%;可以替换为padding-left:100%，一样的效果

参考：

• 小技巧|CSS 如何实现文字两端对齐 (opens new window)
• text-align:justify 的使用 (opens new window)

2. css3 的 column 多列布局

支持 IE10+和其他浏览器

考虑到移动端以及可能一些用户浏览器升级不及时的现状，因此，-webkit-以及-moz-前缀目前还不能省略

• column-width: 每栏的宽度；
• column-count: 最理想的分栏数目，注意这里的措辞，是“理想的”，这个词很微妙的，大家可以多多体会下；
• column-gap: 栏目之间的水平间隙；
• column-rule: 分割线，形式规则什么的等同于 border，column-rule 实际上是一个缩写，还有 column-rule-width，column-rule-style，column-rule-color 之类，就跟 border 属性一个套路；
• column-fill: 效果不明，不算常用。默认值是 balance，表示对每栏进行协调。还可以使用值 auto，表示每一栏按顺序填充。

实现 demo：

• 翻页
• 瀑布流

  通过右下角拖动可缩放 div 宽度，来看到列数的变化

参考： 基于 CSS3 column 多栏布局实现水平滑页翻页交互 (opens new window)

3. css3 resize

resize: none|both|horizontal|vertical;

• none 用户无法调整元素的尺寸。
• both 用户可调整元素的高度和宽度。
• horizontal 用户可调整元素的宽度。
• vertical 用户可调整元素的高度。

最新 chrome 支持