當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端之css笔记3

發(fā)布時(shí)間：2025/3/14 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了前端之css笔记3 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一 display屬性

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{width:200px;height:200px;bockground-color:green;display:inline;}span{width:200px;height:200px;background-color:wheat;display:block;}</style> </head> <body><div>DIV</div><span>span</span> </body> </html> View Code

二 inline-block屬性值

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}.c1{width:100px;height:200px;background-color:darkorange;display:inline-block;}.c2{width:200px;height:200px;background-color:green;display:none;margin-lift:-4px;}.c3{width:300px;height:200px;background-color:rebeccapurple;display:inline-block;margin-left:-5px;}ul li{list-style:none;}ul li a{width:20px;height:20px;float:left;padding:20px;margin-left:5px;background-color:wheat;}</style> </head> <body><a class="c1"></a><div class="c2"></div> <div class="c3"></div><ul><li class="item"><a href="">1</a> </li><li class="item"><a href="">2</a> </li><li class="item"><a href="">3</a> </li><li class="item"><a href="">4</a> </li><li class="item"><a href="">5</a> </li><li class="item"><a href="">6</a> </li><li class="item"><a href="">7</a> </li><li class="item"><a href="">8</a> </li> </ul></body> </html> View Code

三float 父級(jí)塌陷

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}.box1,.box2{float:left;width:50%;height:60px;}.box1{background-color:wheat;}.box2{background-color:green;}.content{width:100%;height:60px;background-color:greenyellow;}.header{border:red 1px solid;}.clearfix:after{content:"";display:block;clear:both;}</style> </head> <body><div class="header clearfix"><div class="box1"></div><div class="box2"></div></div><div class="content"></div></body> </html> View Code

四清除浮動(dòng)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin :0px;}.div1{background-color:rebeccapurple;width:200px;height:100px;float:left;}.div2{background-color:teal;width:200px;height:200px;float:left;clear:left;}.div3{background-color:green;width:100px;height:300px;float:left;clear:right;}</style> </head> <body><div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body> </html> View Code

五 a標(biāo)簽錨

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.fang1{width:100%;height:1000px;background-color:wheat;}.fang2{width:100%;height:1000px;background-color:red;}.fang3{width:100%;height:1000px;background-color:green;}</style> </head> <body><ul><li><a href="#c1">第一章</a></li><li><a href="#c2">第二章</a></li><li><a href="#c3">第三章</a></li> </ul><div class="fang1" id="c1">第一章</div> <a href="#">返回頂端</a> <div class="fang2" id="c2">第二章</div> <a href="#">返回頂端</a> <div class="fang3" id="c3">第三章</div> <a href="#">返回頂端</a> </body> </html> View Code

六 position定位

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin:0px;}.div1{background-color:rebeccapurple;width:200px;height:200px;}.div2{background-color:green;width:200px;height:200px;position:absolute;left:200px;top:200px;}.div3{background-color:teal;width:200px;height:200px;}.father_box{position:relative;border: 2px solid red;}</style> </head> <body><div class="div1"></div><div class="father_box"><div class="div2"></div><div class="div3"></div> </div></body> </html> View Code

七fix定位

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1{width:100%;height:2000px;background-color:wheat;}.returnTop{width:90px;height:35px;text-indent:10px;background-color:grey;color:white;tsxt-align:center;line-height:35px;position:fixed;right:20px;bottom:20px;}</style> </head> <body><div class="c1"></div><div class="returnTop">返回頂部</div></body> </html> View Code

八 marging塌陷

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin:0px;}.div1{background-color:rebeccapurple;width:300px;height:300px;overflow:hidden;}.div2{background-color:green;width:100px;height:100px;margin-top:20px;}.div3{background-color:teal;width:100px;height:100px;}</style> </head> <body><div style="background-color: bisque;width: 300px;height: 300px"></div> <div class="div1"><div class="div2"></div><div class="div3"></div> </div></body> </html> View Code

九 txet

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}ul li{list-style:none;}</style> </head> <body><ul><li>11</li><li>11</li><li>11</li> </ul> </body> </html> View Code

轉(zhuǎn)載于:https://www.cnblogs.com/fangjie0410/p/7281698.html

總結(jié)

以上是生活随笔為你收集整理的前端之css笔记3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

笔记
css

上一篇： JVM内存计算问题
下一篇： Android经常使用工具类DateUt