注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。 1.指定flex布局: .box{ display: flex; }行内元素.box{display: inline-flex;} 2.容器的属性: flex-direction:该属性决定主轴 ...
分类:
其他好文 时间:
2019-11-19 13:43:37
阅读次数:
56
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/qydvBm 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https ...
分类:
Web程序 时间:
2019-11-19 00:40:47
阅读次数:
84
<!-- 组件 custom-component.wxml --> <view class='flex commonHead top' style='color:{{navbarBg.topColor == "#ffffff"?"#000000":"#ffffff"}};background-col... ...
分类:
微信 时间:
2019-11-18 10:06:43
阅读次数:
107
一、% 理解: %号是CSS中的常用单位,它是相对于父容器而言的。如:一个父容器的宽是100px,给它的子元素一个10%,那么子元素的宽就是100px的10% 10px。 效果图: (利用%设置了li 的宽) 代码: <!DOCTYPE html> <html lang="en"> <head> < ...
分类:
Web程序 时间:
2019-11-17 10:40:48
阅读次数:
53
一、弹性布局 弹性布局,又称“Flex布局” 1、弹性布局的使用 给父容器添加display: flex/inline-flex;属性,即可使容器内容采用弹性布局显示,而不遵循常规文档流的显示方式 容器添加弹性布局后,仅仅是容器内容采用弹性布局,而容器自身在文档流中的定位方式依然遵循常规文档流; d ...
分类:
其他好文 时间:
2019-11-17 10:31:22
阅读次数:
101
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