7. 拓展@
7.1 margin负值之美
1). 负边距+定位：水平垂直居中
咱们前面讲过， 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。
2). 压住盒子相邻边框
上图第一个div的右边框 与 第二个div的左边框没有重叠 1px + 1px = 2px ，所以边框线变粗
可以通过给每个div加上
margin-left: -1px;
margin-top: -1px;
让第一个div的右边框 与 第二个div的左边框完全重叠 ，这样边框的宽度还是为1px!
实现鼠标悬浮边框变成橙色：
方法一：
我们只要保证当前的这个盒子是定位就会压住标准流和浮动盒子*/
position:relative；
我们只能用相对定位它是占位置的
方法二：添加z-index:1; 实现鼠标经过某个div时，提高当前div的层级
7.2 CSS三角形之美
div {
width: 0;
height: 0;
line-height:0；
font-size: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
一张图， 你就知道 css 三角是怎么来的了, 做法如下：
- 我们用css 边框可以模拟三角效果
- 宽度高度为0
- 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
- 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
京东案例：
7.3 文字围绕浮动元素的巧妙运用
只需要为装有图片的元素添加float:left; 浮动，文字便会自动围绕图片来显示
7.4 行内块元素的巧妙运用
- 为父元素box添加text-align: center,则其所有的子元素(必须是行内块元素)都会实现水平居中对齐
- 在一行内显示多个行内块元素时,行内块元素之间会自然产生一个空白的间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行内块元素的巧妙运用</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;/* 为父元素box添加text-align: center,则其所有的子元素(必须是行内块元素)都会实现水平居中对齐 */
}
.box a {
display: inline-block; /* 在一行内显示多个行内块元素时,行内块元素之间会自然产生一个空白的间距 */
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}
.box input {
width: 45px;
height: 36px;
border: 1px solid #ccc;
outline: none;
/* 取消选中后的边框 */
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
</html>
7.5 CSS三角形的巧妙运用
1）效果图：
2）原理：将直角三角形用子绝父相的方法定位到红色区域的右边，并把直角三角形的颜色改为白色
实现直角三角形的方法：
1）正常的写法：
2）简写：
效果图的实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS三角巧妙运用</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.price {
width: 160px;
height: 22px;
border: 1px solid red;
margin: 0 auto;
line-height: 24px;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.miaosha i {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 22px 10px 0 0; /* 第一个值相当于三角形的高度,第二个值相当于三角形的宽度 */
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through; /* 设置删除线 */
}
</style>
</head>
<body>
<div class="price">
<span class="miaosha">
$1650
<i></i>
</span>
<span class="origin">$5650</span>
</div>
</body>
</html>