随笔分类 -  前端-各种布局

华丽的蜕变
响应式的使用？
摘要：1、CSS3提供的：媒体查询 媒体：设备：PC/PAD/PHONE/TV... 可以使用css对设备进行一个查询，对不同的设备设置不同的css样式 - 使用起来可能略微有点点麻烦，以后才会简化 如何使用： @media screen and (min-width: 1280px ) {/*最小宽度只 阅读全文
posted @ 2021-08-16 13:23 rigorous 阅读(99) 评论(0) 推荐(0)
css 响应式
摘要：什么是响应式网页？ 响应式网页：一套网页，可以再手机端或PC端或pad都可以无障碍的阅读 阅读全文
posted @ 2021-08-16 13:21 rigorous 阅读(113) 评论(0) 推荐(0)
grid布局(grid的属性)？
摘要：1、基本的网格布局 display: grid;//准备开始要使用网格布局了 grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; //3行3列，宽度高度都为100px的网格布局 //目前使用 阅读全文
posted @ 2021-08-16 12:52 rigorous 阅读(307) 评论(0) 推荐(0)
什么是grid布局？
摘要：grid布局（网格布局） 它将网页划分成了一个网格，可以任意组合不同的网格，做出各做各样的布局 grid 和 flex 有一点点类似，但是不是完全相同： flex 是轴线布局 grid 是【行和列】布局 - 有一点点类似table，但是比他强大得多 阅读全文
posted @ 2021-08-16 12:50 rigorous 阅读(229) 评论(0) 推荐(0)
弹性盒模型的使用(子级元素)？
摘要：子元素的属性： 1、flex-grow: 数字;//占宽度/高度的比例 2、修改元素的先后顺序，操作更加优雅 order: 数字;//数字代表先后顺序 3、单独元素的对齐方式： align-self: flex-start/flex-end/center; 4、弹性子元素的宽度： flex-basi 阅读全文
posted @ 2021-08-16 12:46 rigorous 阅读(129) 评论(0) 推荐(0)
弹性盒模型的使用(父级元素)？
摘要：父元素上的css属性 1、将元素转为弹性盒模型 语法：display: flex; 强调：1、此语句必须设置在父元素上，效果看上去类似display:inlin-block; 2、会导致float失效、vertical-align失效 - 也不需要了 2、弹性盒模型可以设置对齐方式 语法：justi 阅读全文
posted @ 2021-08-16 12:45 rigorous 阅读(180) 评论(0) 推荐(0)
什么是弹性盒模型？
摘要：弹性盒模型：简单来说他可以简化我们的布局方式 - 更简化 随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方式，对于特殊布局来说实现起来会比较麻烦 - 比如：垂直居中 2009年，w3c提出了一个新的方案 - flex布局，可以简便、完整、实现各种各样的布局， 目前，所有的浏览器都支 阅读全文
posted @ 2021-08-16 12:40 rigorous 阅读(174) 评论(0) 推荐(0)