css实际遇到的小问题

来源：互联网发布：图片识别算法编辑：程序博客网时间：2024/06/06 06:39

1、使用inline-block将块级元素同行显示，会使li之间有看不见的间隙。比如ul的li设置为inline-block后，li之间有看不见的间隙，并且这个间隙不同浏览器显示不同。

2、div绝对定位后，里面的文字如何居中？

这里写图片描述

<div class="side-banner">    <a href="">    <img class="banner-img" src="img/banner01.jpg"/>    <p class="banner-text">好项目不愁钱，50万助你创业------安徽农信</p>    </a></div>

.con-up-main .side-banner .banner-text{    position: absolute;    bottom: 0;    text-align: center;    color: #000000;}

以上文字不居中显示，要想居中显示，只需要给p标签加上width: 100%;
即：

.con-up-main .side-banner .banner-text{    position: absolute;    bottom: 0;    width: 100%;    text-align: center;    color: #000000;}

修改后：
这里写图片描述

3、如何实现背景透明，文字不透明

设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度。所以使用opacity实现《背景透明，文字不透明》是不可取的。
css3的rgba：设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度。（兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持）如：background-color:rgba(0,0,0,0.2);

详细说明见：CSS实现背景透明，文字不透明，兼容所有浏览器

4、hover效果加边框不抖动

问题描述，给一个无边框的div，加鼠标移入后有边框效果。这用：hover很好实现，但问题是加了border后，整个大小发生了变化，那么就要减小width和height值。于是我减小了w和h的值，：hover后，整体大小不变。但是还是会跳！
所以，这并不是一个好的解决方法（我记得我以前遇到过这个问题，后来网上查的，看别人的方法不行，百度知道真不靠谱，经常误人子弟！后来自己想到了加个假边框的方法，现在居然忘了，问别人又突然想起来~）
解决方法：在原本的div上就加一个假的border，边框颜色和背景颜色一样，然后：hover的时候，直接把边框颜色换掉就可以了~

5、如何让并列的div边框重合

问题描述：让有边框的div并列显示在一行，一般都出现中间边框靠在一起，从而使得中间边框粗一些（2px），周围边框细一些（1px）。那么，怎么才能使得中间边框重合呢？
解决办法：给每个div一个margin-left：-1px；当然，这是对左浮动的的div来说的。因为，如果不浮动，所有的div都向左移动了1px，相对位移没有发生变化，结果就是没变化。而如果每个div都是浮动的，第二个div先向左靠齐，然后再向左移1px，这就使中间的边框重合了。但这样问题又来了，如果鼠标移入要求边框改变颜色，那么div的右边框始终不会显示，只有最后一个显示。怎么解决呢？在hover里面加个z-index：1；即提高选中的div层级。

<body>    <div class="test"></div>    <div class="test"></div>    <div class="test"></div>    <div class="test"></div>    <div class="test"></div></body>

.test{    position: relative;    float: left;    width: 250px;    height: 250px;    margin-top: 200px;    margin-left: -1px;    border: 1px solid #ccc;}.test:hover{    border: 1px solid red;    z-index: 1;}

6、只有定位的盒子才有层级（z-index）

只有position：relative/absolute才有层级，float没有层级。

7、如何将定宽定高的div窗口垂直居中对齐

position: fixed;top: 50%;left: 50%;width: 400px;height: 400px;margin: -200px 0 0 -200px;

左上50%后，是div的左上角那个点居中对齐了，本身没有对齐。可以使用margin的负值来让盒子居中对齐。即左上的margin各负宽高的一半

0 0