<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>4_1学院门户网站知识点一浮动</title> <style type="text/css"> * { padding: 0px; } h2 { background-color: lightgreen; } h3 { background-color: #c1edb3; } div { height: 100px; width: 100px; background: lightblue; margin: 2px; } ol { height: 100px; width: 100px; background: yellow; margin: 2px; float: left; } span { /* 行内元素转换为 块级元素*/ /* display: block; */ height: 100px; width: 100px; background: red; margin: 2px; } i { /* 行内元素转换为 块级元素*/ display: block; height: 100px; width: 100px; background: black; margin: 2px; float: right; } .one { background-color: #00CED1; height: 250px; width: 400px; } .two { background-color: bisque; height: 250px; width: 300px; } .tree { background-color: black; height: 250px; width: 200px; } .four { background-color: red; height: 250px; width: 100px; } .five { background-color: yellow; height: 250px; width: 300px; } article { float: left; } </style> </head> <body> <h1>4_1学院门户网站知识点一浮动的知识点与案例</h1> <hr> <h2>知识点一知识点一块级元素 和行内元素区别</h2> <!-- 知识点一块级元素 和行内元素区别 --> <!-- 块级元素 --> <div><img src="img/bng/kp1%20(2).jpg" /></div> <div><img src="img/bng/kp1%20(2).jpg" /></div> <div><img src="img/bng/kp1%20(2).jpg" /></div> <div><img src="img/bng/kp1%20(2).jpg" /></div> <div><img src="img/bng/kp1%20(2).jpg" /></div> <h3>总结:块级元素会独占一行，从上向下顺序排列;</h3> <!-- 行内元素 --> <span><img src="img/bng/kp1%20(4).jpg" /></span> <span><img src="img/bng/kp1%20(4).jpg" /></span> <span><img src="img/bng/kp1%20(4).jpg" /></span> <span><img src="img/bng/kp1%20(4).jpg" /></span> <span><img src="img/bng/kp1%20(4).jpg" /></span> <span><img src="img/bng/kp1%20(4).jpg" /></span> <h3>总结:行内元素会按照 顺序，从左到右顺序排列，碰到父元素边缘则自动换行</h3> <h2>知识点二浮动如何浮动 向left浮动</h2> <ol>OL100111</ol> <ol>OL100112</ol> <ol>OL100113</ol> <ol>OL100114</ol> <br> <h2>知识点二浮动如何浮动 向right浮动</h2> <i>Ilou1</i> <i>Ilou12</i> <i>Ilou13</i> <i>Ilou14</i> <br> <br> <br> <br> <br> <br> <hr> <h2>案例1</h2> <article style="border: 3px solid palevioletred;background-color:lavender;margin: 0.1875rem;">article的范围 <div class="one" style="border: #0000FF 4px solid;float: left;">divone的范围1</div> <div class="two" style="border: #00FF99 5px solid;">divtwo的范围2</div> <div class="tree" style="border: #0000FF 4px solid;float: right;">divone的范围3</div> <div class="four" style="border: #00FF99 5px dotted;">divtwo的范围4</div> <div class="five" style="border: #0000FF 4px solid;">divone的范围5</div> <div class="six" style="border: #00FF99 5px dotted; float: left;">divtwo的范围6</div> </article> <article style="border: 3px solid palevioletred;background-color:cyan;margin: 0.1875rem;">article的范围 <div class="one" style="border: #0000FF 4px solid;">divone的范围1</div> <div class="two" style="border: #00FF99 5px solid;float: left;">divtwo的范围2</div> <div class="tree" style="border: #0000FF 4px solid;">divone的范围3</div> <div class="four" style="border: #00FF99 5px dotted; float: right;">divtwo的范围4</div> <div class="five" style="border: #0000FF 4px solid;">divone的范围5</div> <div class="six" style="border: #00FF99 5px dotted;">divtwo的范围6</div> </article> <article style="border: 3px solid palevioletred;background-color:lightgoldenrodyellow;margin: 0.1875rem; float: left;"> article的范围向右 <div class="one" style="border: #0000FF 4px solid; float: right;">divone的范围1</div> <div class="two" style="border: #00FF99 5px solid; float: right;">divtwo的范围2</div> <div class="tree" style="border: #0000FF 4px solid; float: left;">divone的范围3</div> <div class="four" style="border: #00FF99 5px dotted; float: right;">divtwo的范围4left</div> <div class="five" style="border: #0000FF 4px solid; float: left;">divone的范围5left</div> <div class="six" style="border: #00FF99 5px dotted; float: right;">divtwo的范围6</div> </article> <article style="border: 3px solid palevioletred;background-color:lightcyan;margin: 0.1875rem; float: right;"> article的范围向left <div class="one" style="border: #0000FF 4px solid;float: left;">divone的范围1</div> <div class="two" style="border: #00FF99 5px solid;float: right;">divtwo的范围2right</div> <div class="tree" style="border: #0000FF 4px solid; float: left;">divone的范围3</div> <div class="four" style="border: #00FF99 5px dotted;float: left;">divtwo的范围4</div> <div class="five" style="border: #0000FF 4px solid;float: left;">divone的范围5</div> <div class="six" style="border: #00FF99 5px dotted;float: left;">divtwo的范围6</div> </article> </body> </html
上面的案例请读者自行打印出来，学习的过程是自己不断总结的过程。
