flex布局绝对是我们平常在布局中用的最多的一个属性，我们来看看它在can i use中的浏览器支持度：（截止到2019/11/16） 挖藕，凹森！支持度居然这么好，好到连ie也能支持大部分的flex布局的属性，那接下来我们就看看它的三大招式吧。 基本概念 任何一个元素，无论块级元素还是行内元素，都 ...
分类：
其他好文 时间：
2019-11-16 21:44:25
阅读次数：
81
css * { margin: 0; padding: 0; } img { display: block; } .box { width: 450px; margin: 30px; display: flex; flex-direction: column; position: relative; ...
分类：
其他好文 时间：
2019-11-16 21:34:19
阅读次数：
70
聊聊三栏布局 左右定宽，中间自适应。 效果图： 圣杯布局 <!DOCTYPE html> <html> <head lang="en"> <title>圣杯</title> <style> .container{ padding:0 200px 0 180px; height:100px; } .l ...
分类：
其他好文 时间：
2019-11-16 14:37:11
阅读次数：
44
写一个靠谱的flex布局 <!DOCTYPE html> <html> <style> .block { padding-top: 30%; margin-top: 3%; border-radius: 10%; background-color: orange; width: 30%; } .co ...
分类：
其他好文 时间：
2019-11-16 14:27:21
阅读次数：
125
Grid布局，还是Flex布局？网格布局和Flex布局的差异？有人认为：Flexbox用于一维布局，一行或一列。网格用于二维布局，多行和多列。有的人认为：网格使用真实的列和行，内容会被一列一列、一行一行的排列。但是Flexbox没有，不仅是在二维里面，而且在一维里面也是如此。Flexbox并不适用于... ...
分类：
其他好文 时间：
2019-11-14 09:40:23
阅读次数：
77
网页布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,下面一一详述。 水平居中 效果 3.position:absolute; 这种方法也需要固定元素的宽度. 效果 4.flex 效果 垂直居中 1.一行文字垂直居中 效果 2.未知高度元素居中 第一种方法 第二种方法 效果 3.高度已知垂 ...
分类：
Web程序 时间：
2019-11-13 16:40:34
阅读次数：
79
弹性布局的名称概念：1、容器：需要添加弹性布局的父元素；项目：弹性布局容器中的每一个子元素，称为项目。2、主轴：在弹性布局中，我们会通过属性规定水平/垂直方向（flex-direction）为主轴；与主轴垂直的另一方向，称为交叉轴。弹性布局的重要的几大基础属性：1、flex-direction属性决定主轴的方向（即项目的排列方向）。row（默认值）：主轴为水平方向，起点在左端；row-revers
分类：
Web程序 时间：
2019-11-10 20:59:39
阅读次数：
130
解析四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。 浮动 <style type="text/css"> .wrap {background: #eee; padding: 20px; } p {margin: 0; } .left {width: 200px; height: 20 ...
分类：
Web程序 时间：
2019-11-10 13:56:52
阅读次数：
121
基本的等分三列布局 .container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; } .middle{ flex:1; background: green; } .right{ fl ...
分类：
其他好文 时间：
2019-11-10 13:39:21
阅读次数：
78
弹性布局的名称概念：1、容器：需要添加弹性布局的父元素；项目：弹性布局容器中的每一个子元素，称为项目。2、主轴：在弹性布局中，我们会通过属性规定水平/垂直方向（flex-direction）为主轴；与主轴垂直的另一方向，称为交叉轴。弹性布局的重要的几大基础属性：1、flex-direction属性决定主轴的方向（即项目的排列方向）。row（默认值）：主轴为水平方向，起点在左端；row-revers
分类：
Web程序 时间：
2019-11-10 09:59:57
阅读次数：
105
