web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)
生活随笔
收集整理的這篇文章主要介紹了
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選擇器之間 |
②三種選擇器的優先級
- 標簽選擇器<類選擇器<id選擇器
- 誰的影響范圍大誰的優先級小
- 相同屬性按照優先級使用，不同屬性也按照優先級
四、其他常見的選擇器
<!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><!-- 1.后代選擇器：選擇符 空格選擇指定標簽內的所以后代，忽略層級關系2.子選擇器：選擇符>只選擇標簽內的兒子后代3.并集選擇器：選擇符,一次性給多個元素設置相同的樣式4.偽類選擇器.類名：hover 屬性可以冬天改變5.偽元素選擇器.類名：before{content：改變}.類名：after{content：改變}--><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><!-- 1.css的顏色表示方式：①英語單詞②十六進制的顏色(兩個為一組：紅綠藍，每組相同的可以簡寫)③十進制的顏色（由三個進制數字來表示最終顯示顏色）rgb(紅，綠，藍)其中每個的取值范圍為0-255或者0%-100%④帶透明度的顏色rgba(紅色，綠色，藍色，透明度)其他不變，另外一個為0-1之間--><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><!-- border是外邊框距離外部元素距離簡寫和內間距寫法一樣--><!-- <div class="box">1</div><div class="item">2</div> --><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><!-- ------------布局屬性-------------display：(規定元素以哪種元素類型展示)none---------隱藏block--------塊元素：會自動換下一行inline-------行元素：不會自動換行，無高寬屬性inline-block-行內塊：不會自動換行，還具有高寬屬性一般情況下不會將塊元素轉換為行內元素--><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><!-- 相對定位不會脫離的文檔流參考點是原來位置的（0,0）點相對于原來的元素進行便宜--><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><!-- --------絕對定位--------1.會脫離文檔流2.默認以body的(0,0)進行參考偏移3.如果父元素有定位屬性，那么絕對定位會以父元素的(0,0)進行偏移4.如果父元素無定位屬性，那么就依次找祖先元素，直到某個最小有定位元素就按此元素的(0,0),否則會找到body的(0,0)--><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>  <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">  平板 筆記本 ><div class="inner2">這是平板和筆記本</div></li><li class="li2">  出行 穿和戴 ><div class="inner2">這里是出行和穿戴</div></li><li class="li2">  智能 路由器 ><div class="inner2">這里是智能和路由器</div></li> </ul><img src="電視.png" class="im"></div> </body> </html>總結
以上是生活随笔為你收集整理的web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows应急响应入侵排查思路
- 下一篇： vscode中6个好用的前端重构插件