CSS
CSS知识点总结
Cool_so_cool
这个作者很懒,什么都没留下…
展开
-
css渐变色半透明半遮挡,动态控制高度线性渐变效果
【代码】css渐变色半透明半遮挡,动态控制高度线性渐变效果。原创 2023-06-01 10:36:32 · 950 阅读 · 0 评论 -
sticky 粘性定位使用
sticky的使用:.box{ position: sticky; top: 100px;}设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可**使用条件:父元素不能overflow:hidden或者overflow:auto属性。必须指定top、bottom、left、right4个值之一,否则只会处于相对定位父元素的高度不能低于sticky元素的高度sticky元素仅在其父元素内生效**本文来源:码农网本文链接:htt原创 2021-10-14 14:36:22 · 366 阅读 · 0 评论 -
CSS文字超出打点
单行文本超出打点: overflow:hidden; /* 超出部分隐藏 */ white-space: nowrap; /* 文本不换行 */ text-overflow:ellipsis;/* 省略的文本用省略号表示 */多行文字超出打点不考虑兼容性的情况下: -webkit-line-clamp: 3; /*用来限制在一个块元素显示的文本的行数*/ display: -webkit-box; /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*原创 2021-10-14 14:30:43 · 1050 阅读 · 0 评论 -
CSS圆点
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .dot{ width: 10px; height: 10px; background-color: red; border-radius: 50%; di原创 2021-09-26 16:45:54 · 132 阅读 · 0 评论 -
CSS文字超出打点
元素必须有宽度,要不不生效单行文字溢出打点 div { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }多行文字溢出打点 div { width: 100px; overflow: hidden; text-overflow: ellipsis; disp原创 2021-04-19 19:40:56 · 325 阅读 · 0 评论 -
flex布局中实现盒子左对齐,盒子右对齐
父级元素display: flex;align-items:center;需要靠右的子元素方法 1 flex: 1; text-align: right;方法 2margin-left: auto;原创 2021-03-08 15:20:06 · 4310 阅读 · 2 评论 -
蒙层+弹窗
背景色(父级):.popping-box-wrap {position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.1);}白色弹框部分(子集):.popping-box-con {position: absolute;width: 490px;height: 458px;box-sizing: border-box;background: #fff;top: 50%;lef原创 2021-02-19 13:52:21 · 564 阅读 · 0 评论 -
盒子阴影
box-shadow: 0 0 10px #bbb;box-shadow: 0 0 10px rgba(0,0,0,0.02);box-shadow: 0 0 20px rgba(0,0,0,0.1);原创 2021-02-19 13:47:38 · 112 阅读 · 0 评论 -
pointer-events一个神奇得属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .bottom { background: y转载 2020-12-07 14:07:15 · 146 阅读 · 0 评论 -
css 优化滚动条
overflow:scroll 就会出现滚动条但是,为了公司需求,还是要修改一下样式实现效果实现效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume原创 2020-11-11 14:46:29 · 442 阅读 · 0 评论 -
前端VUE聊天框样式
简单记录一下项目中聊天框样式,方便以后直接复用,仅供参考~~~~先看一下我要实现的样式吧 <!-- recordContent 聊天记录数组--> <div v-for="(itemc, indexc) in recordContent" :key="indexc"> <!-- 对方 --> <div class="word" v-if="itemc.id == 2">原创 2020-11-09 20:04:24 · 3712 阅读 · 2 评论 -
css只显示某一边框
简单记录一个CSS样式只显示底边框 border-width: 0 0 1px 0; border-style: solid; border-color:#D8D8D8;原创 2020-11-05 19:57:52 · 1151 阅读 · 0 评论 -
让一个盒子垂直水平居中总结
如何将一个div盒子水平垂直都居中? <div class="parent"> <div class="child"></div> </div> <style> .parent{ width:500px ; height:500px ; border: 1px sold red } .child{ width :100px; height:100px;原创 2020-10-02 10:15:22 · 637 阅读 · 0 评论 -
鼠标划上小手
style来控制样式;cursor:pointer代表鼠标滑过变成小手图标text-decoration:none代表不显示下划线原创 2020-09-08 16:15:07 · 209 阅读 · 0 评论 -
DIV框加上树形滚动条
首先先准备一个div框 <div class="con"> <div class="con-wrap"> //内容区 </div> </div> <style> .con{ width: 573px; opacity: 1; backgr原创 2020-08-24 09:23:34 · 236 阅读 · 0 评论 -
canvas画布
什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。通过 JavaScript 来绘制canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:<style> canvas{ position: absolute; left:原创 2020-07-29 10:04:47 · 122 阅读 · 0 评论 -
less封装一个三角形出来,要设置哪些参数?
//向上三角 .triangle(top,@w:0.3125rem,@c:#ccc){ border-width:@w; border-color:transparent transparent @c transparent; border-style: dashed dashed solid dashed; } //向下三角 .triangle(bottom,@w:0.3125rem,@c:#ccc){ border-width:@w; border-color: @c转载 2020-05-20 17:30:56 · 232 阅读 · 0 评论 -
行内和块级元素区别?如何让行内元素设置宽高?
行内和块级元素区别:1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-hei原创 2020-05-20 16:33:10 · 1873 阅读 · 0 评论 -
CSS中的rem响应式布局开发
CSS常用的单位:px 像素 (固定单位)em 相对单位,相对于父元素的字体大小设定的单位,一个em相当于一个汉字。还有这些单位:% deg s / ms … .box{ font-size: 14px; } .box p{ text-indent: 2em;//首行缩进,两个字体大小 }rem (root em) 相对于当前页面根元素(HT原创 2020-05-17 22:20:04 · 521 阅读 · 0 评论 -
CSS中的定位
css定位有四种不同类型,position值分别为:static, relative,absolute,fixed1. relative(相对定位):相对定位的偏移参考元素是元素本身,不会使元素脱离文档流。元素的初始位置占据的空间会被保留。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级。z-index属性:挺有意思的,看一下代码和效果图 <style> img { position: absolute;原创 2020-05-10 22:29:43 · 176 阅读 · 0 评论 -
CSS选择器和优先级
选择器选择器可以帮助我们选中需要添加样式的标签1、标签名选择器:通过标签的名称找到指定标签格式:元素名{ }2、类选择器:通过标签的class属性值选中指定标签,多个标签可以有相同的class值格式:.d1{ }3、id选择器:通过id找到标签,一个html文件中id不能重复格式: #id{}4、派生选择器(后代选择器):类似于路径,找到符合要求的标签,会匹配所有的后代标签格式:...原创 2020-04-30 08:49:37 · 285 阅读 · 0 评论