文章目录
- 让文字或div水平垂直居中
- 溢出文本不换行显示省略号
- 线性渐变
- 改变text框中placeholder属性样式
- 让文字垂直居中
- 动画过渡
- 内容相对父标签居中
- 圆角边框和阴影
- 页面背景不平铺并且根据窗口调整尺寸
- 页面背景不平铺,且固定,不改变图片大小
- 让内容根据父容器容量布局,不要改变父容器尺寸,溢出内容直接隐藏
- 清除提示框(点击就出现个框框,清除掉)
- 形状变换
- 设置高斯模糊
- 文本域不可调节大小
- 控制鼠标指针样式
- 给div加滚动条
- 修饰滚动条
- 文本自动换行
- 隐藏原标签,使用定位标签lable为其设置样式
- 元素在主轴(页面)上居中排列
- 设置段落尺寸(最小高度等)
- 转换元素行,块性质
- 移除默认样式
- 让标签不可选中
- 让文本不可选中
让文字或div水平垂直居中
/* flex 布局 */
display: flex;
/* 实现垂直居中 */
align-items: center;
/*实现水平居中*/
justify-content: center;
溢出文本不换行显示省略号
/* 溢出文字开启省略号显示 */
white-space: nowrap;/*关闭自动换行*/
text-overflow: ellipsis;/*文字溢出内容处理为省略号*/
overflow: hidden;/* 通过设置overflow 开启BFC */
线性渐变
/*从左向右渐变*/
background-image: linear-gradient(to right, red , yellow);
改变text框中placeholder属性样式
<input type="text" name="" placeholder="Username"/>
::placeholder{/*属性选择器,选择所有placeholder属性*/
color:rgba(0,0,0,.5)//颜色设置为黑色,透明度0.5
}
让文字垂直居中
height: 100px;
line-height: 100px;//保证和height相同高度即可
动画过渡
transition: 0.5s;//动画过渡时间0.5s
内容相对父标签居中
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
圆角边框和阴影
border-radius: 20px;//圆角边框
border:10px solid rgba(255,255,255,.2);/*10px 实线 颜色为白色,透明度0.2的边框 */
box-shadow: 10px 10px 15px rgba(0,0,0,.5);/*给元素添加 水平位置10px 垂直位置10px 阴影大小15px 透明度0.5的黑色阴影 */
页面背景不平铺并且根据窗口调整尺寸
background-size: cover;/*背景大小为正好填满标记*/
/* 背景不平铺 */
background-repeat: no-repeat;
页面背景不平铺,且固定,不改变图片大小
/* 背景响应式调整显示比例 */
background-size: cover;
background-image: url(../image/20080810042853.jpg);
/* 背景不平铺 */
background-repeat: no-repeat;
/* 背景固定,附着 */
background-attachment: fixed
让内容根据父容器容量布局,不要改变父容器尺寸,溢出内容直接隐藏
/* 弹性布局 */
display: flex;
box-sizing: border-box;//并排放置带边框元素时,自动进行匹配
/* 溢出隐藏 */
overflow: hidden
清除提示框(点击就出现个框框,清除掉)
outline: none;/*outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。*/
形状变换
transform: translateX(-50%) scaleX(2);//水平方向平移-50%,水平缩放2倍
设置高斯模糊
filter: blur(0.2px);//高斯模糊0.2px
文本域不可调节大小
resize: none;
控制鼠标指针样式
cursor: pointer;//将鼠标变成手
给div加滚动条
<div style="height:300px;overflow-y:auto"></div>//设置为auto自动,将在超过指定高度是添加滚动条
修饰滚动条
/* 滚动条 */
::-webkit-scrollbar {/* 这是针对缺省样式 (必须的) */
width: 15px;
}
::-webkit-scrollbar-track {/* 滚动条的滑轨 */
background-color: rgba(0,0,0,0.2);
border-radius: 20px;
}
::-webkit-scrollbar-thumb {/* 滑块 */
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
}
::-webkit-scrollbar-button {/* 滑轨两头的监听按钮 */
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
::-webkit-scrollbar-corner {/* 横向滚动条和纵向滚动条相交处尖角 */
background-color: black;
}
文本自动换行
overflow-y: auto;//垂直方向自适应
word-wrap:break-word;//文本自动换行
隐藏原标签,使用定位标签lable为其设置样式
元素在主轴(页面)上居中排列
justify-content: center;
设置段落尺寸(最小高度等)
min-height: 100px;//最小高度为100px
转换元素行,块性质
display: block;//转为块级
display: inline;//转为内联,行
display: inline-block;//块and行
移除默认样式
/* 移除默认样式 */
-webkit-appearance: none;
让标签不可选中
pointer-events: none;
让文本不可选中
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;