css日常积累
2019-01-17 09:22
447 查看
1.text-align:justify;不起作用是怎么回事?
转载自: https://segmentfault.com/q/1010000007136263
为什么单独设置text-align:justify;不起作用,非要在后面加一个内联块状元素宽度为100%的才可以?
<p class="center">我是两端对齐文字端对齐文字<span></span></p>
css样式
.center{ text-align:justify; } span{ display:inline-block; width:100%; }
原因是:
这个是因为text-align不会处理被打断的行和最后一行。因为你这里的文字只占了一行,所以也是最后一行了,所以text-align设置为justify不会产生任何效果。
解决方法是使用text-align-last,并将其设置为justify。
不过不幸的是,text-align-last不是所有浏览器支持。
(2020年的支持也不是太好 https://caniuse.com/#search=text-align-last)
所以对于不支持text-align-last的,可以在最后一行人工生成两行文本,然后把第二行隐藏了,那么我们要现实的第一行自然就可以实现两端对齐了。
而你的span是inline-block,也可以设置宽度(100%),那么这个时候内联匿名盒的宽度超过行盒,浏览器会将其拆成两行,自然第一行文本的text-align效果就生效了。你的实现刚刚好是上面的第二个实现方法。
也有另外一种css写法:
span:after { content:''; width: 100%; display: inline-block; overflow: hidden; height: 0; }
虽然以上2种写法都实现了单行文字的两端对齐。
由于多设置了一行空的span,那么处理的折衷方法就是为.center设置一个合适固定的高度并且overflow:hidden来移除空行的span
2.为适配不同终端机型的屏幕宽度和像素密度,我们一般会使用如下方法设置图片的CSS样式:
<style> img{ max-width:100%;//意思是不超出父元素的宽度,但是最大的宽度不会超过自身宽度。就是图片只能缩小,不能放大 height:auto; } </style>
相关文章推荐
- oracle(索引的日常无序积累)
- Android开发中的日常积累
- css布局的小知识点积累(持续更)
- [HTTP/CSS学习日常]CSS基础
- css积累
- 日常工作积累
- css积累
- C# 之 日常积累(一)
- CSS日常公用样式与一些解决方案
- C/C++ 日常小积累
- CSS日常随笔:BFC块级格式上下文
- 日常知识点积累
- android日常使用积累
- 苹果浏览器和uc浏览器在移动端的坑(日常积累,随时更新)
- CSS常用样式总结积累
- Linux日常使用的一些积累
- 前端开发JS、CSS的一些用法积累()
- Emacs月月积累(终结篇):熟练使用org-mode管理日常事务
- Android 开发中的日常积累