css应用

xiaoxiao2021-02-28 89

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ padding: 0; margin: 0; } #span1{ margin-right: 20px; background-color: lightgreen; } #span2{ margin-left: 30px; background-color: pink; } #d1{ height: 100px; background-color: lightcoral; margin-bottom: 20px; } #d2{ height: 100px; background-color: lightblue; margin-top: 30px; } </style> <title>行级标签、块级标签之间的距离</title> </head> <body>  <span id="span1">节日风俗</span><span id="span2">节日风俗</span> <br> <br>  <div id="d1">盒子属性</div> <div id="d2">盒子属性</div> </body> </html>

盒子嵌套：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*解决外边距失效问题 1：为父盒子添加overflow：hidden 2、为父盒子添加padding 3、为父盒子添加border */ #p{ width: 300px; height: 300px; background-color: lightcoral; /*padding: 25px;*/ overflow: hidden; } #c{ width: 150px; height: 150px; background-color:lightblue; margin: 0 auto; margin-top: 75px; } </style> <title>嵌套的盒子</title> </head> <body> <div id="p"> <div id="c"></div> </div> </body> </html>

负边距DIV居中：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #t1{ width: 300px; height: 300px; background-color: lightcoral; position: relative; } #t2{ width: 150px; height: 150px; background-color: lightblue; position: absolute; /*margin: 0 auto;*/ left: 50%; margin-left: -75px; top: 50%; margin-top: -75px; } </style> <title>负边距DIV居中</title> </head> <body> <div id="t1"> <div id="t2"></div> </div> </body> </html

固定定位：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #back{ width: 120px; height: 80px; text-align: center; line-height: 80px; background-color: lightcoral; position: fixed; bottom: 80px; right: 20px; /*z-index默认值为：1 其数值越大越靠前*/ z-index: 1000; } </style> <title>固定定位</title> </head> <body> <div style="height: 1000px"> <div id="back"> 返回页面顶部 </div> </div> </body> </html>

效果图：

转载请注明原文地址: https://www.6miu.com/read-41700.html

技术

最新回复(0)