css
Formattor
这个作者很懒,什么都没留下…
展开
-
CSS3转换
2Dtranslate/* 移动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 · 78 阅读 · 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 · 73 阅读 · 0 评论 -
浮动/定位
浮动浮动(float)传统网页的布局方式标准流标签按默认方式排列浮动浮动可以让块状元素在一行显示浮动会浮在上一个浮动的旁边定位浮动特性浮动元素会脱离标准流,不再保留原来的位置浮动元素会一行内显示并且在元素顶部对齐浮动元素具有行内块元素的特性 注:行内元素给宽高是无效的,转换成块或者行内块或者浮动浮动元素常和标准流的父元素搭配使用清除浮动当父盒子没高度的时候,浮动元素不占高度,此时父元素高度为0...原创 2021-03-29 20:38:23 · 115 阅读 · 0 评论 -
flex
flex布局原理通过给父元素添加flex属性,来控制子元素的位置和排列常见父元素属性flex-direction设置主轴方向,默认x操作代码默认flex-direction:row反转flex-direction:row-reverse竖直flex-direction:column竖直反转flex-direction:column-reversejustify-content设置主轴上子元素的排列方式操作代码默认just原创 2021-03-27 10:15:32 · 80 阅读 · 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 · 70 阅读 · 0 评论