Flex是Flexible Box的缩写,意为“弹性布局”。弹性布局提供了一种更加有效的方式来对一个容器内的项目进行排列/对齐/分配空间等操作,让盒模型具有更大的灵活性。在一个容器盒子上添加display:flex/inline-flex使其变成弹性布局。 .box{ display: flex;} ...
分类:
其他好文 时间:
2018-05-13 15:37:44
阅读次数:
149
弹性布局(Flexible Layout) 1、什么是弹性布局 弹性布局(Flexible Layout),是一种布局方式,是一种解决某元素中"子元素"的布局方式 2、flex的容器 将元素变为flex容器后,那么所有的子元素都将成为flex项目,都允许按照弹性布局的方式来排列 如何将元素变为 fl ...
分类:
其他好文 时间:
2018-05-13 12:05:05
阅读次数:
146
将这些添到css文件中基本上能满足页面弹性盒子的需求 /*定义弹性布局盒子*/ display:{ } /*定义子元素排列*/ ...
分类:
其他好文 时间:
2018-05-12 18:28:01
阅读次数:
468
display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀;display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏 ...
分类:
其他好文 时间:
2018-05-12 17:33:41
阅读次数:
260
CSS flex布局 CSS flex布局 1. 介绍 1.1 说明 flex布局,也称为flex弹性布局;主要目的是使item的宽度、高度按一定顺序填充父容器的可用空间。 示例 注意:在下文中,将以parent指代父容器,item指代容器内的项。 1.2 浏览器支持情况 IE 11才完全支持fle ...
分类:
其他好文 时间:
2018-05-12 13:48:53
阅读次数:
177
flex容器属性详解:flex-direction:决定元素的排列方向;flex-wrap 决定原色如何换行(排列不下时);flex-flow是: flex-direction 和 flex-wrap的简写;justify-content 元素在主轴上的对齐方式;align-items 元素在交叉轴 ...
分类:
其他好文 时间:
2018-05-11 13:07:34
阅读次数:
249
一、浮动 1.浮动特点:脱离文档流,向左/向右浮动直到遇到父元素或者别的浮动元素,浮动会导致父元素高度坍塌。 2.清除浮动:clear和bfc 二、Flex布局 1,意为弹性布局,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 2,容器的属性(其中io ...
分类:
Web程序 时间:
2018-05-06 18:57:47
阅读次数:
189
flex布局,也称为flex弹性布局了;主要目的是使item的宽度、高度按一定顺序填充父容器的可用空间。本篇将介绍:父元素、子元素可使用的flex属性,以及flex布局应用的场景。 ...
分类:
Web程序 时间:
2018-05-05 15:28:16
阅读次数:
10068
七、盒模型 在css中盒模型被分为两种,第一种是w3c的标准盒模型,另一种是IE6混杂模式的传统模型。他们都是对元素计算尺寸的模型。但他们的不同是计算的方式不同。 ①W3C标准盒模型 clientWidth= width + padding + border; ②IE6混杂模式盒模型 clientW ...
分类:
Web程序 时间:
2018-05-04 14:02:05
阅读次数:
241
前端,特别是移动端如果对视觉还原要求比较高的时候。功能测试和性能测试完成之后。UI真的是一个像素一个像素的给你抠出来哪里还原不到位 之前项目要求还原度要达到98%以上。所以每到视觉还原的时候真的是挺痛苦的,这里记录一些视觉还原不同机型上的一些显示问题。 小程序iOS端1rpx显示2px宽度 小程序i ...
分类:
移动开发 时间:
2018-05-01 00:38:07
阅读次数:
198