来源: 吾推网
发布时间: 2022-07-14
次浏览
文本边框
border-radius:2px solid #a1a1a1;
box-shadow: 10px 10px 5px #888888; // 水平阴影,垂直阴影,模糊的距离,以及阴影的颜色
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); // 可以通过逗号一直叠加
text-shadow: 5px 5px 5px #FF0000;
text-emphasis: filled red; // 文字头上标点
text-overflow:ellipsis; // 文字溢出...,配合white-space: nowrap;overflow: hidden;使用
word-break: break-all; // 允许在单词内换行 keep-all 只能在半角空格或连字符处换行
word-wrap: break-word; // 在长单词或 URL 地址内部进行换行
border-image:url(border.png) 30 30 round;
border-radius: 15px 50px 30px;
outline:2px solid red;
outline-offset:15px; // 轮廓框架在 border 边缘外的偏移,类似于在边框外再复制了一边框
pointer-events: none; // 默认值为auto,元素不能对鼠标事件做出反应,生成水印时可以用到。
背景
background-origin:border-box; // 背景图片在border边框上
background-origin:padding-box;// 背景图片在padding值上
background-origin:content-box; // 背景图片在content内容上
backface-visibility:visible|hidden; // 当元素背面向屏幕时是否可见
属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。可以指定一些特定形状
img {
clip-path: circle(50%);
}
内容区域
box-sizing: content-box // 默认(boder和padding会往内容区域外增加)
box-sizing:border-box // boder和padding在内容区域内增加,占用内容区域宽高
box-sizing:inherit 指定 box-sizing 属性的值,应该从父元素继承
resize:both; // 指定一个元素是否是由用户调整大小的 horizontal 调整宽度 vertical 调整高度
弹性盒子
display: flex;
属性指定了弹性子元素在父容器中的位置
flex-direction:row // 横向从左到右排列(左对齐),默认的排列方式
flex-direction:row-reverse // 反转横向排列(右对齐,从后往前排,最后一项排在最前面
flex-direction:column // 纵向排列
flex-direction:column-reverse // 反转纵向排列,从后往前排,最后一项排在最上面
作用:设置同一行子元素在X轴(相对于Y轴)的对齐方式
justify-content: flex-start // 默认 弹性项目向行头紧挨着填充
justify-content: flex-end // 弹性项目向行尾紧挨着填充
justify-content: center // 弹性项目居中紧挨着填充(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)
justify-content: space-between // 间距相等排列,两边不留白
justify-content: space-around // 间距相等排列,两边留白等于间距的一半
作用:设置同一列子元素在Y轴的对齐方式
align-content: flex-start // 排列在当前列的最上方
align-content: flex-end // 排列在当前列的最下方
align-content: center // 排列在当前列的中间位置
align-content: space-between // 间距相等排列,上下不留白
align-content: space-around // 间距相等排列,上下留白等于间距的一半
作用:设置同一行子元素在Y轴(相对于X轴)的对齐方式
align-items: flex-start // 排列在当前行的最上方
align-items: flex-end // 排列在当前行的最下方
align-items: center // 排列在当前行的中间位置
align-items: stretch // 当子元素没有设置高度或为auto,将占满整个容器的高度
align-items: baseline // 以子元素第一行文字的基线对齐
参考:https://blog.csdn.net/qq_44329870/article/details/109832392




多媒体查询语法
@media not|only mediatype and (expressions) {
CSS 代码...;
}
// 在屏幕可视窗口尺寸小于 480 像素的设备上背景为浅绿色
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
// 在屏幕可视窗口尺寸大于 480 像素的设备上背景为蓝色
@media screen and (min-width: 480px) {
body {
background-color: blue;
}
}
// 当浏览器的宽度在 520 到 699px时背景为白色
@media screen and (max-width: 699px) and (min-width: 520px) {
body {
background-color: white;
}
}
// 当浏览器的宽度在 520 到 699px或大于1151px时背景为黑色
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
body {
background-color: black;
}
}
多列属性
column-count // 指定了需要分割的列数
column-gap // 指定了列与列间的间隙
column-rule-style: none | hidden| dotted | dashed | solid | double | groove | ridge | inset | outset // 指定了列与列间的边框样式
column-rule-width // 指定了两列的边框厚度
column-rule-color // 指定两列间边框的颜色
column-rule // 简写 column-rule:3px outset #ff00ff;
column-span: 1 | all // 元素要跨越多少列
column-width // 列的宽度
columns: 100px 3 // column-width 与 column-count 的简写属性
网格布局
display: grid; // grid容器保持块状特性,宽度默认100%,不和内联元素一行显示
display: inline-grid; // inline-grid容器为inline特性,因此可以和图片文字一行显示
grid-template-columns 和 grid-template-rows:分别决定了网格的每列的列宽和行高
grid-template-rows: 100px 100px; // 两行
grid-template-columns: 100px 100px 100px; // 三列
repeat() :针对需重复进行赋值的场景,可利用repeat函数简化; – 函数接受两个参数,第一个参数是重复的次数(上例是3),第二个参数是所要重复的值
grid-template-rows: repeat(2, 100px);
grid-template-rows: repeat(3, 100px 200px 300px);
grid-template-columns: 1fr 2fr 1fr; // 1fr为一等分
grid-column-gap // 列间距
grid-row-gap // 行间距
grid-gap // grid-row-gap 和 the grid-column-gap 属性的简写
// 网格子元素从第一行开始,第三行结束,相当于夸两行(rowspan=2)
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
// 网格子元素从第一列开始,第三列结束,相当于夸两列
.item2 {
grid-column-start: 1;
grid-column-end: 3;
}
grid-template-areas // 指定如何显示行和列,使用命名的网格元素(相当于复用某网格的属性)
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}

