box-sizing,input标签高亮显示,placeholder

1丶box-sizing

(建议把border-sizing设置为border-box)

---

官方定义

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

值	说明
content-box	这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算
inherit	指定box-sizing属性的值，应该从父元素继承

我的理解

(图片来自https://blog.csdn.net/huangpin815/article/details/76651680)

---

---

2丶取消被选中后的高亮显示

---

/*下面两行改变input被选中后的样式*/
    outline: none;
    -webkit-tap-highlight-color: rgb(0,0,0);

 

outline outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 注释：轮廓线不会占据空间，也不一定是矩形。 outline 简写属性在一个声明中设置所有的轮廓属性。 可以按顺序设置如下属性： outline-color outline-style outline-width 如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。   (实例:http://www.w3school.com.cn/tiy/t.asp?f=csse_outline)

-webkit-tap-highlight-color 概述： -webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。 该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。 语法： -webkit-tap-highlight-color：color 默认值： inherit 适用于：链接元素比如新窗口打开，img元素比如保存图像等等 取值： color： 颜色值 transparent： 透明值 * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新 兼容性： iOS 1.1.1及更高版本的Safari浏览器可用 大部分android手机也是支持的，只是显示效果有所不同。

---

---

3丶placeholder(提示信息)样式设计

---

     placeholder

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 类型：text, search, url, telephone, email 以及 password。

语法: 

    placeholder的样式设计

要设置placeholder的样式,其语法为

/*这里的input即你想设置的标签的class名*/
input:: placeholder {
    font-size: 20px;
    font-color: red;
}