时间：2023-09-27 22:00:01 | 来源：网站运营
时间：2023-09-27 22:00:01 来源：网站运营
web前端之css浮动：
在线咨询
.list1 { background: green; width: 800px; /* 父容器浮动 */ float: left;}.box4 { /* 清除浮动 */ clear: both; height: 50px; background: pink;}.list1 { background: green; width: 800px; /* 设置为行内块 */ display: inline-block;}.list1 { background: green; width: 800px; /* 内容溢出处理方式 */ /* 溢出隐藏 */ /* overflow: hidden; */ /* 有溢出出现滚动条 */ /* overflow: auto; */ /* 显示滚动条 */ /* overflow: scroll; */ /* 溢出显示，不能清除浮动 */ overflow: visible;}/* 通过为元素来清除浮动 */.list1:after { /* 设置伪元素内容为空 */ content: ""; /* 清除浮动 */ clear: both; /* 设置为块元素 */ display: block;}/* 创建clearfix类，来复用 */.clearfix:after { /* 内容 */ content: ""; /* 块元素 */ display: block; /* 清除浮动 */ 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 { /* 必须设置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; } */ /* 伪类 */ /* .inp:focus { color: red; } */ /* 伪元素 */ /* .demo:before { content: "before input"; } */ .container { height: 300px; width: 300px; background: green; } /* 鼠标滑过container，让input文本变成红色 */ /* .container:hover input { color: red; } */ .container:HOVER input { color: red; } /* 设置伪元素的语法不合法，伪元素只能添加在最后一个简单的选择器上 */ /* .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 { /* 可以贴到浮动元素上显示 */ /* 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; */ /* 设置了宽度，margin无法改变宽度 */ width: 500px; /* 左边距 */ /* margin-left: 200px; */ margin-left: -200px; /* 右边距 */ margin-right: 200px; } </style></head><body> <!-- 可以通过align属性更改盒子的对齐方式 --> <div class="parent" align="right"> <div class="child"></div> </div></body></html>关键词：浮动
