-webkit-box-flex: 1;属性和 float 属性冲突造成元素看不见的BUG

今天切图的时候发现了这个问题,样式是这样的:

.check-btns-box .check-btn{float: left;-webkit-box-flex: 1;-moz-box-flex: 1;-ms-flex: 1;width: 100%;color: white;height: 100%;}

虽然此时元素显示为块状元素,且用谷歌浏览器审查元素会显示出元素的宽高,但是依然看不见, 然后去掉float:left;之后就能正常显示了。

时间: 2024-10-09 23:39:15

-webkit-box-flex: 1;属性和 float 属性冲突造成元素看不见的BUG的相关文章

CSS中的Position属性和Float属性

Css中的position很重要,常用有以下几个值:static,relative,absolute,fixed.Inherit. Static:静态定位.如果你没有设置position属性,那么缺省就是static.top.left.right.bottom等 属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一. Relative:相对定位.元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍会分 配给他,他两边的元素不会向它靠近来填

css中float属性和position

css中float属性: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 默认值: none 继承性: no 版本: CSS1 JavaScript 语法: object.styl

Webkit Box 模型属性备忘

-webkit-box-orient: horizontal||vertical 设置或检索弹性盒模型对象的子元素的排列方式.对应的脚本特性为boxOrient.需设置容器的display:-webkit-box; CSS样式: html,body,div{ margin:0px; padding:0px;} .orient{display:-webkit-box;-webkit-box-orient:horizontal; width:600px; margin:0 auto;} .orien

CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)

display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group |  |  |  |  |  | |  默认值:inline 适用

详解CSS float属性

CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的应用,出现的问题和解决方案. 基础知识 float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设置了float属性的元素为浮动元素.浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕.举例说明如下:Html代码: 1 <div

原创:新手布局福音!微信小程序使用flex的一些基础样式属性

来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明. 先来看看关于flex的一张图: 从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者纵轴排列的顺

CSS float属性小解——”浮“生若水

学习CSS一段时间了,抽时间总结一下,算是对内容的一个回顾和分享.如果有什么讲的不好的,但求轻喷~~~ 一.float是什么 回答float是什么这个问题,最好的答案莫过于官方回答,故而在此先引用一段W3C官方文档: Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right

CSS入门:CSS中Position、Float属性深入探讨

文章来源:http://www.zretc.com/technologyDetail/430.html Position.Float是平时使用频率非常高的两个CSS属性,对于这两个属性的使用,可能大多数人存在一些模糊与不清晰的地方.今天小卓为大家分享的文章主要是对这两个属性使用上的介绍,以及两个属性交叉使用上的一些探讨. 1.HTML布局的基本要点 如果要掌握.运用好Position.Float属性必须要对HTML的两个基本点有清晰的了解. 盒子模型(box model) HTML的普通流(no

对CSS中的Position、Float属性的一些深入探讨

非常好的一篇文章,特此转载出来,文章转自:http://www.cnblogs.com/coffeedeveloper/p/3145790.html 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方.本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨. 本文主要探讨点: Position.Float属性的基本使用方法 Position.Float属性对元素所造成的影响 Posi