随笔分类 - CSS
摘要:props import ElementUI from 'element-ui' Element.Input.props.clearable.default = true; 原生属性 通常情况下,以maxlength属性为例 import ElementUI from 'element-ui' co
阅读全文
摘要:::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; }
阅读全文
摘要:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的
阅读全文
摘要:方法 根据设计图和实际情况下的屏幕宽度做对比,自适应倍数 (function () { function resize() { // 设计稿宽度 const designWidth = 1920; // 屏幕宽度 const windowWidth = window.innerWidth; // h
阅读全文
摘要:弹性盒子布局时,会因为子项盒子中的内容文字过多而撑开整个页面。 解决方法: 在每个伸缩子项上添加css属性 /*允许在单词内换行 */ word-break: break-all; text-align: center; /* 解决英文撑大横向页面 */ overflow: hidden; /*允许
阅读全文
摘要:当行内样式遇见背景图片 今天需要在行内样式中引入背景图片,但是发现游览器并不解析背景图片的地址 然后己经查询找到了一种解决方法 css ``` 但是不知其原理
阅读全文
摘要:1.从属关系区别 是 提供的语法规则,只有导入样式表的作用; 是`HTML CSS RSS、rel` 连接属性等。 2.加载顺序区别 加载页面时, 标签引入的 被同时加载; 引入的 将在页面加载完毕后被加载。 3.兼容性区别 是 才有的语法,故只可在 才能识别; 标签作为 元素,不存在兼容性问题。
阅读全文
摘要:伸缩布局 传统布局和伸缩布局 布局的传统解决方案,基于盒装模型,依赖display属性+position属性+float属性 对于特殊布局非常不便 CSS3在布局方面做了非常大的改进 使得我们对块级元素的布局排列变得十分灵活,适宜性非常强 其强大的伸缩性,在响应式开发中发挥极大的作用 重要属性 di
阅读全文
摘要:CSS3 3D转换 3D转换我们工作中最常用的是3D位移和3D旋转 主要知识点 3D位移 3D旋转 透视 3D呈现 3D位移 仅仅在X轴上移动 仅仅在Y轴上移动 仅仅是在Z轴上移动 注意: 一般用px单位 其中x,y,z分别指要移动的轴的方向和距离 x,y,z是不能省略的,没有写0 透视 在2D平面
阅读全文
摘要:CSS3 动画 动画的基本使用 制作动画分为两不 先定义动画 再使用(调用)动画 用keyframes定义动画(类似定义类选择器) 元素使用动画 动画序列 0% 是动画的 开始 ,100% 是动画的 完成 ,这样的规划就是动画序列 再 中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
阅读全文
摘要:CSS3 2D转换综合写法 CSS3 2D转换 转换(transfrom)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果 转换(transfrom)可以简单的理解为变形 移动:translate 旋转:rotate 缩放:scale CSS3 2D转换综合写法 注意 同时使用
阅读全文
摘要:CSS3 2D 转换之缩放 CSS3 2D转换 转换(transfrom)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果 转换(transfrom)可以简单的理解为变形 移动:translate 旋转:rotate 缩放:scale CSS3 2D 转换之缩放scale 缩放
阅读全文
摘要:CSS3 2D 转换之旋转 CSS3 2D转换 转换(transfrom)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果 转换(transfrom)可以简单的理解为变形 移动:translate 旋转:rotate 缩放:scale CSS3 2D 转换之旋转rotate 2
阅读全文
摘要:CSS3 2D转换 转换(transform) 是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果 转换(transform) 可以简单的理解为变形 移动:translate 旋转:rotate 缩放:scale 二维坐标系 2D转换时改变标签在二维平面上的位置和形状的一种技术,
阅读全文
摘要:CSS 过渡 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果 过渡动画: 是从一个状态渐渐的过渡到另外一个状态 可以让我们页面跟好看,更加动感十足,虽然低版本游览器不支持(i
阅读全文
摘要:定位 视觉格式化模型,大体上将页面分为三种方式: 1. 常规流 2. 浮动:float 3. 定位:position 定位:手动控制元素在包含块中的精确位置 涉及的css属性:position position 默认值:static,静态定位(不定位) relative:相对定位 absolute:
阅读全文
摘要:浮动 视觉格式化模型,大体上将页面中盒子的排列分为三种方式: 1. 常规流 2. 浮动 3. 定位 应用场景 1. 文字环绕 2. 横向排列 浮动的基本特点 修改float属性值为: left:左浮动,元素靠上靠左 right:右浮动,元素靠上靠右 默认值为none 1. 当一个元素浮动后,元素必定
阅读全文
摘要:常规流 盒模型:规定单个盒子的规则 视觉格式化模型(布局规则):页面中的多个盒子排列规则 视觉格式化模型,大体上将页面中盒子的排列分为三种方式: 1. 常规流 2. 浮动 3. 定位 常规流布局 常规流、文档流、普通文档流、常规文档流 所有元素,默认情况下,都属于常规流布局 总体规则:快盒独占一行,
阅读全文
摘要:盒模型 box:盒子,每个元素在页面中都会会生成一个矩形区域(盒子,容器) 在游览器按F12或者右击检查可以在Elements的Styles找到盒模型 盒子类型 1. 行盒,display等于inline的元素 行盒在页面中不换行、块盒独占一行 常见的行盒: 2. 块盒,display等于block
阅读全文
摘要:css中的声明冲突和继承 声明冲突:同一个样式,多次应用到同一个元素 层叠:解决声明冲突的过程,游览器自动处理(权重处理) 1. 比较重要性 重要性从高到低: 作者样式表:开发者书写的样式 1)作者样式表中的!important样式 2)作者样式表中的普通样式 3)游览器默认样式表中的样式 2. 比
阅读全文