在flex出现之前我们做页面都是使用的左右浮动,inline-block,表格等布局方式来实现页面的各种布局,在这些写法中由于浏览器的兼容问题还需要写很多的hack来解决兼容问题。','2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已... ...
分类:
Web程序 时间:
2020-05-31 10:49:47
阅读次数:
83
现在有flex布局等新技术,bfc的效果比如包住元素,进行自适应布局等已经不需要了。现在只有免式的事后才需要知道BFC! 看不懂的定义 CSS规范中对 BFC 的描述 9.4.1 块格式化上下文 浮动,绝对定位元素,非块盒的块容器(例如,inline-blocks,table-cells和table ...
分类:
Web程序 时间:
2020-05-31 10:46:40
阅读次数:
79
前言:这是我看过最好的flex布局教程:30分钟彻底弄懂flex布局 传统的布局方法与flex属性通览 文档流:块级元素独占一行,从上往下排列,行级元素从左往右排列。 display inline-block主要用来做横向的布局。用分离负maigin用来产生位移。 元素的布局 学习flex我分成两个 ...
分类:
Web程序 时间:
2020-05-31 10:41:32
阅读次数:
75
1.1 前言 今天给学习开发的朋友推荐一款逆天神器FLEX. 虽然我是一名Java后端研发但是总免不了需要给移动端写Restful API,联调测试总是一件非常麻烦的事情。 1.2 FLEX 简介 那么FLEX 到底可以做什么呢? FLEX可以用来联调测试移动端API,也可以用来学习大厂App的写法 ...
分类:
移动开发 时间:
2020-05-30 10:51:24
阅读次数:
122
帮你熟悉Flex布局,帮你生成样式 https://flexbox.tech ...
分类:
其他好文 时间:
2020-05-29 23:22:44
阅读次数:
62
Flex 与 Grid ★ Flex √ Flex 属性 √ Flex 实例 ★ Grid √ Grid 属性 √ Grid 实例 Flex flexbox: 弹性盒子布局 ? 属性 属性名 属性含义 属性值 定义在容器上的属性 flex-direction 决定主轴的方向 row: (默认) 水平 ...
分类:
其他好文 时间:
2020-05-28 23:54:52
阅读次数:
126
<template> <div class="casehistory"> <jzrlist :isup="isup" :lastOrder="lastOrder" :djs="djs" @getjzrinfo="getjzrinfo"></jzrlist> <div class="classCase ...
分类:
其他好文 时间:
2020-05-28 19:57:09
阅读次数:
107
BFC的定义 BFC到底是个啥呢?先贴出一段大佬们在分析BFC的时候字面上的理解: 在CSS布局中,是通过对一个个box的布局,来实现整体页面的布局,这一个个box也就是一个个容器元素,这些元素分为两类:块级元素(block),行内元素(inline)。 对于不同类型的元素,有不同的处理规则,这个元 ...
分类:
其他好文 时间:
2020-05-28 00:48:54
阅读次数:
86
首先是弹性盒布局:dispaly:flex;和display:inline-flex;(两个元素会在一行显示,类似于块状元素和行内块元素的区别) 1.设置成弹性盒后,所有的元素都会在主轴上排列,默认x轴为主轴,与主轴垂直的为侧轴 2.如果父元素设置成了弹性盒,想让子元素在弹性盒上下左右居,子元素只需 ...
分类:
其他好文 时间:
2020-05-26 22:13:49
阅读次数:
102
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0;padding:0; } .container{ display: flex; hei ...
分类:
其他好文 时间:
2020-05-26 20:33:35
阅读次数:
64