css
Formattor
这个作者很懒,什么都没留下…
展开
-
CSS3转换
2D translate /* 移动x→,y↓ */ /* 百分号移动距离是盒子自身的比较 */ transform: translate(100px,100px); transform: translateX(100px); transform: translateY(100px); 优点:不影响其他盒子位置 缺点:对于行内元素无效 rotate /* deg一定要带单位 */ transform: rotate(45deg); transition: all 0.2s; /* 旋转中心:像素,单原创 2021-04-09 20:55:47 · 65 阅读 · 0 评论 -
CSS3选择器
属性选择器 // 选择既是button 又有disabled属性 的按钮 button[disabled]{ cursor:default; } 类选择器,属性选择器,伪类选择器 权重为10 属性 写法 属性 button[disabled] 属性名 div[type=‘search’] 属性开头 div[class^=‘icon’] 属性结尾 div[class$=‘icon’] 属性包含 div[class*=‘icon’] 结构伪类选择器 介绍 写法原创 2021-04-01 10:04:41 · 61 阅读 · 0 评论 -
浮动/定位
浮动 浮动(float) 传统网页的布局方式 标准流 标签按默认方式排列 浮动 浮动可以让块状元素在一行显示 浮动会浮在上一个浮动的旁边 定位 浮动特性 浮动元素会脱离标准流,不再保留原来的位置 浮动元素会一行内显示并且在元素顶部对齐 浮动元素具有行内块元素的特性 注:行内元素给宽高是无效的,转换成块或者行内块或者浮动 浮动元素常和标准流的父元素搭配使用 清除浮动 当父盒子没高度的时候,浮动元素不占高度,此时父元素高度为0 ...原创 2021-03-29 20:38:23 · 99 阅读 · 0 评论 -
flex
flex布局原理 通过给父元素添加flex属性,来控制子元素的位置和排列 常见父元素属性 flex-direction 设置主轴方向,默认x 操作 代码 默认 flex-direction:row 反转 flex-direction:row-reverse 竖直 flex-direction:column 竖直反转 flex-direction:column-reverse justify-content 设置主轴上子元素的排列方式 操作 代码 默认 just原创 2021-03-27 10:15:32 · 68 阅读 · 0 评论 -
开发CSS相关
开发 项目背景图 html,body{ margin: 0; padding: 0; height: 100%; width: 100%; /*不复制图片且图片居中*/ background: url(..) no-repeat center; background-size: cover; } 表单居中 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);原创 2021-03-24 20:56:03 · 60 阅读 · 0 评论