注:测试浏览器版本号——chrome 75.0.3770.80;opera 60.0.3255.109;firefox 67.0;ie 11。

接上篇文章,我们继续来讲一些平常可能会用到但是又比较冷门的知识。

一 input提示语句

我们在使用input输入框和textarea输入框时,有时候需要给用户一些提示,比如这个输入框应该填写的内容,有人说提前预设“value”不就可以了吗?如果不是太抠细节,用“value”属性实现也是可以,但是如果使用“value”做提示,用户输入的时候需要先把预设的值删除,然后才能输入。这样做会使用户体验大打折扣。因此我们需要其他的方法来实现,这个时候“placeholder”属性就派上用场啦!“placeholder”翻译过来就是占位符的意思,我们通过给“placeholder”属性赋值来占据位置。

<!-- input提示语句 --><input type=\"text\" placeholder=\"请输入用户名\"><input type=\"text\" value=\"请输入用户名\">

以上面代码为例,我们得到下图的结果,点击第一个输入框,输入提示光标在最左边,输入文字后提示性语句消失;点击第二个输入框,输入提示光标接在“请输入用户名”后面,输入文字其也不会消失,需要我们手动删除。

二 input[type=\"text\"]输入框兼容性

都知道input输入框是能输入一行文字,input内文字始终在content内上下居中。但是这里有个例外,在ie(本例版本为ie11)中,当content的高度<文字的line-height时,文字不上下居中。

以下面代码为例

<input type=\"text\" style=\"width:200px;height:10px;padding: 20px;border: 1px solid #000;line-height: 30px\" placeholder=\"我是test文字\">

得到结果如下图。我们发现在ie中文字会根据自己行高来判断自己的位置。这点在做兼容的时候需要特别注意。

解决方案是设置input的content高度>=line-height。

三 margin重叠

大家一定有过这样的体验,当两个相邻的盒子都有margin时,他们之间的间距有时候会不等于两个盒子的margin之和。为什么会出现这种情况呢?以下面代码为例,box-1和box-2都有外边距且外边距不一样。

/* css样式 */html,body { margin: 0; padding: 0;}.box-1 { margin:40px; border: 1px solid #000; background: skyblue;}.box-2 { margin:20px; border: 1px solid #000; background: skyblue;}.in-1{ display: inline-block; width: 200PX; height: 100px; border: 1px solid red; margin: 20px; background: yellowgreen;}<!-- margin重叠 --><div class=\"box-1\"> <div class=\"in-1\"> 第一个盒子 </div> <div class=\"in-1\"> 第二个盒子 </div></div><div class=\"box-2\"> <div class=\"in-1\"> 第三个盒子 </div> <div class=\"in-1\"> 第四个盒子 </div></div>

得到结果如下图。我们发现:1. 竖直方向box-1和box-2之间的间距为40px(两盒子中较大的margin值)而不是60px(两盒子margin值之和);2. 水平方向第一个盒子和第二个盒子之间的间距为40px(两盒子margin值之和)。

我们得到结论:水平方向两盒子间距=两盒子margin值之和;竖直方向两盒子间距=max(盒子1margin值,盒子2margin值)。

上面的结论真的正确的吗???

我们知道margin还可以取负值,如果按照上面的结论,假设两个盒子的margin值一个是负值,一个是正值,那么他们之间的间距一定是正值的数值。为了验证上述猜测的正确性,我们将上面的例子做以下修改:

将box-1的margin-bottom值改为-40px并将其他边的margin值改为20px;将第二个盒子和第四个盒子的margin-left值改为-20px;将第三个盒子的margin-right值改为-20px;

得到下图的结果。审查元素发现:1. 竖直方向box-1和box-2的间距=-20px;2水平方向不存在规律

再继续修改代码:

将box-2的margin-top值改为-20px;

得到下图的结果。审查元素发现:box-1和box-2的间距=-40px。

综上我们发现竖直方向是有规律的,但是水平方向没有规律,为什么会出现这种情况呢?

查阅W3C规范恍然大悟,里面的结论归纳一下是这样的:

1. 两个相邻的盒子margin值都是正数时,两盒子间距=两盒子较大的margin值

2. 两个相邻的盒子margin值都是负数时,两盒子间距=两盒子较小的margin值

3. 两个相邻的盒子margin值一正一负时,两盒子间距=两盒子margin值之和

注意:根据W3C规范,以上结论有以下前提:

margin必须相邻且是竖直方向相邻;两盒子必须处于普通文档流(normal flow),两盒子父元素必须相同;两盒子必须都是块级元素(不能是inline-block元素);四 字母大小写

有些情况我们需要单词全部显示大写,例如文章大标题,按钮提示词等等,有的时候也需要全部小写。为了避免误输入,我们可以设定当前元素的文本自动转换大小写,具体属性值如下:

<!--注意full-width兼容性很差,一般不使用-->text-transform: none(默认不改变) | capitalize(首字母大写) | uppercase(全部大写) | lowercase(全部小写) | full-width(全宽度);

以下面代码为例。

<p>tEst enGlish</p><p style=\"text-transform: none\">tEst enGlish</p><p style=\"text-transform: capitalize\">tEst enGlish</p><p style=\"text-transform: uppercase\">tEst enGlish</p><p style=\"text-transform: lowercase\">tEst enGlish</p><p style=\"text-transform: full-width\">tEst enGlish</p>

得到结果如下图。

五 各元素默认的盒模型

之前的学习我们了解了标准盒模型(box-sizing=content-box)和怪异盒模型(box-sizing=border-box)两种。两种模型的用途各不相同,没有优劣之分。我们的困惑是为什么有时候设置的width是content的width,而有时候是border+padding+content的width呢?下面我们来讲一讲html常见元素默认的盒模型类型。

方法很简单,利用chrome的调试工具中的“computed”查看元素box-sizing属性的值。在四个实验浏览器检查下面两图中的块级元素和行内元素发现只有selcet元素默认的盒模型是怪异盒模型(box-sizing=border-box),其他元素默认的盒模型均为标准盒模型(box-sizing=content-box)。