當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)

發布時間：2024/3/24 HTML 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

一、什么是CSS
二、CSS的三種樣式及其優先級
三、CSS基本選擇器及其優先級
四、其他常見的選擇器
五、選擇器優先進階
六、css的常見屬性(顏色、背景、字體、邊框）
七、內間距和外間距
八、盒子模型
九、文本屬性
十、布局屬性
- 1.display
- 2.visibility和display區別
十一、overflow
十二、相對定位、絕對定位、固定定位及其層級關系
- 1.相對定位
- 2.絕對定位
- 3.固定定位
- 4.層級關系
十三、簡單的百度界面
- 十四、小米商城

一、什么是CSS

CSS(Cascading Style Sheets)指層疊樣式表;
CSS是用來布局和美化網頁的;
CSS定義如何顯示HTML元素;

二、CSS的三種樣式及其優先級

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>css的三種寫法樣式</title><style type="text/css">div{width: 100px;height: 100px;background-color: red;}</style><link rel="stylesheet" type="text/css" href="./css/1.css"> </head> <body><div style="width: 100px;height: 100px;background-color: green"></div> </body> </html>

1.css

div{width: 500px;height: 300px;background: yellow; }

注意優先級：對于三種樣式的css，我們采用就近原則，相同屬性使用離標簽最近的css，不同屬性的也使用最近的css

三、CSS基本選擇器及其優先級

①css三種基本選擇器：標簽選擇器、ID選擇器、類選擇器

選擇器舉例備注

標簽選擇器	標簽名	通過標簽名來查找元素，影響范圍最大，很少單獨使用
ID選擇器	# ID	通過元素標簽的id屬性值來獲取元素,id屬性值不能重復，一個id值在一個html文件只出現一次，因此影響范圍較小
類選擇器	.類名	一個標簽的class值屬性可以有多個值，一個class屬性的值可以被多個標簽使用，影響范圍在標簽選擇器和id選擇器之間

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>css基本的三種選擇器</title><style type="text/css">/*標簽選擇器*/div{width: 200px;height: 200px;background: pink;}/*id選擇器*/#item1{width: 400px;height: 100px;background: blue;}/*類選擇器*/.box{width: 333px;height: 333px;background: yellow;}.box1{border: 3px solid red;}</style> </head> <body><div>標簽選擇器</div><div id="item1">id選擇器</div><div class="box box1">類選擇器</div> </body> </html>

②三種選擇器的優先級

標簽選擇器<類選擇器<id選擇器
誰的影響范圍大誰的優先級小
相同屬性按照優先級使用，不同屬性也按照優先級

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>選擇器優先級</title><style type="text/css">.box{width: 200px;background-color: blue;}#item{background-color: yellow;}div{width: 100px;height: 200px;background-color: red;}</styl</style> </head> <body><div id="item" class="box"></div> </body> </html>

四、其他常見的選擇器

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>關系選擇器</title><style type="text/css">/*------后代選擇器設置.wrap內的所有p標簽的樣式*/.wrap p{color: red;}/*----子選擇器設置.wrap的子元素的p的標簽-----*/.wrap>p{color: blue;}/*--------并集選擇器-----*/.wrap>span,span{color:pink;}/*------------偽元素選擇器 hover-------*/.box{width: 100px;height: 100px;background-color: red}.box:hover{width: 300px;height: 300px;background-color: green}/*-------------偽元素選擇器----------*//*在box內部的前邊插入一個字符*/.box:before{content: '你';}/*在box內部的后邊插入一個字符*/.box:after{content: '呀';}</style> </head> <body><div class="wrap"><div class="inner"><p>我是inner里的p</p></div><p>我是wrap里的p</p><span>我是wrap內部的span</span></div><p>我是最外層的p</p><span>我是最外邊的span</span><div class="box">鼠標上來試試</div> </body> </html>

偽類選擇器鼠標移上后：

五、選擇器優先進階

實際上，每個選擇器對應的權值都不相同：

行間式：權值1000
id選擇器：權值100
類選擇器：權值10
標簽選擇器：權值1

對于多個選擇器并存，我們將每個樣式對應的權值相加，誰的權值大，使用誰的效果

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>選擇器優先級進階</title><style type="text/css">#idd p{/*權值100+1*/color: red}.cla p{/*權值10+1*/color: green}</style> </head> <body><div id='idd' class="cla"><p>哈啊哈</p></div> </body> </html>

六、css的常見屬性(顏色、背景、字體、邊框）

1.顏色屬性

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>CSS的常用屬性</title><style type="text/css">.box{width: 300px;height: 300px;/*十六進制顏色*//*background-color:#ff0000;紅色*//*簡寫*//*background-color: #00f;*/ /*十進制顏色*//*background-color: rgb(255,0,0);*//*帶透明度的顏色*/background-color: rgba(100,100,100,0.1);}</style> </head> <body><div class="box"></div> </body> </html>

2.背景屬性

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>背景屬性</title><style type="text/css">/*----------背景圖片------------*/.box{width: 400px;height: 400px;border: 1px solid red;background-image: url(./img/徐坤籃球圖.jpg);/*圖片不會重復*/background-repeat: no-repeat;/*圖片坐標*/background-position: 5px 5px;/*百分百在框里*/background-size: 100% 100% }/*簡寫*/.box1{width: 400px;height: 400px;border: 1px solid red;/*最后是向右，向下偏移的量,注意是圖片移動，不是框移動*/background: url(./img/徐坤籃球圖.jpg) no-repeat 10px 10px; }/*注意：簡寫不可和分開寫混用，但是background-size是單獨設置*//* 練習 */.item{width: 50px;height: 50px;border: 1px solid red;background: url(./img/0.jpg) no-repeat -4px -104px;}.item:hover{background: url(./img/0.jpg) no-repeat -345px -270px;}</style> </head> <body><div class="box"></div><div class="box1"></div><div class="item"></div> </body> </html>

3.字體屬性

<!DOCTYPE html><html><head><meta charset="utf-8"><title>字體屬性</title><style type="text/css">/*默認字體大小 16px*/.box{/*大小*/font-size: 50px;/*加粗*/font-weight: bold;/*字體①所使用的電腦如果沒此字體，則使用默認字體②如果第一個沒有，則使用第二個字體③如果字體由多個單詞組成，需要加引號*/font-family: 楷體,宋體;/*顏色*/color: blue;/*字體樣式 italic傾斜，normal不傾斜*/font-style: italic;}</style></head><body><div class="box">蔡徐坤，打籃球真棒！</div></body></html>

4.邊框屬性

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>邊框屬性</title><style type="text/css">.item{width: 200px;height: 200px;/*簡寫，設置四個邊框粗細，樣式，顏色*//*border: 1px solid red;*//*單獨設置*//*solid 實線 dotted 點狀線 dashed虛線*/border-top: 1px solid red;border-bottom: 2px dotted black;border-left: 3px groove green;border-right: 4px dashed yellow;}</style> </head> <body><div class="item"></div> </body> </html>

七、內間距和外間距

1.內間距

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>內間距</title><style type="text/css">/*設置元素*/.box{width: 200px;height: 200px;background: #e91e7a;/*非簡寫*//*padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;*//*簡寫,四個值-遵循上右下左*//*padding:20px 10px 30px 40px;*//*簡寫，三個值-遵循上，(左右），下*//*padding: 20px 30px 40px*//*簡寫，兩個值-遵循（上下），（左右）*/padding:20px 30px;/*簡寫，一個值-四個值一樣*//*padding: 30px;*/}</style> </head> <body><div class="box">1</div> </body> </html>

2.外間距

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>外間距</title><style type="text/css">.box{width:200px;height: 300px;background: red;}/*.item{width:200px;height: 300px;background: blue;border: 1px solid red;margin-top: 10px;margin-bottom: 10px;margin-right: 20px;margin-left: 30px;*//*水平自適應居中*//*margin: 20px auto;*//*margin為負值，可以應用于邊框的合并*/.item1,.item2{width: 200px;height: 200px;border: 10px solid red;}.item2{margin-top: -10px;}}</style> </head> <body><div class="item1"></div><div class="item2"></div> </body> </html>

八、盒子模型

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>盒子模型</title><style type="text/css">*{margin:0px;padding: 0px;}.box1{width: 100px;height: 100px;background: yellow;}/*但是會改變原來定義的大小*/.box2{width: 100px;height: 100px;background: yellow;border: 20px solid green;/*自動按原來的大小計算*/box-sizing: border-box;}/*但是會改變原來定義的大小*/.box3{width: 100px;height: 100px;background: yellow;border: 20px solid green;padding: 20px;/*自動按原來的大小計算*/box-sizing: border-box;}</style> </head> <body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div> </body> </html>

九、文本屬性

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>文本屬性</title><style type="text/css">.item{width: 200px;height: 200px;border: 1px solid red;/*設置首行縮進*/text-indent: 32px;/*文本水平對齊方式，一般用于單行文本*/text-align: center;/*添加下劃線*/text-decoration: underline;/*添加上劃線*/text-decoration: overline;/*添加刪除線*/text-decoration: line-through;/*去除文本的劃線*/text-decoration: none;/*設置行高，設置于行與行之間的間距*/line-height: 30px;}/*練習題*/.item2{width: 400px;height: 54px;border-top:1px solid red; border-bottom: 3px solid #666;font-size: 20px;font-weight: bold;font-family: 雅黑;line-height: 50px;text-indent: 30px;box-sizing: border-box;}</style> </head> <body><div class="item">床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。</div><br><br><div class="item2">新聞列表</div> </body> </html>

十、布局屬性

1.display

<!DOCTYPE html> <html> <head><title>布局屬性</title> </head> <body><style type="text/css">*{margin:0;padding:0;list-style:none;}/* ul{width:400px;border:1px solid red;}*/ul li{margin-top: 10px;width:100px;height:50px;border:1px solid pink;text-align:center;line-height: 50px;display:inline-block;box-sizing: border-box;background:#c4c4c4;}.item{/*margin-left:-6px;*/}ul li:hover{background-color:pink;}.inner{height:300px;background-color:green; display:none;}a{text-decoration: none;}/*注意： inner 必須是li直接子元素 */ul li:hover .inner{display:block;}</style> </body><ul><li><a href="">國產</a><div class="inner"></div></li><li class="item"><a href="">歐美</a><div class="inner"></div></li><li class="item"><a href="">日韓</a><div class="inner"></div></li><li class="item"><a href="">動漫</a><div class="inner"></div></li></ul> </html>

2.visibility和display區別

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;}.item1{background: yellow;/*隱藏后不再占據位置*//*display: none;*//*隱藏后還會占據位置*/visibility: hidden;}.item2{background: red}</style> </head> <body><div class="item1">1</div><div class="item2">2</div> </body> </html>

十一、overflow

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>overflow</title><style type="text/css">/*overflow:超出部分visable：不隱藏auto：多出的部分自動加滾動條hidden：超出部分隱藏scroll：加個滾動條，無論元素有沒有*/div{height: 200px;width: 200px;overflow: auto;}</style> </head> <body><div><img src="../day02_css/課堂回顧練習/摩洛哥.png"></div> </body> </html>

十二、相對定位、絕對定位、固定定位及其層級關系

1.相對定位

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>相對定位</title><style type="text/css">*{margin: 0;padding: 0;}.wrap{width: 600px;height: 600px;border: 3px solid green;}.item1{width: 200px;height: 200px;background: #f33;/*相對定位*/position: relative;top: 200px;left: 400px;}.item2{width: 200px;height: 200px;background: #00f;}</style> </head> <body><div class="wrap"><div class="item1"></div><div class="item2"></div></div> </body> </html>

2.絕對定位

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>絕對定位</title><style type="text/css">*{margin:0;padding:0;}.wrap{width: 400px;height: 400px;border: 1px solid red;margin-left: 100px;/*position: relative;*/}.item1,.item2{width: 100px;height: 100px;}.item1{background: yellow;/*絕對定位*/position: absolute;top: 200px;left: 200px;}.item2{background: blue;}</style> </head> <body><div class="wrap"><div class="item1">1</div><div class="item2">2</div></div> </body> </html>

3.固定定位

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>固定定位</title><style>body{height: 2000px;}.item1{width: 100px;height: 50px;text-align: center;line-height: 50px;background-color: green;/*固定定位/綁定定位*/position: fixed;left: : 20px;top: 200px;}</style> </head> <body><div class="item1">回到頂部</div> </body> </html>

4.層級關系

多種定位，越往后層級越高
如果想改變，在該層級元素加z-index：1
誰想在誰上邊，誰的z-index:2值越大即可

十三、簡單的百度界面

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style type="text/css">.box{width: 600px;height: 50px;/*padding: 1px;*/border: 1px solid blue;display: inline-block;}a{color: green;}.but,.opt,.tex{height: 50px;box-sizing: border-box;border: 0px;}.but{height: 50px;width: 100px;margin-left: -5px;color: white;}.opt{width: 60px;}.tex{height: 48px;margin-left: -5px;width: 440px;font-size: 18px;}.pic{width: 148px;height: 48px;display: inline-block;}.div0{width: 1350px;height: 800px; background: rgba(100,100,100,0.1);margin-top: -8px;}.div1{background: white;margin-left: 300px;margin-right: 250px;width: 800px;height: 50px;border: 1px solid rgba(100,150,100,0.2);}</style> </head> <body><div style="margin-left: 70px;margin-top: 20px"><input type="image" style="margin-left: 200px" name="photo" src="baidu.png" class="pic"><div class="box" > <select class="opt" name="info"><option>網頁</option><option>音樂</option><option>視頻</option><option>圖片</option><option>小說</option><option>貼吧</option></select><input type="text" class="tex" name="sel" placeholder="請輸入搜索信息"><button class="but"style="background: blue">百度一下</button></div><div style="margin-left: 350px;"><a href="">老干媽失火</a><a href="">人民幣破7</a><a href="">母豬護理</a><a href="">喬蘿莉全網被禁</a><a href="">七彩祥云</a><a href="">人類為文字獻血</a><a href="">2020末日</a></div></div><hr><div class="div0"><div class="div1" style="margin-bottom: 13px;"><p>     hao123新聞     人民網     搜狐網     新浪網     網易     中國日報     人民日報     影視快報     人人網     百度網</p></div><div class="div1" style="height:190px;margin-bottom: 13px;"><p>     國產經典     新浪微博     歐美快播     騰訊游戲     鳳凰資訊     產后護理     人民日報     澳門賭場     人人</p><p>     草船借箭     三顧茅廬     三氣周瑜     人人自危     轅門射戟     三英呂布     一個頂兩     北伐十年     黃蓋挨打</p><hr style="color: rgba(100,150,100,0.2)"><p>     百度貼吧     新浪微博     搜狐熱點     騰訊游戲     鳳凰資訊     產后護理     人民日報     澳門賭場     人人</p><p>     草船借箭     三顧茅廬     三氣周瑜     人人自危     轅門射戟     三英呂布     一個頂兩     北伐十年     黃蓋挨打</p></div><div class="div1" style="height:390px;"><p>     <a href="">視頻</a>     新浪微博     搜狐熱點     騰訊·游戲     鳳凰資訊     產后護理     人民日報     澳門賭場     人人</p><p>     <a href="">新聞</a>     三顧茅廬     三氣周瑜     人人自危     轅門射戟     三英呂布     一個頂兩     北伐十年     黃蓋挨打</p><p>     <a href="">小說</a>     新浪微博     搜狐熱點     騰訊游戲     鳳凰資訊     產后·護理     人民日報     澳門賭場     人人</p><p>    &nbsp<a href="">音樂</a>     三顧茅廬     三氣周瑜     人人自危     轅門射戟     三英呂布     一個頂兩     北伐十年     黃蓋挨打</p><p>     <a href="">旅游</a>     新浪·微博     搜狐熱點     騰訊游戲     鳳凰資訊     產后護理     人民日報     澳門·賭場     人人</p><p>     <a href="">購物</a>     三顧茅廬     三氣周瑜     人人自危     轅門射戟     三英呂布     一個頂兩     北伐十年     黃蓋挨打</p><p>     <a href="">體育</a>     新浪·微博     搜狐熱點     騰訊游戲     鳳凰資訊     產后護理     人民日報     澳門賭場     人人</p><p>     <a href="">醫藥</a>     三顧茅廬     三氣周瑜     人人自危     轅門射戟     三英呂布     一個頂兩     北伐十年     黃蓋挨打</p></div></div> </body> </html>

十四、小米商城

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>小米商城</title><style type="text/css">*{margin:0;padding: 0;list-style: none;}/*側邊導航欄*/.box2{margin-top: 10px;margin-left: 30px;width: 200px;background: rgba(0,0,0,0.3);position: relative;}.ul2 .li2{width: 200px;height: 30px;color: white;font-weight: 600px;padding-top: 20px;padding-bottom: 20px;}.ul2 .li2:hover{background: #ff5722;}.inner2{width: 990px;height: 350px;background: rgba(100,200,200,1);font-size: 60px;text-align: center;position: absolute;top:0;left: 200px;display: none;}.ul2 .li2:hover .inner2{display:block;position: absolute;z-index: 1;}.im{position: absolute;top: 0px;left: 200px;}/*上部導航欄*/.box1{width: 800px;margin-top: 120px;margin-left: 100px;margin-bottom: 10px;}.ul1 .li1{width:100px;height:55px;border:1px solid pink;text-align:center;line-height: 50px;display:inline-block;box-sizing: border-box;background:#c4c4c4;}.li1{margin-left:-6px;}.ul1 .li1:hover{background-color:pink;}.inner1{width: 99px;height:300px;background-color:green; display:none;position: absolute;z-index: 1;}/*注意： inner 必須是li直接子元素 */.ul1 .li1:hover .inner1{display:block;float: left;}.imge{float: left;}.ul1{float: right;}.item1{width: 203px;height: 53px;}</style> </head> <body><div class="box1"><img src="小米.png" class="imga"><ul class="ul1"><li class="li1">小米手機<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">紅米手機<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">電視<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">筆記本<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">家電<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">路由器<div class="inner1">小米5<br>小米6<br>小米7</div></li></ul></div><hr style="color: black;font-weight: bold;"><div class="box2"><ul class="ul2"><li class="li2">    手機 電話卡     ><div class="inner2">這是手機和電話卡</div></li><li class="li2">    電視 大盒子     ><div class="inner2">這是電視和大盒子</div></li><li class="li2">   &nbsp平板 筆記本     ><div class="inner2">這是平板和筆記本</div></li><li class="li2">   &nbsp出行 穿和戴     ><div class="inner2">這里是出行和穿戴</div></li><li class="li2">   &nbsp智能 路由器     ><div class="inner2">這里是智能和路由器</div></li> </ul><img src="電視.png" class="im"></div> </body> </html>

總結

以上是生活随笔為你收集整理的web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： windows应急响应入侵排查思路
下一篇： vscode中6个好用的前端重构插件