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.基于类的选择器> ...
随机推荐
- linux使用vim打开乱码问题
在windows中编辑好的汉字文本文档,上传到Linux下打开乱码. [root@localhost ~]# rpm -ivh /mnt/Packages/lrzsz-0.12.20-36.el7.x ...
- node.js浅见
看过很多朋友node.js代码敲得很好,但是对于概念还是很生疏.个人认为,代码是树叶,树干搭起来才是王道. 1.简述node.js的适用场景: IIO密集而非计算密集的情景:高并发微数据(比如账号系统 ...
- CentOS 7安装mysql(rpm)
1.检查是否安装了mysql rpm -qa|grep -i mysql centos7默认是安装的mariadb,而安装mysql的话会和mariadb的文件冲突,所以需要先卸载掉mariadb 2 ...
- Prometheus监控学习笔记之Prometheus 2.0 告警规则介绍
0x00 变化 Prometheus 2.0 已经发布一段时间了,从今天开始我将分几篇文章为大家介绍其中的一些变化. 此篇文章主要介绍 2.0 的告警规则声明的新写法. 从 1.x 到 2.0 规则声 ...
- CTF大赛学习第一天！！！（学习中）
- eclipse如何忽略、过滤不需要提交到svn的文件和目录
1.进入navigator视图 2.选中不需要提交到svn的目录或者文件,右键team->添加至svn:ignore 3.如图:
- 大数据开发认知--spark
1. Spark rdd生成过程· Spark的任务调度分为四步 1RDD objects RDD的准备阶段,组织RDD及RDD的依赖关系生成大概的RDD的DAG图,DAG图是有向环图. 2DAG s ...
- 20175312 2018-2019-2 《Java程序设计》第9周学习总结
20175312 2018-2019-2 <Java程序设计>第9周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第九章的学习,主要的学习渠道是PPT,和书的课后习题. 总结如下 ...
- Latex 仅使用 hyperref 包中 \href 的方法
参考: How to ask hyperref works only with href Latex 仅使用 hyperref 包中 \href 的方法 在 .tex 文件的开头使用如下方法引用 hy ...
- mybatis-ehcache整合中出现的异常 ibatis处理器异常（executor.ExecutorException）解决方法
今天学习mabatis时出现了,ibatis处理器处理器异常,显示原因是Executor was closed.则很有可能是ibatis的session被关闭了, 后面看了一下测试程序其实是把sqlS ...