三议(巧用:before和inline-block伪元素解决)跨浏览器不定长宽，中心为基点，百分比定位～...

ie6、ie7支持expression，虽然效率不高，但对于解决一些特别的css布局问题非常有用，现代浏览器(chrome|firefox|opera|safari等)支持新的盒模型，以及一些非常有用的css属性，而相对于夹在中间的ie8，可谓比较难处理，幸好ie8相对ie6、ie7支持了一些特性，比如:before/:after伪元素，before可以说是非常有用的伪元素，可以在元素外额外增加一些内容，特别是这些内容是可以使用几乎完整的css属性来定制，即可以当作一个新增的元素来处理。这里使用before或after伪元素和inline-block结合大小不固定的图片、多行文字的水平垂直居中中

③ display:inline-block和文字大小控制居中

方法来实现简洁而近乎完美的垂直居中。这里先解释下inline-block的巨大价值，我们布局时常常会使用block布局，即使是a这样的inline元素，由于我们的需要往往会改变它的表现形式，但inline元素对文字的处理丰富的方法确被丢失了，比如vertical-align这样垂直的属性，text-align这样水平的属性，鉴于这些文字的属性往往是自动根据文字的多少计算，但始终会表现得非常理想，但block元素则往往需要固定宽高，才能很好地达到相同效果～所以使用了inline-block表现后，我们可以让元素自身表现为block但在父级容器里定位使用inline的方式～但往往对vertical-align这样的似乎“时而可用时而无用“的属性，大家可以参考我对CSS vertical-align的一些理解与认识（一）和css-vertical-align的深入理解（二）之text-top篇两篇很好的文章，这里只使用了vertical-align的middle值。好了，废话到这，首先对父元素增加一个before伪类，使之呈现inline-block; 对于相邻的子元素能够表现为inline，使和相邻的元素一起能够影响vertical-align的作用，而内部表现为block则能通过自身的height值设定，控制整个的vertical-align表现值。注意text-align是父元素的属性，而vertical-align是子元素的属性。由于vertical-align默认不是middle，所以如果不对子元素设置vertical-align:middle; 则会发现并未完全垂直居中，而是“底线”居中；上代码：

此处不定长宽
第二行

转载于:https://www.cnblogs.com/defims/archive/2011/06/19/2946700.html

三议(巧用:before和inline-block伪元素解决)跨浏览器不定长宽，中心为基点，百分比定位～...相关推荐

巧用伪元素解决fixed元素被百度浏览器屏蔽问题
背景在做这样一个活动页时,发现底部fixed定位的 button 元素在百度浏览器中展示不出来. Google后发现了这位小伙伴的文章针对前端在百度浏览器总的固定定位的问题文中提到: 这是百度浏 ...
[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
一回生，二回熟，三回巧
项目总结目录概述需求: 设计思路实现思路分析一回生:结合理解力说一下二回熟三回巧灵活和灵敏善用Excel 等工具小结: 参考资料和推荐阅读 LD is tigger forever ...
inline, block, inline-block区别
inline, block, inline-block区别 inline Not height and width; Not margin-top & margin-bottom; Alway ...
Web前端开发（三）--css优先级进阶，文本属性，元素类型转换，display，overflow，浮动，定位
一.选择器优先级进阶计算方式: 行间样式 1000 id 100 class 10 标签选择器 1 让每一个选择器对应的值相加,谁的值大谁的优先级就高. <!DOCTYPE html> ...
巧用伪元素和伪类让我们的html结构更清晰合理
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 伪类 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-ch ...
求三个长方柱的体积，数据成员包括length(长)、width(高)。要求用成员函数实现以下功能：（1）用键盘分别输入三个长方柱的长宽高；（2）计算长方柱的体积；（3）输出3个长方柱的体积。
项目要求: 需要求三个长方柱的体积,请编写一个基于对象的程序,数据成员包括length(长).width(高).要求用成员函数实现以下功能: (1)用键盘分别输入三个长方柱的长宽高: (2)计算长方柱 ...
【CSS进阶】巧用伪元素before和after制作绚丽效果
原创:叫我詹躲躲来源:掘金链接:巧用伪元素before和after制作绚丽效果所谓'伪元素',就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的 ...
css多个伪元素,CSS（一）伪元素的巧用
作为一门前端er,你肯定熟知 a:hover a:visited.....我还记得在小本本上记着诀窍:"love 与 hate 纠缠不休",大家都懂的吧.... 伪类和伪元 ...

三议(巧用:before和inline-block伪元素解决)跨浏览器不定长宽，中心为基点，百分比定位～...

三议(巧用:before和inline-block伪元素解决)跨浏览器不定长宽，中心为基点，百分比定位～...相关推荐

最新文章

热门文章