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>被选中后的高亮显示
/*下面两行改变input被选中后的样式*/
outline: none;
-webkit-tap-highlight-color: rgb(0,0,0);
outlineoutline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 注释:轮廓线不会占据空间,也不一定是矩形。 outline 简写属性在一个声明中设置所有的轮廓属性。 可以按顺序设置如下属性:
如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。
|
-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新增属性可能存在描述错误及变更,仅供参考,持续更新 兼容性:
|
3丶placeholder(提示信息)样式设计
placeholder
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。
语法:
<input placeholder="我爱学习css">
placeholder的样式设计
要设置placeholder的样式,其语法为
/*这里的input即你想设置的<input>标签的class名*/
input:: placeholder {
font-size: 20px;
font-color: red;
}