日常工作或学习中常逢关于css的问题,之前一直零零散散的记在云笔记中,所以至如今已经杂乱无章,是时候好好理理了。
(1)css画小图标(箭头)使用css border的属性,可以实现箭头的效果。当我们为一个容器只设置border,高宽设置为0时,如下.arrow{ border-color: red green blue pink;border-style: solid; border- 20px; height: 0; 0;}
如果想得到一个箭头形状的图案,只需要将border的三个边的颜色改成透明,如下:
.arrow{ border-color: red transparent transparent;border-style: solid; border- 20px; height: 0; 0;}
(2)css固定底部
当页面内容不充实时,底部会上移,使用min-height设置最小高度,margin-bottom:-50px使底部上移
<style type="text/css">
html,body{height: 100%;}
.main{min-height: 100%;margin-bottom: -50px}
.content{height:50px;} //使footer不会覆盖main里的内容
footer{height: 50px;background: blue;}
</style>
<div class="main">
中间内容
<div class="content">dddd</div>
</div>
<footer>
底部底部底部底部
</footer>
(3)单行文字的高度问题(不同游览器的差异)
例:
<style>
span{font-size:12px; font-family:"微软雅黑"; color:#666;}
</style>
<span>热卖品牌</span>
google:
解决方法:使用行高line-height控制
注意:在各浏览器下对于line-height的解决也是有细微的区别的,上下会有1px的差别,如果行高是偶数的话,大部分浏览器解释还是比较正常,如果是奇 数的话,有些浏览器会上比下多1px,而另一些浏览器会下比上多1px,对于有些要求比较严格的网站,建议行高设计时用偶数
(4)display:none与visibility:hidden;
visibility:hidden规定元素不可见,即使不可见的元素也会占据页面上的空间
display:none不显示,也不占据空间。
(5)、a标签下使用img有留白
原因:a元素下有一个匿名文本,这个文本外有一个匿名行级盒子,它有的默认vertical-align是baseline的,而且往往因为上文line-height的影响,使它有个line-height,从而使其有了高度,因为baseline对齐的原因,这个盒子就会下沉,往下撑开一些距离。
扩展:baseline是基于基线对齐的,那基线是怎么回事?
基线并不是汉字文字的下端沿,而是英文字母"x"的下端沿。
方案一:消除匿名盒子的高度,也就是给a设置line-height:0;或font-size:0;
方案二:给两者vertical-align:top;让其top对齐,而不是baseline对齐。
方案三:给img以设置display:block;
(6)清除浮动
.l-clear:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
(7)不定高宽元素水平垂直居中
水平居中很好实现,直接vertical-align:center;而垂直居中有几种实现方式
方案一:利用table的特性,使用display:table与display:table-cell,将元素做为块级表格来显示
方案二:子元素绝对定位,距离顶部 50%,左边50%,然后使用css3 transform:translate(-50%; -50%)
方案三:使用flex布局,使项目居中排列
(8)css实现超出隐藏并且加省略
(9)弹出框背景透明
.outer{
100%; height: 100%;position: fixed;z-index: 9;left: 0;bottom: 0;background: rgba(0,0,0,0.8)!important;background: #000;filter: alpha(opacity=80); /*ie6/7/8*/
}
(10)消除inline-block间的间隙
inline-block包含html空白节点,当你设置的元素之间有换行,则页面上元素之间无法紧贴
若设置不同的margin-top,padding-top,该行的高度由"最高"的元素撑开,其余元素相对于基线对齐。
父元素设置font-size:0;inline-block的元素再设置font-size大小
(11)css优先级
一:权值
元素选择器:1
类选择器:10
id选择器:100
内联样式:1000
css优先级按权值大小排列,权值越大,优先级越高。
权值相等,则后面的样式设置要优于先出现的样式设置。
例:
<style>
.content span{color:red;} //10+1
.content .cl{color:blue;} //10+10
.cl{color:black !important;} //10
</style>
<div class="content"><span class="cl">字体颜色</span></div>
结果显示!important具有最高优先级。
(12)css position未设置top、left的默认状态
position:absolute 出现在正常的文档流中,但不占据文档的位置,会跟后面的内容重叠
position:relative 出现在正常的文档流中,但占据文档的位置。
position:static 默认的属性
position:fixed 出现在正常的文档流中,不占据位置,会跟后面的正常的文档流内容重叠
*******************************************1************************************************