去除图片底侧空白缝隙
产生原因:图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。
解决方法
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
- 给img 添加 display:block; 转换为块级元素就不会存在问题了。
精灵图(雪碧图)
即将网页中的一些背景图像整合到一张大图中(精灵图)
有效地减少服务器接受和发送请求的次数,提高页面的加载速度。
使用:
background_image
、background-repeat
、background-position
(最重要)
.icon1 {
margin: 100px auto;
border: 1px solid #ccc;
width: 23px;
height: 23px;
background: url(../images/index.png) no-repeat 0 -107px;
}
溢出文字省略号显示
三步:
- 先强制一行内显示文本 white-space: nowrap;
- 超出的部分隐藏 overflow: hidden;
- 文字用省略号替代超出的部分 text-overflow: ellipsis;
//html部分
<div class="w">
溢出文字以省略号显示
</div>
// CSS部分
.w {
width: 100px;
height: 20px;
border: 1px solid red;
//关键部分
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
滑动门技术
使各种特殊形状的背景能够自适应元素中文本内容的多少.
CSS精灵(主要是背景位置)+盒子padding撑开宽度
具体:
一般经典布局如下
- a 设置 背景左侧(即控制左侧门),padding撑开合适宽度。
- span 设置背景右侧(即控制右侧门), padding撑开合适宽度 剩下由文字继续撑开宽度。
- 之所以a包含span就是因为 整个导航都是可以点击的。
//html部分
<li>
<a href="#">
<span>内容</span>
</a>
</li>
//css部分
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
li {
float: left;
margin: 0 5px;
}
a,
a span {
border-radius: 16px;
}
a {
display: inline-block;
height: 33px;
//控制左边门
background: url(../images/to.png) no-repeat;
padding-left: 15px;
color: #fff;
font-size: 14px;
}
a span {
display: inline-block;
height: 33px;
line-height: 33px;
// 控制右边门
background: url(../images/to.png) no-repeat right top;
padding-right: 15px;
}
效果:
margin负值
1、负边距+定位:水平垂直居中;
2、盒子相邻边框合并防止出现边框变粗的情况;
关键设置:
margin-left: -1px(这个值看盒子的边框宽度而定);
margin-top: -1px;
3、突出某个盒子边框
可通过定位(position)解决。
position、z-index;
CSS三角形
1.宽度高度为0;
2.我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了;
3.为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;
实现:
div {
width: 0;
height: 0;
font-size: 0;
line-height: 0;
border-style: solid;
border-width: 50px 0px 50px 70px;
border-color: transparent transparent transparent red;
}