随笔分类 - CSS
摘要：链接：https://www.nowcoder.com/questionTerminal/dce13fd5b59c41be80a22b38c5a32dc1来源：牛客网1，display：none会让元素从渲染树中消失，渲染的时候不占据任何空间；visibility：hidden不会让元素从渲染树中消
阅读全文
摘要：说明：本文转自：https://blog.csdn.net/wxiao_xiao_miao/article/details/123879687 原作者此篇文章内容非常详细，我个人十分喜欢，为了能够在复习时能够随时查阅，故而将此文章复制了一份到我的博客中，上面是原文链接，如果有网友要学习此文章中的知识
阅读全文
摘要：要理解定位你要先理解文档流，在文档流中相对定位的元素占有位置，而且会影响后面的元素（块元素、行内块元素），比如两个div并排，另外一个会换行。<div>111</div><div>222</div>而绝对定位就是把该元素从文档流中踢出，不会占用文档流的位置，也不会影响后面的元素。<div style
阅读全文
摘要：inset属性说明如下： inset 属性用作定位元素的 top、right、bottom、left 这些属性的简写。类似于 margin 和 padding 属性，依照“上右下左”的顺序。举个例子： inset: 0; /* 等同于 `top: 0; right: 0; bottom: 0; le
阅读全文
摘要：任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 链接：https://www.bilibili.com/video/BV14J4114768?p=175
阅读全文
摘要：链接：https://www.cnblogs.com/wenxuehai/p/11449430.html
阅读全文
摘要：点击穿透： pointer-events: none; 恢复点击处理： pointer-events: auto;
阅读全文
摘要：bug:图片底部会有一个空白缝隙，原因是行内块元素和文字的基线对齐。 主要解决方法有两种: 1.给图片添加vertical-align: middle | top | bottom等。（提倡使用） 2.把图片转换为块级元素 display: block;
阅读全文
摘要：给父盒子设置"position: relative;"相对定位，给子盒子设置"position: absolute;"绝对定位。使用"left: 50%;"和"top: 50%;"让子盒子距离父盒子左边和顶部距一半的距离，此时由于子盒子的左边框和上边框在父盒子的中间线处，所以需要退回子盒子一半距离的
阅读全文
摘要：问题1.什么是精灵图？ 精灵图就是一张将多个图标放置在一起的图片。 问题2.为什么要用精灵图？ 使用精灵图，将多个图标放在一张图上，访问网页时只需要将这一张图片下载到本地即可在网页上看到这张图片上的所有图标。可以使用户在访问网页的时候，减小服务器压力，加快网页加载速度。（大家都喜欢秒加载） 问题3.
阅读全文
摘要：1.display： display除了可以设置元素的类型，还可以用于显示和隐藏元素。 display: none; 有隐藏元素的功能 display: block; 除了转换成块级元素外，还有显示元素的功能 display隐藏元素后，不再占有原来的位置（脱标） 2.visibility： visi
阅读全文
摘要：1.额外标签法 选择器 { clear: 属性值; } left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素（清除右侧浮动的影响） both 同时清除左右两侧浮动的影响 实际工作中，几乎只用clear:both; 清除浮动的策略是：闭合浮动（在需要格挡的元素后加</
阅读全文
摘要：链接：https://blog.csdn.net/WX_nbclass/article/details/124522118
阅读全文
摘要：1.相对定位：relative 一般用来给绝对定位当爹用，将绝对定位的子盒子限制在父盒子之中。 特点：不脱标，也就是说原本占有的位置不会被其他盒子所挤占。 2.绝对定位：absolute 绝对定位需要依托父盒子进行定位，如果没有父盒子或祖先盒子，则以浏览器为准定位（Document文档）。 如果父/
阅读全文
摘要：建议遵循以下顺序： 1.布局定位属性：display position float clear visibility overflow(建议display第一个写，毕竟关系到模式) 2.自身属性：width height margin padding border background 3.文本属性
阅读全文
摘要：lex实际上是flex-grow、flex-shrink和flex-basis三个属性的缩写。 flex:1 => flex: 1 1 auto; 原文链接：https://blog.csdn.net/weixin_43554584/article/details/113839778
阅读全文
摘要：链接地址：https://blog.csdn.net/hncu1990/article/details/118878493
阅读全文
摘要：复制当前行：shift+alt+↓ 下一行：ctrl+enter 上一行：ctrl+shift+enter 写多行相同标签：举例写10个li标签 li*10 ul>li{这是第$个li}*8会生成： <ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li
阅读全文
