昨天面试被问到这个问题，自己常用的是方法一和方法二，回来后查阅到了方法三，感觉莫名的好用，记录一下~ 方法一：单行文字垂直居中 line-height等于height 方法二：块级元素垂直居中 position定位或者flex布局 水平居中 margin: 0 auto;+垂直位移position: ...
分类：
其他好文 时间：
2019-08-21 14:01:29
阅读次数：
96
垂直居中的几种方法 html结构 css 1. 使用flex布局 在父容器中设置 2. 绝对定位 分为已知宽高和未知宽高两种情况 已知宽高都是100px，设置自身为绝对定位（absolute），top和left为50%，margin left、margin top为自身的一半，也就是50px 未知宽 ...
分类：
Web程序 时间：
2019-08-20 22:25:48
阅读次数：
127
一、什么是Flex布局？ Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 任何一个容器都可以指定为Flex 布局。 二、容器的属性 以下6个属性设置在容器上。 flex direction flex wrap flex flow justify c ...
分类：
其他好文 时间：
2019-08-16 18:31:39
阅读次数：
92
flex布局极大程度上方便了页面的构建，如下的几种布局当中，为了不增加额外的标签来嵌套，单独使用flex布局的话，还需要其他一些设置来处理，比如与伪元素的配合使用，这个下次再进行描述，这里flex与margin的使用配合，个人认为是目前自己用过最方便的一种方法。 参考链接: 你未必知道的49个CSS ...
分类：
其他好文 时间：
2019-08-16 15:48:59
阅读次数：
67
弹性盒子布局方式：.box{ display:flex;}@设为Flex布局后，子元素的float、clear和vertical-align属性将失效@采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目 ...
分类：
其他好文 时间：
2019-08-09 11:51:11
阅读次数：
109
弹性布局简介： 弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。 可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 >>> 了解两个基本概念，接下来会频繁提到： ① 容器： 需要添加弹性布局的父元素； ② 项目： 弹 ...
分类：
其他好文 时间：
2019-07-26 14:33:45
阅读次数：
82
{ "usingComponents": {}, "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#0e0e0e", "navigationBarTitleText": "Music Player", "navigati... ...
分类：
微信 时间：
2019-07-22 09:35:01
阅读次数：
140
对于 flex-shrink 我们都知道它在 flex 布局中控制 flex 盒子空间不足时子元素改如何收缩，平常开发中更多的是使用默认值 1 或者设置 0。那设置其他值的时候会有什么效果呢，不少文章中描述都不是很细，在很长一段时间我甚至以为自己是了解它的。开篇我们带着几个问题1. “flex-sh ...
分类：
其他好文 时间：
2019-07-20 17:00:17
阅读次数：
92
盒模型 如何实现一个最大的正方形 用 撑开边距 一行水平居中，多行居左 水平垂直居中 贴上腾讯大佬的一篇文章： "16种方式实现水平居中垂直居中" 两栏布局，左边固定，右边自适应，左右不重叠 flex做自适应布局很容易，但兼容性不好，这里统一不用flex布局 如何实现左右等高布局 布局兼容性最好，当 ...
分类：
Web程序 时间：
2019-07-20 14:34:32
阅读次数：
129
0.基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 1.传统固定布局： 实现方法：用width和height指定宽高px值、以及float浮动 缺点： ...
分类：
其他好文 时间：
2019-07-11 12:33:03
阅读次数：
79
