网站建设是一项系统工程,个人网站页面模板html,红酒网站模板下载,二维码短链接生成器针对之前遇到过的一些特殊样式的实现#xff0c;我今天做个总结#xff0c;目的有二#xff1a;一是将这些方法记录下来#xff0c;以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大#xff0c;让广大前端程序猿们能够少走弯路。此贴为更新帖#xff0c;…针对之前遇到过的一些特殊样式的实现我今天做个总结目的有二一是将这些方法记录下来以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大让广大前端程序猿们能够少走弯路。此贴为更新帖以后若有好的css样式技巧小菜我会不定期更新。一、块元素水平垂直居中对于一个块元素的水平垂直居中水平居中的方式不必多说一般用margin:auto;等方法即可实现。而对于垂直居中尽管有vertical-align:middle属性但是由于其只适用于table标签中而table标签效果不好控制的特点大家都懂。。。因此我们一般常用的方法是将子级元素设定inline-block属性并将其行高属性line-height的值设定为与父级元素相同的高度。代码如下html方面body div classbig div classsmall/div /div /body css方面 .big { width:500px; height:500px; border:1px solid red; position:relative; } .small{ width:200px; /*自己元素宽高可任意设定 */ height:200px; position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px; margin:auto; background-color:#cc9900; } 在上述代码中子级元素的宽高是任意设定的。都可以实现此元素在父级元素中水平垂直居中显示。在父级元素中我们用了position的relative属性。在子级元素中我们将它的position属性设定为absolute后将四个方向的值都设定为0px。并且让他的margin值自适应。从审查元素中我们可以发现如此设定后子级元素的margin区域会充满整个父级元素并且左右margin值是相等的上下margin值亦如此。但是这并不符合当代码数值有冲突时优先解析top值及left值的规律。因为究竟是什么原理小菜也不得而知。。如果有大神知晓还望不吝赐教。但是这不失为一种好的办法希望大家活学活用。二、after伪类清浮动通常我们在对块元素设浮动以后需要对其清浮动以免布局混乱。常见的清浮动方法主要有两种1、在后面的子元素css中写clear:both;。2在浮动元素的父级元素中写overflow:hidden。现在我们可以用第三种方法利用after伪类写一个浮动属性这样只要有需要清楚浮动的地方我们就给其父元素加上这样一个浮动属性就可以了。代码如下.clearfix:after { content:; display:table; /*利用table不允许浮动的属性来清除浮动。也可以替换成overflow:hidden;*/ clear:both; } 这种方法有个好处即可以将其写入reset中之后可以多次调用。
