方法1：浮动 方法2：绝对定位 方法3：flex布局 方法4：display table-cell 方法5：grid布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>layout</title> <s ...
分类：
其他好文 时间：
2018-10-11 18:43:13
阅读次数：
128
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持 ...
分类：
其他好文 时间：
2018-10-06 14:37:15
阅读次数：
203
小程序的flex布局 view 视图容器。 示例： 在开发者工具中预览效果 scroll-view 可滚动视图区域。 使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。 绑定事件 scroll-into-view（值应为某子元素id，id不能以数字开 ...
分类：
微信 时间：
2018-09-27 20:43:17
阅读次数：
360
Z-index Flex布局 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 基本概念 采用Flex布局的元素，称为Flex容器（flex container） ...
分类：
其他好文 时间：
2018-09-27 20:12:01
阅读次数：
224
高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局 一、文档流 1、什么是文档流 将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素 2、本质 文档流本质是 nomal flow （普通流、常规流） 3、BFC（Block Formattin ...
分类：
其他好文 时间：
2018-09-27 17:06:40
阅读次数：
258
把中间的div 使用 flex 布局实现注意代码与 float实现时的不同 flex布局比较复杂 属性较多，要用熟悉比较要通过一定量的练习才行 ...
分类：
其他好文 时间：
2018-09-26 17:08:57
阅读次数：
167
一个父容器，留个子元素 1、正常情况下 虽然制定了div的宽高，但是他是沾满一行的，所以会换行 2、flex布局之后 因为默认选项，是横着排的，元素都打横了(flex-direction) 这是后压缩一下浏览器，因为width是100%且默认不换行，所以会有变化的 可以看到，随着浏览器不断压缩，元素 ...
分类：
其他好文 时间：
2018-09-23 15:02:15
阅读次数：
244
rem 相当于根元素font size值的倍数。 1rem=根元素font size 2rem=根元素font size 2 div,div,div布局。div，span。加上class，id布局。wrapper。 加背景色，进行调试看效果。 flex布局。 scss布局。 实现效果，实现点击事件。 ...
分类：
其他好文 时间：
2018-09-21 19:50:18
阅读次数：
484
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各 ...
分类：
其他好文 时间：
2018-09-19 16:23:03
阅读次数：
165
1.div的水平居中 2.table-cell实现垂直居中 3.display:flex布局的方式 4.知道div高度和宽度的垂直居中 1.使用绝对定位，高50%，宽50% 2.然后再margin-left div宽度的一半 margin-top div高度的一半 5.不知道div高度和宽度的垂直居 ...
分类：
Web程序 时间：
2018-09-15 11:30:47
阅读次数：
154
