一.简介 弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。 容器： 需要添加弹性布局的父元素； 项目： 弹性布局容器中的每一个子元素，称为项目； 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴； 交叉轴： 与主轴 ...
分类：
其他好文 时间：
2019-09-11 13:30:51
阅读次数：
75
CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来。 水平居中 1.1内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素 ...
分类：
Web程序 时间：
2019-08-29 09:36:48
阅读次数：
118
bootstrap中modal模态框实现在页面中水平垂直居中的方法 http://www.sunqizheng.com/blog/251.html CSS transform: translate(-50%,-50%)导致的像素模糊问题解决办法 https://blog.csdn.net/qq_20 ...
分类：
其他好文 时间：
2019-08-19 17:12:19
阅读次数：
73
父级给相对定位，子级给绝对定位，margin设置为auto，上下左右值设为0。 父级给相对定位，子级给绝对定位，设置left和top为50%，再向左和向上移动负的子级一半。 父级设置display:flex;justify-content: cneter;align-items: center; 父 ...
分类：
Web程序 时间：
2019-08-17 01:13:35
阅读次数：
176
当 display: flex 配合 justify-content: center 使用时可以让view水平居中 而配合 align-items: center 用时可以实现垂直居中效果 .card-image-container{ width: 40%; height: 90%; align-i ...
分类：
微信 时间：
2019-08-16 10:31:16
阅读次数：
2190
面试比较重基础！ a、html部分： 内联标签、块级标签有哪些？两者的区别是什么？行内块元素有哪些？ html5新增的语义化标签有哪些？ b、CSS部分： 布局：position + flex 获取DOM元素的方法有哪些？ 块级元素居中？水平垂直居中的方法？不知道元素宽高情况下，如何实现水平垂直居中 ...
分类：
其他好文 时间：
2019-07-28 17:46:45
阅读次数：
104
盒模型 如何实现一个最大的正方形 用 撑开边距 一行水平居中，多行居左 水平垂直居中 贴上腾讯大佬的一篇文章： "16种方式实现水平居中垂直居中" 两栏布局，左边固定，右边自适应，左右不重叠 flex做自适应布局很容易，但兼容性不好，这里统一不用flex布局 如何实现左右等高布局 布局兼容性最好，当 ...
分类：
Web程序 时间：
2019-07-20 14:34:32
阅读次数：
129
原文:www.zhangxiyu 一、CSS下兼容性的元素水平/垂直翻转实现 随着现代浏览器对CSS3的支持愈发完善，对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能。相关的CSS代码如下： /*水平翻转*/ .flipx { -moz-transform:scaleX(-1); ...
分类：
Web程序 时间：
2019-07-19 20:48:10
阅读次数：
135
通常在设置绝对定位元素相对于其定位的祖先元素水平垂直居中时，通过绝对定位元素设置margin:auto; top:0; bottom:0; right:0; left:0;就可以实现。下面简单探索一下绝对定位元素这么设置就可以实现水平居中和垂直居中的原理。 核心CSS代码： 绝对定位元素的布局由元素 ...
分类：
其他好文 时间：
2019-07-17 18:30:20
阅读次数：
131
