時(shí)間：2023-09-27 22:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-27 22:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
web前端之css浮動(dòng)：
在線咨詢(xún)
.list1 { background: green; width: 800px; /* 父容器浮動(dòng) */ float: left;}.box4 { /* 清除浮動(dòng) */ clear: both; height: 50px; background: pink;}?.list1 { background: green; width: 800px; /* 設(shè)置為行內(nèi)塊 */ display: inline-block;}?.list1 { background: green; width: 800px; /* 內(nèi)容溢出處理方式 */ /* 溢出隱藏 */ /* overflow: hidden; */ /* 有溢出出現(xiàn)滾動(dòng)條 */ /* overflow: auto; */ /* 顯示滾動(dòng)條 */ /* overflow: scroll; */ /* 溢出顯示，不能清除浮動(dòng) */ overflow: visible;}?/* 通過(guò)為元素來(lái)清除浮動(dòng) */.list1:after { /* 設(shè)置偽元素內(nèi)容為空 */ content: ""; /* 清除浮動(dòng) */ clear: both; /* 設(shè)置為塊元素 */ display: block;}?/* 創(chuàng)建clearfix類(lèi)，來(lái)復(fù)用 */.clearfix:after { /* 內(nèi)容 */ content: ""; /* 塊元素 */ display: block; /* 清除浮動(dòng) */ clear: both;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 偽元素 */ h1:before { /* 必須設(shè)置content屬性 */ content: "before content"; color: red; font-size: 50px; display: block; } /* 后面插入偽元素 */ h1:after { content: "after content"; color: green; } </style></head><body> <h1 class="box">hello</h1></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* .inp { color: red; } */ /* 偽類(lèi) */ /* .inp:focus { color: red; } */ /* 偽元素 */ /* .demo:before { content: "before input"; } */ .container { height: 300px; width: 300px; background: green; } /* 鼠標(biāo)滑過(guò)container，讓input文本變成紅色 */ /* .container:hover input { color: red; } */ .container:HOVER input { color: red; } /* 設(shè)置偽元素的語(yǔ)法不合法，偽元素只能添加在最后一個(gè)簡(jiǎn)單的選擇器上 */ /* .container:before .demo { */ /* .container .demo:before { content: "before div"; font-size: 50px; } */ .container .demo:BEFORE { content: "before div"; font-size: 50px; } /* love hate： link, visited, hover, active */ /* 鏈接樣式 */ /* a:link { color: red; } a:visited { color: green; } a:hover { color: orange; } a:active { color: skyblue; } */ </style></head><body> <div class="container"> <input class="inp" type="text" value="hello"> <div class="demo"></div> </div> <a href="#/demo33"> link-1 </a> <br> <a href="#/demo333"> link-2 </a> <br> <a href="#/demo3333"> link-3 </a> <br> <a href="#/demo33333"> link-4 </a> <br> <a href="#/demo333333"> link-5 </a> <br></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> .container { width: 800px; height: 800px; background: orange; margin: 20px auto; } .container div { /* 可以貼到浮動(dòng)元素上顯示 */ /* float: left; */ /* 另起一行顯示 */ display: inline-block; font-size: 50px; } .box1 { width: 100px; height: 600px; background: gold; } .box2 { /* width: 200px; */ /* 增加老二寬度 */ width: 400px; /* height: 500px; */ /* 降低2的高度 */ height: 200px; background: green; } .box3 { /* width: 400px; */ /* 減少老三寬度 */ width: 200px; height: 300px; background: pink; } .box4 { width: 300px; height: 100px; background: skyblue; } </style></head><body> <div class="container"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> </div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> .parent { width: 800px; height: 800px; margin: 0 auto; background: pink; } .child { height: 400px; background: green; /* margin-left和margin-right是正直，盒子寬度減小 */ /* margin-left: 100px; margin-right: 200px; */ /* margin-left和margin-right是正直，盒子寬度增加 */ /* margin-left: -100px; margin-right: -200px; */ /* 設(shè)置了寬度，margin無(wú)法改變寬度 */ width: 500px; /* 左邊距 */ /* margin-left: 200px; */ margin-left: -200px; /* 右邊距 */ margin-right: 200px; } </style></head><body> <!-- 可以通過(guò)align屬性更改盒子的對(duì)齊方式 --> <div class="parent" align="right"> <div class="child"></div> </div></body></html>關(guān)鍵詞：浮動(dòng)
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
