前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- HTML CSS
1. margin负值的运用
多个盒子进行浮动，同时为每个盒子设置边框，会导致相邻盒子相接触的位置边框变粗。
此时可以使用margin将其值设置为负数，对上一个的边框进行覆盖，使得相邻位置的边框没有那么粗。
代码示例：
<style> div { float: left; width: 100px; height: 200px; margin-left: -2px; background-color: aquamarine; border: 2px solid black; } </style> <body> <div></div> <div></div> <div></div> <div></div> </body>
实现鼠标经过，盒子的边框颜色改变：
<style> div { position: relative; float: left; width: 100px; height: 200px; margin-left: -2px; background-color: aquamarine; border: 2px solid black; } div:hover { /* 由于后面的盒子覆盖了前面的盒子，所以要将前面的盒子层级提高 */ /* 如果没有有定位，则加相对定位（保留位置） */ /* position: relative; */ border: 2px solid red; /* 如果有定位，则加z-index */ z-index: 1; } </style> <body> <div></div> <div></div> <div></div> <div></div> </body>
2. 文字围绕浮动元素
实现下图效果，是利用浮动元素不会压住文字。
<style> .box { width: 300px; height: 70px; background-color: aquamarine; } .inner { /* 盒子进行浮动 */ /* 由于浮动不会压住文字，可以实现文字在盒子右边环绕显示 */ float: left; width: 120px; height: 70px; margin-right: 5px; background-color: cadetblue; } </style> <body> <div class="box"> <div class="inner"></div> <span>hello world! hello world! hello world! hello world! </span> </div> </body>
3. 行内块的巧妙运用
使用行内块元素实现下图效果：
<style> a { /* 取消 a 标签的默认样式 */ color: #000; text-decoration: none; } .box { /* 行内块元素页面水平居中 */ text-align: center; } .box a { display: inline-block; /* width: 36px; */ height: 36px; /* 内边距 内容与左右边框的距离 */ padding: 0 14px; background-color: #f7f7f7; border: 1px solid #ccc; font-size: 14px; /* 水平居中 */ /* 继承父元素 */ /* text-align: center; */ /* 垂直居中 */ line-height: 36px; } .box a:hover, .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> <body> <div class="box"> <a href="#"><<上一页</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#" class="elp">...</a> <a href="#">>>下一页</a> 到第 <input type="text"> 页 <button>确定</button> </div> </body>
4. CSS三角强化
实现下图效果：
三角形实现：
<style> .box1 { width: 40px; height: 80px; padding: 40px; background-color: aquamarine; } .box1 .inner { width: 0; height: 0; /* 顶部的边框可以撑开三角形的高度 */ /* 上边框宽度调大 */ border-top: 80px solid red; border-right: 40px solid black; /* 底部边框为0 可以不让三角形为等腰 */ /* 底部和左边边框宽度为0 */ border-bottom: 0px solid transparent; border-left: 0px solid transparent; } </style> <body> <div class="box1"> <div class="inner"></div> </div> </body>
案例效果实现：
<style> .box { width: 160px; height: 24px; border: 1px solid red; /* 文字居中 */ text-align: center; } .left { /* 自绝父相 */ position: relative; /* 浮动会覆盖盒子，但是不覆盖文字 */ float: left; width: 90px; height: 100%; background-color: red; } .box i { position: absolute; top: 0; right: 0; width: 0; height: 0; /* 边框的颜色 只有右边框有颜色 白色*/ border-color: transparent #fff transparent transparent; border-style: solid; /* 上右边框有宽度 */ border-width: 24px 12px 0 0; } </style> <body> <div class="box"> <span class="left">￥1650<i></i></span> <span class="right">￥5650</span> </div> </body>
