css属性应用bug大杂烩(后续继续更新)
一、Flex布局使用时的坑：
1、常见的左右分布的flex布局中，左侧给定宽度，右侧占满剩余空间，但当右侧中文字内容很多时，会挤占左侧空间，时左侧不能按照定宽显示。
<style>
.father{
display: flex;
width: 500px;
height: 200px;
}
.left{
width: 200px;
background-color: green;
}
.right{
flex-grow: 1;
background-color: red;
}
</style>
<body>
<div class="father">
<div class="left">左边左边边左边左边</div>
<div class="right">右边</div>
</div>
</body>
正确宽度显示如下：
但，当右侧红框内文字变多时：
显然当右侧文字增多，挤占剩余空间时左侧会被压缩，解决方法如下：
1）给右侧添加宽度“width:0;”，指定宽度0后
.right{
flex-grow: 1;
background-color: red;
}
2）给设置了flex-grow属性的元素添加flex-basis属性
.right{
flex-grow: 1;
background-color: red;
flex-basis: 0%;
}
2、flex布局中basis与width的区别，参考链接https://www.jianshu.com/p/17b1b445ecd4
css属性应用bug大杂烩(后续继续更新)的更多相关文章
- IE的CSS相关的BUG(整理一)
本来不想弄这个ie的bug的,真的很想让它快点死掉,可是事与愿违啊,没办法,还是贴出来,以备自用. 这个网页(http://haslayout.net/css/index)上例举了所有的IE和CSS相 ...
- css编写注意事项（不定时更新）
CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...
- CSS属性操作
CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...
- js原生获取元素的css属性
习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...
- CSS的未来：一些试验性CSS属性
尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...
- 关于那些常见的坑爹的小bug（会持续更新）
当我学了矩阵分析的时候我知道什么是麻烦,当我学了傅里叶级数的时候我知道什么是相当麻烦. 然而,当我刚刚接触前端,我才明确什么叫做坑爹的ie6.这个分享对于经验丰富的前端基本都遇过.对于刚入行的新手,也 ...
- 前端基础-CSS属性操作
前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...
- CSS 属性选择器的深入挖掘
CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
- 《Head First HTML与CSS》的CSS属性
关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...
随机推荐
- op 和 oo 的区别
本是之前一位前辈留下的问题,因为我不是程序出身,略懂一些代码,后又查了很多人的博客,问了周围搞开发的朋友,得出以下结论: 有人这么形容OP和OO的不同:用面向过程的方法写出来的程序是一份蛋炒饭,而用面 ...
- MVC4 中的Model显示设置(含显示Shared/DisplayTemplates和编辑Shared/EditorTemplates)
转载于: MVC4 中的Model显示设置(含显示Shared/DisplayTemplates和编辑Shared/EditorTemplates) 虽然 [Display(Name="XX ...
- 详解设计模式在Spring中的应用
设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆. 今天,在IT学习者网站就设计模式的内在价值做一番探讨,并以spring为例进行讲解,只有领略了其设 ...
- ReentrantLock源码
ReentrantLock与Synchronized区别在于后者是JVM实现,前者是JDK实现,属于Java对象,使用的时候必须有明确的加锁(Lock)和解锁(Release)方法,否则可能会造成死锁 ...
- iOS 与 Swift 方法互相调用
1.OC调用swift 在OC项目中创建一个swift文件时,Xcode会提示 需要创建一个桥接文件,点击确定创建桥接文件,Xcode会自动创建一个桥接文件,名字:工程名-Bridging-Heade ...
- 【搭建】MongoDB在Linux环境的搭建
环境:Linux CentOS6.5,mongo 4.1.6 一.下载安装 1.创建mongo的安装文件夹,以及安装包上传路径 mkdir /opt/module mkdir /opt/softwar ...
- springboot2.0 JPA配置自定义repository，并作为基类BaseRepository使用
springboot2.0 JPA配置自定义repository,并作为基类BaseRepository使用 原文链接:https://www.cnblogs.com/blog5277/p/10661 ...
- Node.js进程内存使用查看方法及返回对象的含义
1 前言 使用process.memoryUsage() ,然后可以得到一个对象如下: var mem = process.memoryUsage(); console.log(mem); 结果: { ...
- sunset
may there be enough clouds in your life to make a beautiful sunset
- C#数组--(Array类的属性和方法)
Array 类是 C# 中所有数组的基类,它是在 System 命名空间中定义.Array 类提供了各种用于数组的属性和方法,可看作扩充了功能的数组(但不等同数组),可以使用Array类的属性来对数组 ...