格子布局
display: grid;
grid-template-columns: 1fr 1fr;
/* 网格 */
display: grid;
/* 设置列宽 */
grid-template-columns: 200px 200px 200px;
/* 设置间距 */
grid-gap: 20px;
伪类
:after
:before
计算不被撑开
box-sizing: border-box;
边框下划线
border-bottom: 1px solid #898989;
设置圆角
border-radius:50%;
底部阴影
box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 10%);
flex布局
align-items:center; //垂直居中
justify-content:center; //水平居中
justify-content: flex-start;//水平居左
justify-content: space-between; //两端对齐
垂直两端对齐
flex-wrap: wrap;
align-content: space-between;
纵向布局
flex-flow: column;
图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
background-size: cover;
css文字超出显示省略号 ……
//单行的:
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
//多行的:
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
鼠标手势
cursor: pointer; //手型
属性 | 备注 |
---|---|
auto | 标准光标 |
default | 标准箭头 |
pointer, hand | 手形光标 |
crosshair | 十字标 |
wait | 等待光标 |
text | I形光标 |
vertical-text | 水平I形光标 |
no-drop | 不可拖动光标 |
not-allowed | 无效光标 |
help | 帮助光标 |
all-scroll | 三角方向标 |
move | 移动标 |
边框属性
属性 | 备注 |
---|---|
none | 定义无边框。 |
hidden | 与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状 边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
inherit | 规定应该从父元素继承边框样式。 |