![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
css学习记录
kattiekattie
这个作者很懒,什么都没留下…
展开
-
CSS:flex和inline-flex的区别
flex: 将对象作为弹性伸缩盒显示 inline-flex:将对象作为内联块级弹性伸缩盒显示 flex:父元素的尺寸不由子元素尺寸动态调整,不设置时默认是100% inline-flex :则会使父元素尺寸跟随子元素们的尺寸动态调整 ...原创 2020-02-26 11:51:07 · 958 阅读 · 0 评论 -
CSS:利用flex实现底部footer始终在页面底部
CSS: .top{ flex: 0 0 auto; } .fixed-box{ flex: 0 0 auto; } .blank-box{ flex: 1 0 auto; } .footer{ flex: 0 0 auto; } 思路:中间给一块可以自由伸缩的模块 第一次使用 我是直接定义了一个空模块可伸缩: <div style="flex: 1 0 a...原创 2020-01-02 16:32:40 · 890 阅读 · 0 评论 -
CSS:移动端rem与px的转换
px 相对于显示器屏幕分辨率 rem 相对的是HTML根元素 ( 一般默认根元素的font-size为16px , 那么就是 1rem = 16px ) 目的是自适应各种移动端 目前除了低版本IE,各浏览器都已支持 实际使用中转换 1.VS中的插件:cssrem 安装完成后,可在file-preferences-setting中调整根元素的font-size (手动调整换算比例) 2.les...原创 2019-09-26 14:24:19 · 393 阅读 · 0 评论 -
CSS:预处理器之Less
less是在css的基础上进行扩展 可将css直接转换成less,而less需要编译 在小型项目中感觉还是直接使用css更为便捷 less文档(https://less.bootcss.com) Node.js 环境中使用 Less : npm install -g less lessc styles.less styles.css 在浏览器环境中使用 Less : <link rel=...原创 2019-07-17 15:16:52 · 107 阅读 · 0 评论 -
CSS:元素居中方法总结
子元素绝对定位 用偏移量固定在中间 (父元素相对定位,将left改为margin-left) position:absolute; left:50%; transform:translate(-50%) 配合绝对定位实现水平和垂直居中 position:absolute; margin:auto 采用弹性布局,横轴和竖轴居中 display:flex; align-i...原创 2020-01-02 16:12:36 · 87 阅读 · 0 评论