CSS Grid布局（Grid Layout）是CSS3引入的一项革命性技术，它为网页设计者提供了一种高效、灵活的二维布局方式，尤其擅长处理复杂的页面布局和响应式设计。然而，随着其功能的强大，一些高级
CSS高级1 clear属性 主要用于去掉向各方向的浮动属性（包括继承来的属性）2 css尺寸属性允许你控制元素的高度和宽度，也允许你增加行间距3 涉及到的属性 height设置元素的高度 line-height设置行高 max-hei
原创
2017-05-26 23:05:01
597阅读
文章目录基本属性背景图片(image)背景平铺（repeat）背景位置(position)背景附着背景简写背景透明(CSS3)背景图方位案例基本属性CSS 可以添加背景颜色和背景图片，以及来进行图片设置。background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写（复合属性
原创
2020-06-29 20:41:13
598阅读
一般来讲建立大的框架结构的时候使用外部CSS文件的方式，应用方法如下： 建一个css.css文件，输入下面的内容： p {     color: red; } a {     color: blue; } 然后再html文件中引用这个css文件： <!DOCTYPE html PUBLIC &qu
原创
2010-04-21 17:51:44
304阅读
1 元素的显示与隐藏 1.1 display（使用较多，配合js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用广泛）display:none 隐藏（先隐藏元素，不保留位置）dispaly:block 除了转换成块级元素以外，还可以显示元素。1.2 visibilityvisibility:hidden 隐藏（先隐藏元素，保留位置）visibility:visible 显示1.3 o
转载
2021-01-18 19:55:41
253阅读
2评论
选择器的分组 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h2,h3,h5,h6 { color: green } 继承及其问题 根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则： body { font-family:...
转载
2008-06-23 16:57:00
87阅读
2评论
速度，出现了CSS精灵技术，也称 css sprite， css雪碧。把压缩包里面的selection.json 重新上传，然后选取自己想要的图标，重新下载压缩包，并替换原来的文件即可。如果在工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
原创
2023-07-06 15:54:13
38阅读
使用CSS复位css复位可以在不同的浏览器上保持一致的样式风格，可以使用css reset库的Normalize等，也可使用更简化的复位方法：* { box-sizing: border-box; margin: 0; padding: 0;}现在元素margin和padding为0，box-sizing可以设置css盒模型布局。继承box-sizing从html元素继承box-siz
转载
2021-06-01 11:38:09
190阅读
CSS高级技巧
CSS用户界面样式所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。<ul> <li style="cursor:default">我是小白<...
原创
2021-09-02 09:50:04
144阅读
CSS高级技巧:使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG优化显示文本对纯CSS滑块使用 max-height继承 box-sizing表格单元格等宽用Flexbox摆脱外边距的各种hack使用属性选择器用于空链接使用 :not() 在菜单上应用/取消应用边框先给每一
原创
2016-02-22 20:38:27
164阅读
一 元素的显示与隐藏 1）display实现 display:none; //隐藏元素display:block; //显示元素display:block; 不光有转换块元素的功能，还有显示的功能特点：隐藏元素 不保留位置 2）visibility实现 visibility [ˌvɪzəˈbɪlət
转载
2021-01-28 10:42:00
128阅读
2评论
精灵图 为什么需要精灵图 精灵图的使用 字体图标 字体图标的产生 字体图标的优点 三角 CSS用户界面样式 鼠标样式cursor 轮廓线outline 防止拖拽文本域resize vertical-aling属性应用 图片底侧默认空白空隙问题 溢出文字省略技巧 单行文本溢出 多行文本溢出 常见布局技 ...
转载
2021-08-09 17:56:00
195阅读
2评论
我们大概都知道css可以用来作平面旋转、扭曲、放大缩小、平移。。。并且用起来几乎都
原创
2022-09-06 14:46:40
173阅读
（一）实现简单的淘宝带图标侧边栏效果 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5&
转载
2017-05-18 14:55:25
203阅读
根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小，适应不同的屏幕比例。 本文的px转rem换算公式为: 100px = 1rem 18px = 0.18rem 基础css body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textare
转载
2020-10-13 15:03:00
126阅读
2评论
在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
转载
2016-05-29 11:08:00
137阅读
2评论
前言 首先，小编给大家解释一下什么是SCSS和LESS，Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compasss）有助于更好地组
转载
2023-08-13 07:45:44
50阅读
加速的关键，不是降低重量，而是减少个数。如果重量在200K以内，只要网络不是特别慢，效率都差不多。但是，如果图片个数多一倍，效率将明显低一个档次。
传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按Byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。因为一张图片的传输时间，通常远小于请求等待的时间。
转载
精选
2011-02-28 13:23:00
322阅读
❤️文章内包含个人理解，如有错误请指出。 ❤️目录前言定义变量使用变量特别注意点 字符连接 无单位计算，并添加单位
原创
2022-10-21 17:33:39
176阅读
阴影可以让元素“浮起来”，盒子（box）和文本都可以用。
原创
2023-01-04 14:02:39
113阅读
