最近在总结前端知识，也参加了一些面试，面试中遇到一道题要求垂直水平居，现在对这进行一下总结，也好巩固一下知识。 方案一、flex布局 方案二、margin：auto 这里的section设置任意的高度和宽度都可以实现水平垂直居中的效果。 方案三、transform 使用transform方式可居中任 ...
分类：
Web程序 时间：
2018-06-23 22:45:28
阅读次数：
251
1.边框渐变 如： .arrow div {transition: border-color 0.5s ease-in-out; } .arrow div:hover {border-color: #009688; } 2.display的flex属性使用详解 flex的兼容性在pc端还算阔以，但是 ...
分类：
Web程序 时间：
2018-06-18 18:26:16
阅读次数：
205
想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这里涉及到两个属性，一个是line-height，另一个是vertical-align。在IE里面，只 ...
分类：
Web程序 时间：
2018-06-18 17:14:07
阅读次数：
288
制作一个如下表格： 1. 插入一个4x4的表格或者手动绘制一个4x4表格。 1.1插入一个4x4表格或者绘制表格的按钮如下图所示 绘制表格，自己手动画比较复杂的表格 1.2对插入的表格： 点击表格的右下角 可以整体拖动表格的宽度和高度。 1.3每个单元格写入相关的文字内容：写完之后，留言内容表格选中 ...
分类：
其他好文 时间：
2018-06-16 15:09:18
阅读次数：
189
给元素添加display: flex;属性 垂直居中 align-items:center; 水平居中 justify-content:center; ...
分类：
其他好文 时间：
2018-06-14 14:25:15
阅读次数：
190
HTML: CSS: 效果图如下： 未换行： 换行后如下： ...
分类：
其他好文 时间：
2018-06-11 17:13:44
阅读次数：
149
利用HTML和CSS实现常见的布局 单列布局 水平居中 水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素） 使用inline-block 和 ...
分类：
Web程序 时间：
2018-06-10 18:57:34
阅读次数：
213
1.多个子元素同时设置浮动后，欲想实现水平垂直居中，实现代码如下： 2.使用flex布局（有兼容性） 3.垂直居中使用display: table cell; vertical align: middle; 水平居中：嵌套一层div,设置宽度为子元素宽度，在设置margin: 0 auto; ...
分类：
其他好文 时间：
2018-06-06 15:17:11
阅读次数：
146
.a{ position: relative; } .b{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .a{ display: table; } .b{ display: table-ce ...
分类：
Web程序 时间：
2018-06-03 10:49:06
阅读次数：
190
