总结一下在工作用常用到的属性设置 1.设置文本的可选择性 -webkit-user-select:none/text 2.设置背景的绘制区域 background-clip:border-box/padding-box/content-box 3.使元素看起来像标准的button -webkit-a ...
分类:
Web程序 时间:
2018-05-04 18:35:46
阅读次数:
188
半透明边框 实现效果: 实现代码: 实现要点: 设置边框为半透明,这是还看不到半透明边框,因为默认情况下,背景会延伸到边框所在的区域下层,也就是背景是被边框的外沿框裁切掉。 通过设置 (初始值是 border box) 让背景不要延伸到边框所在的区域下层,也就是让内边距的外沿来裁切背景。 多重边框 ...
分类:
Web程序 时间:
2018-05-04 01:43:43
阅读次数:
279
盒子模型 1.盒子(box)模型 内容(content)、填充(padding)、边框(border)、边界(margin) 2.不同部分的说明 Content(内容):盒子中的内容,显示文本或图片 Padding(内边距):清除内容周围的区域,内边距的透明度 Border(边框):围绕在外边距和内 ...
分类:
其他好文 时间:
2018-05-04 01:31:25
阅读次数:
154
box-sizing,这个属性可以定义元素盒子的解析方式,从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。//设置border-box让border和padding不在额外增加元素大小aside{width:200px;height:500px;background-color:purple;padding:10px;border:5pxsolidred;box-sizing:bor
分类:
其他好文 时间:
2018-05-01 23:20:28
阅读次数:
225
box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box、border-box、inherit。 其中inherit表示box-sizing的值应该从父元素继承。 content-box和border-box的主要区别就是元素的width ...
分类:
Web程序 时间:
2018-04-26 18:18:54
阅读次数:
158
子盒子 边框盒 由border、padding、content组成,是检查器默认显示的尺寸。 背景颜色覆盖默认覆盖边框盒,可通过background-clip属性修改 background-clip:border-box; 覆盖边框盒 background-clip:padding-box; 覆盖填 ...
分类:
Web程序 时间:
2018-04-22 21:48:32
阅读次数:
455
盒模型只是补充 子盒子 边框盒(border-box)由border,padding,content组成 浏览器调试时,在页面中显示的元素尺寸是指边框盒的尺寸 元素的背景默认覆盖边框盒,可通过background-clip属性修改 填充盒(padding-box)由padding,content组成 ...
分类:
其他好文 时间:
2018-04-21 14:31:54
阅读次数:
169
百分比布局,也叫做流式布局;清除移动端默认的点击高亮效果:-webkit-tap-highlight-color:transparent;base.css:*,::before,::after{ padding:0; margin:0; -webkit-box-sizing:border-box; ...
分类:
移动开发 时间:
2018-04-19 11:58:01
阅读次数:
186
box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box、border-box、inherit。 其中inherit表示box-sizing的值应该从父元素继承。 content-box和border-box的主要区别就是元素的width ...
分类:
Web程序 时间:
2018-04-18 22:30:05
阅读次数:
970
*,::after,::before{ margin: 0; padding: 0; /*盒子模型*/ box-sizing: border-box; -webkit-box-sizing: border-box; /*字体*/ font-family: '微软雅黑', sans-serif; /* ...
分类:
其他好文 时间:
2018-04-16 19:27:04
阅读次数:
175