摘要:栗子: <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; 但是在最新版的谷歌里。已经不在支持这个属性啦,
阅读全文