创建可伸缩的图像 img标签省略设置width和height , 在样式表中设置max-width:100% , 创建弹性布局网格 创建弹性布局的关键是使用百分数来设置width,而不要指定固定的宽度值 媒体查询 定义的方式：1）<link rel=''' href="" media=""> 2) ...
分类：
Web程序 时间：
2018-03-16 17:19:28
阅读次数：
230
这里就不写这两种布局的内容了 弹性布局链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网格布局链接：https://www.jianshu.com/p/d183265a8dad 小测试： 用 flex 与 grid 实现如下即可 ...
分类：
Web程序 时间：
2018-03-09 01:46:08
阅读次数：
268
对于一个前端的初学者来说，首先要做好的事就是切页面了，切页面不得不说的就是布局了，布局的重要性不言而喻，为了良好的用户体验，提出了许多不一样的布局：响应式布局，弹性布局，流动布局等等，也流入出了许多的框架。最近在看关于移动端的响应式布局，其中涉及到比较多的就是大小属性的设置：px、vw、vh、%、e ...
分类：
移动开发 时间：
2018-02-24 16:54:28
阅读次数：
239
任何容器都可以使用弹性布局 .box{display: flex;} 行内元素也可以使用弹性布局:.box{display:inline-flex} 一、容器的6个属性:flex-direction flex-wrap flex-flow justify-content align-items fl ...
分类：
其他好文 时间：
2018-02-23 20:40:45
阅读次数：
154
先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中，自己从零开始学习如何开发一个网站，从页面，到后台，当然数据库是大二的必修课 在学习如何编写一个静态页面的时候，完全是自学，自己摸索，所以遇到了很多问题，自己花费了太多时间去解决问题，今天就拿其中一个比较让我头疼的问题来引出今天的话题 当 ...
分类：
其他好文 时间：
2018-02-18 15:03:21
阅读次数：
211
首先，设置伸缩盒的 display 有如下两个属性值： flex：将容器盒模型作为块级弹性伸缩盒显示 inline-flex：将容器盒模型作为内联级弹性伸缩盒显示 代码如下： 弹性布局的八个常用属性： 1.flex-directionflex-direction 属性和旧版本 box-orient ...
分类：
其他好文 时间：
2018-02-13 18:55:18
阅读次数：
217
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取 ...
分类：
移动开发 时间：
2018-02-08 00:21:54
阅读次数：
257
Flex Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局 行内元素也可以设置为flex布局 webkit内核的浏览器必须加上 前缀 设为Flex布局后，子元素的 、`clear vertical align`将 ...
分类：
其他好文 时间：
2018-01-27 22:21:03
阅读次数：
224
网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式 ...
分类：
其他好文 时间：
2018-01-25 15:52:42
阅读次数：
192
2009年，w3c提出一个新的布局，Flex布局。可以简便，完整，响应式的各种页面布局。各种浏览器可以实现，但是有兼容性，IE10+ Flex是flexible box的缩写，意为弹性布局。 任何一个元素都可以指定为flex布局。 .box{ display:flex; } 行内元素也可以是flex ...
分类：
其他好文 时间：
2018-01-24 15:32:25
阅读次数：
166
