技师学院18网络研修课程-常用CSS样式属性

最新推荐文章于 2024-08-18 16:06:40 发布

不吃鱼的猫船长

最新推荐文章于 2024-08-18 16:06:40 发布

阅读量195

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/ay091431/article/details/130002269

版权

本文介绍了CSS中的格子布局(grid)和弹性布局(flex)，包括列宽设置、间距调整以及对齐方式。同时，讨论了伪类选择器(:before,:after)，边框样式，如圆角和阴影效果，以及文字超出显示省略号的方法。此外，还涵盖了鼠标手势的cursor属性和不同边框样式的选择。

摘要由CSDN通过智能技术生成

格子布局

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	规定应该从父元素继承边框样式。