![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
小吴不会敲代码吧
练习时长两年半的全栈练习生
展开
-
解决修改css或js文件后,浏览器缓存未更新问题
涨姿势 https://blog.csdn.net/qq_36820717/article/details/81663351?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-8.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-8.c转载 2021-06-28 22:01:40 · 143 阅读 · 1 评论 -
CSS盒子使用inline-block时中间有间隙
解决办法1: 父级盒子设置 font-size: 0; 解决办法2: <div>content1</div><div>content2</div> 这种办法如果设置了代码格式化的话不好用原创 2021-06-28 20:47:35 · 149 阅读 · 1 评论 -
HTML5 CSS3新增特性
都有兼容性问题,IE9+以上版本浏览器才支持 div对搜索引擎来说没有语义 <header>:头部标签 <nav>:导航标签 <article>:内容标签 <section>:定义文档某个区域 <asider>:侧边栏标签 <footer>:尾部标签 <audio>:音频标签 <video>:视频标签 尽量使用mp4格式 <video src="文件地址" controls="controls">&l原创 2021-05-06 23:02:31 · 80 阅读 · 0 评论 -
CSS初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们要对CSS初始化 简单理解:CSS初始化是指重设浏览器的样式。(也称为CSS reset) 每个网页都必须首先进行CSS初始化 * { margin: 0; padding: 0; } ...原创 2021-05-06 22:56:28 · 85 阅读 · 0 评论 -
CSS 常见布局技巧
margin负值的应用 盒子边框1+1=1 margin-left:-1px; 鼠标经过显示,盒子没有定位用相对定位,有相对定位用z-index提高层级 文字围绕浮动元素 左侧盒子添加浮动,右侧紧贴显示 行内块的巧妙运用 使用行内块text-aign:center;可以实现居中对齐,并且有缝隙 CSS三角强化 去掉一个,去掉那个相对的改的更高一点(左下设置为0,上边框调大) width:0; height:0; border-color:transparent red transparent transpa原创 2021-05-06 22:55:40 · 47 阅读 · 0 评论 -
CSS 用户界面样式
鼠标样式 cursor li { /*小手*/ cursor:pointer; } /*属性值 move 移动(十字) text 文本 not-allowed 禁止*/ 轮廓线 outline outline:0;或者outline:none; 防止拖拽文本域 resize resize:none;文本域最好放在一行来写 vertical-align 属性 图片或这文字垂直居中 bottom底线,middle中线,top顶线、base基线 图片和文字对齐 vertical-align:mi原创 2021-05-06 22:54:08 · 59 阅读 · 0 评论 -
CSS 画三角
宽和高指定为0 指定边框border-top-color:颜色; 改变边框粗细来改变三角形大小 其余指定为transparent 选择器 { /*不要忘了子绝父相*/ position: absolute; right:; top:; width:0; height:0; /*为了照顾兼容性*/ line-height:0; font-size:0; border: 5px solid transparent; bord原创 2021-05-06 22:52:07 · 42 阅读 · 0 评论 -
CSS 字体图标iconfont
图标当成字来看, 轻量级、灵活性、兼容性 不能替代精灵技术,样式结构简单 http://icomoon.io http://www.iconfont.cn/ 字体图标的引入,注意字体文件路径的问题 字体文件放入 字体声明 复制特殊字体符号 指定字体 font-family: “icomoon”; 字体图标追加:点击左上角Import Icons->选择selection.json->Yes->选择->生成 ...原创 2021-05-06 22:50:39 · 103 阅读 · 0 评论 -
CSS 精灵图技术
为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度,采用CSS精灵图技术。 精灵技术主要针对背景图片使用。就是把带后跟小背景整合到一张大图片中。 sprites 精灵图 或者叫雪碧图 一张图片,通过调整图片位置来显示想要显示的内容 左上移动 坐标是负值 ...原创 2021-05-06 22:47:08 · 75 阅读 · 0 评论 -
CSS 元素的显示与隐藏
CSS 元素的显示与隐藏 display属性:none 隐藏对象,block显示 隐藏之后位置也不占有了 visibility 可见性 visibility:visible 元素可视 visibility:hidden 元素隐藏 隐藏之后还占有位置 overflow 溢出 visible 默认显示 hidden 不显示 scroll 显示滚动条 auto 溢出的时候显示滚动条,不溢出不显示 溢出文字省略号显示 单行文本 /*先强制一行内显示*/ white-space: nowrap; /*超出的部分隐原创 2021-05-06 22:44:02 · 71 阅读 · 0 评论 -
CSS 定位
子绝父相 fixed固定定位小技巧,固定在版心右侧位置 小算法: 让固定定位的盒子left:50%。走到浏览器可视区(也可看作版心)一半位置 让固定定位的盒子margin-left: 版心宽度的一半距离。多走版心宽度的一半 粘性定位sticky 特点:以浏览器的可视窗口为参照点移动元素(固定定位特点) 粘性定位占有原先的位置(相对定位特点) 必须添加top、left、right、bottom其中一个才有效 定位叠放次序z-index z轴 数值越大盒子越靠上,值相同则后来者居上,数字后面不能加单位,只原创 2021-05-06 22:39:32 · 43 阅读 · 0 评论 -
CSS 浮动
传统网页布局的三种方式:普通流(标准流) 浮动 定位 标准流:标签按照规定好的默认方式排列,块级元素单独占一行,行内元素按照顺序从左向右排列,遇到父元素边缘自动换行 以上三种布局实际开发中的一个页面基本都包含 行内块中间会有空隙,多少像素不清楚,实际开发很难控制 浮动可以改变标签默认的排列方式,经典应用:多个块级元素一行内显示 多个块元素纵向排列用标准流,多个块元素横向排列用浮动 浮动的特性: 浮动的元素会脱离标准流(脱标),浮动的盒子不再保留原来的位置 浮动的元素会一行内显示并且元素顶部对齐 浮动元素会原创 2021-05-06 22:37:13 · 39 阅读 · 0 评论 -
CSS圆角边框
CSS圆角边框 border-radius:length length 是圆角的半径 还可以用百分比来表示,表示是高度宽度的百分之多少 圆角矩形 设置为高度的一半; 该属性是一个简写属性,还可以设置各个角,分别是左上角,右上角,右下角,左下角(顺时针) 两个值 表示对角线,还可以跟三个值; 还可以设置单个角 border-top-left-radius:20px; 先上下,再左右 ...原创 2021-04-27 08:56:10 · 169 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型 页面布局三大核心 盒子模型 浮动 定位 利用CSS设置好盒子样式,摆放到相应位置,然后往盒子里装入内容 盒子模型的组成部分 border 边框 content内容 padding 内边距(内容与盒子边框) margin外边距(盒子与盒子) 边框(border)合理利用层叠性 颜色 宽度 线型 border-color border-width border-style 实线 solid 虚线dashed 点线dotted 细线表格 border-collapse:collapse 合原创 2021-04-27 08:53:51 · 48 阅读 · 0 评论 -
CSS背景透明度和选择器优先级
CSS背景透明度 background:rgba(0,0,0,0.6); 最后一个参数是透明度;省略0,写成.3 CSS选择器优先级 继承或者 * 0,0,0,0 元素选择器 0,0,0,1 类选择器,伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式style="" 1,0,0,0 !important 无穷大 ...原创 2021-04-27 08:50:48 · 145 阅读 · 0 评论 -
CSS背景
CSS 背景 背景颜色 transparent 透明色 背景图片 非常便于控制位置(精灵图也是典型应用) background-image:none|url; 背景平铺 background-repeat :repeat|no-repeat|repeat-x|repeat-y 默认情况下背景图片是平铺的 页面元素既可以添加背景颜色也可以添加背景图片,图片会压住颜色 背景图片位置 background-position:x,y; x,y,指的是坐标,也可以是方位名词和精确单位 方位名词 前后顺原创 2021-03-31 22:24:25 · 42 阅读 · 0 评论 -
CSS元素显示模式
CSS元素显示模式 行内块元素 和相邻行元素在一行上但是之间会有空白间隙,一行可以显示多个,默认宽度就是本身内容的宽度,高度,行高,外边距以及内边距都可以控制 display:block可以转换为块元素 display:inline 块元素转换为行内元素 display:inline-block 转换为行内块元素 单行文字垂直居中 解决方案:文字行高=盒子的高度 line-height=height ...原创 2021-03-31 22:22:20 · 64 阅读 · 0 评论 -
复合选择器学习笔记
复合选择器学习笔记 后代选择器 选择指定的所有后代 符号是空格 子代选择器 只选择近一级元素 符号是> 并集选择器 相同样式的元素 符号是逗号 链接伪类 LVHA的顺序 :link :visited :hover :active 一般开发使用L H a:link { color: #333; text-decoration: none; } a:hover { color: #369; text-decoration: underline; } :focus原创 2021-03-31 22:20:45 · 49 阅读 · 0 评论