随笔分类 - 水车--CSS
有关css， css3知识点，教程等内容
摘要：浏览器内置指针样式： 标了红色 * 号的为我认为的常用指针样式。 cursor: auto; （默认值）浏览器根据当前内容自动决定指针样式；例如当内容是文字时使用 text 样式cursor: default;默认指针，通常是箭头。cursor: none;不渲染指针！cursor: context
阅读全文
摘要：前言 正文 只需要这样就可以实现流失布局： //html <div class="container"> <div>item</div> ...... </div> // css 样式 .container { display: grid; grid-template-columns: repeat
阅读全文
摘要：
前端开发中，字体是很重要的一部分。特别是针对一些演示大屏页面做开发时，字体更为重要。然而，当客户电脑没有安装你想要的字体时，页面可能会达不到预期效果。那么该怎么办呢？
阅读全文
前端开发中，字体是很重要的一部分。特别是针对一些演示大屏页面做开发时，字体更为重要。然而，当客户电脑没有安装你想要的字体时，页面可能会达不到预期效果。那么该怎么办呢？
阅读全文
摘要：前言 iconfont地址：https://www.iconfont.cn/ 正文 在代码中如何引用 https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.27&helptype=code 字体图标的自带颜色 有些字体图标是
阅读全文
摘要：记录自己遇到的坑 项目： 指 flex 布局的子元素 当在flex布局情况下，当内容超过项目大小时， 项目会被内容撑开，这种情况下，容易导致页面布局错乱。 解决办法： 给项目设定一个固定1个像素大小的宽带或者高度（取决与flex-direction的方向，横轴设定width，纵轴设定height），
阅读全文
摘要：flex 容器 CSS 设定 display:flex 或者设定 display:inline-flex 时，就将当前盒子设置成容器了，容器有 6 个属性 属性 说明 flex-direction 主轴的方向 flex-warp 排不下时的换行方式 flex-flow 是flex-direction
阅读全文
摘要：代码很简单. 就是一个 css3的过滤器属性即可实现 直接上代码: 特别提醒, 如果 body 设置了 filter:grayscale. 那么他的子元素设置的 position: fixed 将失效 技术点总结 CSS3 filter(滤镜) 属性 实例 修改所有图片的颜色为黑白 (100% 灰度
阅读全文
摘要：我们在 HTML 开发时可能会遇到这样的情况：页面上有一些元素使用绝对定位布局，这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下，下方元素被遮挡的部分是不会响应鼠标事件的。 但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。 比如：我们在一个地图组件上覆盖了一个显示信息的元素
阅读全文
摘要：常见class关键词： 布局类：header, footer, container, main, content, aside, page, section 包裹类：wrap, inner 区块类：region, block, box 结构类：hd, bd, ft, top, bottom, lef
阅读全文
摘要：demo1： html css demo2 直接在css中用伪属性
阅读全文
摘要：为什么要初始化CSS？ CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们
阅读全文
摘要：阮一峰：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 由于自己经常搞混：animation，transition，transform这三个属性，今天就总结一下首先是：transform:和css3一些
阅读全文
摘要：参考：阮一峰的网络日志 效果图：
阅读全文
摘要：布局1：固定行数 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -w
阅读全文
摘要：原文链接：http://blog.sina.com.cn/s/blog_7d796c0d0102uyd2.html 只要在样式里面加一句去掉css去掉iPhone、iPad的默认按钮样式就可以了！~ input[type="button"], input[type="submit"], input[
阅读全文
摘要：正常情况下，min-height可以当height使用 如： 效果是这样的。 当子元素超过父元素的高后，父元素会自动加宽 但是当父元素被 display：table后，min-height就会失效了，也就是不能当height使用了，注意：在安卓上失效，在ios上依然是正常的 这里就不截图了。 怎么解
阅读全文
摘要：图片和文字对齐 设置各对象的vertical-align属性，属性说明： baseline－将支持valign特性的对象的内容与基线对齐 sub－垂直对齐文本的下标 super－垂直对齐文本的上标 top－将支持valign特性的对象的内容与对象顶端对齐 text-top－将支持valign特性的对
阅读全文
摘要：一般的元素都有设置自动换行的自动换行：word-wrap: break-word;word-break: normal; 强制不换行：white-space:nowrap;CSS设置不转行:overflow:hidden 隐藏white-space：normal 默认 //***pre 换行和...
阅读全文
摘要：国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以上的...
阅读全文
摘要：使用方法 <!-- cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状；--> div { cursor: [某个值] } 鼠标样式： 值描述 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default
阅读全文
