![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
布局
是瑞瑞小甜心
这个作者很懒,什么都没留下…
展开
-
响应式布局
响应式布局响应式布局的原理是在不同屏幕下,通过媒体查询来改变布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化 .container { height: 150px; background-color: pink; margin: 0 auto; } /* 1. 超小屏幕下 小于 768 布局容器的宽度为 100% */原创 2021-12-09 21:21:31 · 185 阅读 · 0 评论 -
百分比布局
流式布局流式布局即百分比布局视口国内移动端浏览器大多根据webkit内核修改视口就是浏览器显示页面内容的屏幕区域,布局视口(980),视觉视口(区域),理想视口 <meta charset="UTF-8"> <!-- 标准写法 --> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, u原创 2021-12-09 21:21:12 · 94 阅读 · 0 评论 -
rem布局
rem布局1.lessLess 是一门 CSS 预处理语言,它扩展了CSS的动态特性less安装:1.下载安装nodejs2.查看nodejs是否安装成功(node -v)3.在nodejs(cmd)中安装less(npm install -g less)4.查看less是否成功安装(less -v)less使用:新建less文件less编译:通过easyless插件将less文件生成css文件/* less变量:在上面定义变量(不可用数字开头,不可用特殊字符命名,区分大小写)原创 2021-12-09 21:17:27 · 77 阅读 · 0 评论 -
flex布局
flex布局通过给父盒子(容器)添加flex属性,来控制子盒子(项目)的位置和排列方式给父亲设置了flex布局之后,子元素的float、clear 和 vertical-align 属性将失效flex布局父项常见属性.flex-bj { display: flex; flex-direction: row;/*1. flex-direction为设置主轴方向,默认为row横轴(x轴)排列,从左到右 */ /* flex-direction: row-reverse; */原创 2021-12-09 21:16:50 · 197 阅读 · 0 评论