摘要：栗子： <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
阅读全文
摘要：利用背景图的background-position 实现 demo 方法一： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ position:relative; width:200
阅读全文
摘要：scoped 修饰的style只给当前组件内的元素使用 本质： 1.给当前组件中的所有元素，添加一个随机的属性 2.给当前组件中的所有元素的样式添加一个对应的随机属性选择器 描述： 场景：按照设计图，修改select选择器的样式 设计图效果 html <el-select class="el-sel
阅读全文
摘要：网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式
阅读全文
摘要：用于在元素的框架上添加阴影效果。 你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。 该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 一、属性值规则 当给出两个、三个或四个 <length> 值时。 如果只给出两个值, 那么这两个值将会被当作水平阴影、垂直阴影
阅读全文
摘要：容易混淆的几个换行属性 word-break:break-all；/* 单词内换行 */ word-wrap:break-word;/* 以单词/网址/换行 */ white-space:pre-wrap;/* 保留空白 */ white-space:nowrap; /* 不换行 */ <!DOCT
阅读全文
摘要：定义： BFC的布局规则如下： 以下行为会触发BFC 官方： 资源： 解决方案： 案例 demo1:自适应两栏布局 我们先定义两个div： 然后定义css： 效果图如下： 分析： 效果如下： demo2:清除内部浮动 首先是父div套子div 然后是css: 效果如下： 效果如下： 可以看到父div
阅读全文
摘要：一、已知宽高的图片实现垂直水平居中 1.借助margin-top负边距实现垂直居中 2.借助额外的块级元素实现垂直居中 二、未知宽高的图片实现垂直水平居中 1.利用line-height 和 vertical-align:middle实现垂直居中 2.借助高度100%的一个标签，原理vertical
阅读全文
摘要：1.兼容性： 2.应用场景：新增页面上传svg图标后，更改图标颜色后，在列表页面展示色值改后的svg图标。 3.解决方案：使用filter属性中的 drop-shadow，drop-shadow滤镜可以给元素或图片非透明区域添加投影。 css: html: 4.效果 相关文档：https://www
阅读全文
摘要：MDN说法： max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。 max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效. max-height 重载（覆盖掉） he
阅读全文
摘要：https://www.cnblogs.com/koubazhuanshu/p/6985331.html https://www.w3cplus.com/css/px-to-em 不建议使用 作者：smile.轉角 QQ：493177502
阅读全文
摘要：nth-child含义 :nth-child(an+b) 这个 CSS 伪类匹配文档树中在其之前具有 an+b-1 个兄弟节点的元素，其中 n 为正值或零值。 简单点说就是，这个选择器匹配那些在同系列兄弟节点中的位置与模式 an+b 匹配的元素。 示例： 0n+3 或简单的 3 匹配第三个元素。 1
阅读全文
摘要：css3实现3D立体翻转导航特效 Home HomeHome Services ServicesServices Products ProductsProducts About AboutAbout Contact ContactContact Blog BlogBlog ...
阅读全文
摘要：说法一： 说法二： CSS命名规范(规则)常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：logi
阅读全文
摘要：常用css 下三角 常用css 闪动效果 css html 一种圆角效果 css html 效果 常用css 改变input的placehoder颜色 作者：smile.轉角 QQ：493177502
阅读全文
摘要：谷歌浏览器Chrome是Webkit的内核，有一个 -webkit-text-size-adjust 的私有 CSS 属性，通过它即可实现字体大小不随终端设备或浏览器影响。CSS样式定义如下：-webkit-text-size-adjust:none; 但是在最新版的谷歌里。已经不在支持这个属性啦，
阅读全文
摘要：其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 2.IE盒子 从上图可以看到 IE 盒子模型的范围也包括 mar
阅读全文
摘要：谷歌浏览器Chrome是Webkit的内核，有一个 -webkit-text-size-adjust 的私有 CSS 属性，通过它即可实现字体大小不随终端设备或浏览器影响。CSS样式定义如下：-webkit-text-size-adjust:none; 但是在最新版的谷歌里。已经不在支持这个属性啦，
阅读全文
