页面开发整理

CSS

1、样式属性

·border-radius:12px; 圆角12px

·letter-spacing:1px; 字体间距1px

·opacity:0.85; 透明度0.85

·outline:none; input边框为空

·white-space: nowrap;   处理元素内部空白属性 

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

·box-shadow:3px 3px 10px #888888; 阴影效果，元素背景x轴移动 y轴移动 模糊程度 颜色

·display:inline-block;  div元素内的div横向展示不需要float，子div可用display:inline-block; 在一行内展示，父div使用white-space: nowrap;处理空白，

然后使用横向滚动overflow-x:auto;overflow-y:hidden;

• ::-webkit-scrollbar 滚动条整体部分
• ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
• ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
• ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

 

display的值及解释：

block: 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
none: 隐藏对象。与   visibility   属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline: 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block: 将对象呈递为内联对象，但是对象的内容作为块对象，旁边的内联对象会被呈递在同一行内
compact: 分配对象为块对象或基于内容之上的内联对象
marker: 指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before伪元素一起使用
inline-table: 将表格显示为无前后换行的内联对象或内联容器
list-item :将块对象指定为列表项目。并可以添加可选项目标志
table-caption: 将对象作为表格标题显示
table-cell: 将对象作为表格单元格显示
table-column: 将对象作为表格列显示
table-column-group: 将对象作为表格列组显示
table-header-group: 将对象作为表格标题组显示
table-footer-group: 将对象作为表格脚注组显示

 

 

2、