搜索到
2
篇与
的结果
-
浮动 1. 简介<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>简介</title> <style> /* 在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一 */ div { width: 600px; height: 400px;background-color: skyblue; } img { width: 200px; float: right; /* margin-right: 0.5em; */ } .d::first-letter { font-size: 40px; float: left; } </style> </head> <body> <div> <img src="../images/touxiang.jpg" alt="" srcset=""> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea asperiores quis, distinctio iste animi eum. Atque molestiae quibusdam, quidem blanditiis tenetur laudantium minima impedit ipsum voluptates culpa nesciunt quos repellendus, explicabo eligendi velit. Nobis tempora mollitia non debitis quisquam itaque ut expedita voluptas consequatur a quam, odit saepe aut. Quasi, neque eaque. Officia iusto numquam enim obcaecati dolore impedit unde, rerum quibusdam nulla eius, accusamus accusantium repellat eos reiciendis debitis quis. Saepe, veniam harum voluptate dolore ducimus a, nemo quod qui eaque doloremque corporis earum repellat quas suscipit cum quae voluptatibus illo neque libero perspiciatis, pariatur odit aspernatur? Autem, dolores. </div> <hr> <div class="d"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi alias quos at temporibus quidem illum? Dicta, unde. Perferendis expedita inventore doloribus distinctio, eaque magni. Unde iste laudantium maiores recusandae, hic illum consequuntur asperiores ea deleniti odio velit eos! Adipisci doloribus debitis tempora officia magni repellendus. Repudiandae earum quos consequatur dignissimos enim impedit necessitatibus eum vel, corrupti quisquam reiciendis deleniti quidem itaque error numquam qui minima ut animi iusto? Doloremque, cum voluptatibus molestiae eius, soluta nostrum eum beatae aliquid possimus porro perspiciatis sed ut obcaecati a voluptas autem saepe inventore quia nisi. Excepturi commodi similique voluptates, maxime eveniet a vero tempora! </div> </body> </html>2. 元素浮动后的特点<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>元素浮动后的特点</title> <style> /* 1.脱离文档流 2.不管浮动前是什么元素，浮动后：默认的宽高是被内容撑开的，而且可以自定义设置 3.不会独占一行，可以与其它元素共用一行 4.不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding 5.不会像行内块一样被当作文本处理（没有行内块的空白问题） */ .outer { width: 800px; height: 600px; background-color: gray; padding: 10px; } .box { font-size: 20px; padding: 10px; } .box1 { background-color: skyblue; } .box2 { background-color: orange; float: left; /* width: 200px; height: 200px; */ /* margin-left: 20px; margin-right: 20px; margin-top: 20px; margin-bottom: 20px; */ } .box3 { background-color: green; float: left; } </style> </head> <body> <div class="outer"> <div class="box box1">盒子1</div> <div class="box box2">盒子2</div> <div class="box box3">盒子3</div> </div> </body> </html>3. 浮动后的影响<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>解决浮动后的影响</title> <style> /* 布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动 */ .outer { width: 500px; background-color: gray; border: 1px solid black; /* 第一种解决方案：给父元素指定高度 */ /* height: 122px; */ /* 第二种解决方案：给父元素也设置浮动，会带来其他影响 */ /* float: left; */ /* 第三种解决方案：给父元素设置 overflow: hidden */ /* overflow: scroll; */ } .box { width: 100px; height: 100px; background-color: skyblue; border: 1px solid black; margin: 10px; } .box1, .box2, .box3, .box4 { /* 使用clear的前提：本身必须是一个块元素，且本身没有浮动 */ float: left; } /* 第四种解决方案：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both */ /* .test { clear: both; } */ /* 第五种解决方案：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动（原理与方案四相同） */ .outer::after { content: ''; clear: both; display: block; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="test"></div> </div> <!-- <div style="background-color: orange;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque enim sed eum quasi nostrum ipsa nulla possimus facilis eos eligendi? Maxime quos eos iste dolore. Magni nulla non, adipisci voluptatum recusandae quibusdam sequi hic, consequuntur distinctio in reprehenderit? Quas voluptatum autem minus quam dolorum nostrum possimus numquam, at totam sed, eius veritatis dolore eos reprehenderit eveniet quis velit perferendis nihil modi molestiae suscipit eum. Nulla magni delectus eius unde illo? Porro delectus numquam assumenda, nulla sed fuga? Eum, eligendi. Ipsum consequatur inventore praesentium, sit rem repellat debitis dolorum perspiciatis aliquam magnam possimus! Obcaecati maiores hic cumque non suscipit, porro itaque odio consequatur, atque sed necessitatibus ipsa. Perferendis doloribus corrupti, alias, atque error qui officia, veritatis asperiores facilis quas labore numquam quidem rem animi perspiciatis. Totam, officia placeat ipsa ipsum consequatur odit aliquid tempore eaque quod tenetur! Delectus id voluptatem accusamus qui iste culpa nisi aperiam, illo asperiores numquam. Perferendis reprehenderit molestias facilis? Earum omnis magnam ducimus non eaque, obcaecati ipsum blanditiis illo alias, assumenda dolorem ipsam, placeat nisi. Architecto aliquam placeat blanditiis provident. Aut autem fugiat inventore, suscipit, ratione cupiditate voluptas omnis cum vitae at nihil dolor. Nesciunt rerum vero assumenda dolor, laborum vel? Deserunt alias corrupti natus impedit quis!</div> --> </body> </html>4. 解决浮动后的影响<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>解决浮动后的影响</title> <style> /* 布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动 */ .outer { width: 500px; background-color: gray; border: 1px solid black; /* 第一种解决方案：给父元素指定高度 */ /* height: 122px; */ /* 第二种解决方案：给父元素也设置浮动，会带来其他影响 */ /* float: left; */ /* 第三种解决方案：给父元素设置 overflow: hidden */ /* overflow: scroll; */ } .box { width: 100px; height: 100px; background-color: skyblue; border: 1px solid black; margin: 10px; } .box1, .box2, .box3, .box4 { /* 使用clear的前提：本身必须是一个块元素，且本身没有浮动 */ float: left; } /* 第四种解决方案：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both */ /* .test { clear: both; } */ /* 第五种解决方案：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动（原理与方案四相同） */ .outer::after { content: ''; clear: both; display: block; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="test"></div> </div> <!-- <div style="background-color: orange;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque enim sed eum quasi nostrum ipsa nulla possimus facilis eos eligendi? Maxime quos eos iste dolore. Magni nulla non, adipisci voluptatum recusandae quibusdam sequi hic, consequuntur distinctio in reprehenderit? Quas voluptatum autem minus quam dolorum nostrum possimus numquam, at totam sed, eius veritatis dolore eos reprehenderit eveniet quis velit perferendis nihil modi molestiae suscipit eum. Nulla magni delectus eius unde illo? Porro delectus numquam assumenda, nulla sed fuga? Eum, eligendi. Ipsum consequatur inventore praesentium, sit rem repellat debitis dolorum perspiciatis aliquam magnam possimus! Obcaecati maiores hic cumque non suscipit, porro itaque odio consequatur, atque sed necessitatibus ipsa. Perferendis doloribus corrupti, alias, atque error qui officia, veritatis asperiores facilis quas labore numquam quidem rem animi perspiciatis. Totam, officia placeat ipsa ipsum consequatur odit aliquid tempore eaque quod tenetur! Delectus id voluptatem accusamus qui iste culpa nisi aperiam, illo asperiores numquam. Perferendis reprehenderit molestias facilis? Earum omnis magnam ducimus non eaque, obcaecati ipsum blanditiis illo alias, assumenda dolorem ipsam, placeat nisi. Architecto aliquam placeat blanditiis provident. Aut autem fugiat inventore, suscipit, ratione cupiditate voluptas omnis cum vitae at nihil dolor. Nesciunt rerum vero assumenda dolor, laborum vel? Deserunt alias corrupti natus impedit quis!</div> --> </body> </html> -
浮动 1.1标准文档流块级元素：独占一行h1~h6,p,div,列表……行内元素：不独占一行span,a,img,strong……行内元素可以被包含在块级元素中，反之不行1.2 display<!-- block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联（可以有行内元素的属性），在一行 --> <style> div{ width: 100px; height: 100px; border: 1px solid red; display: inline; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style>注：display也是实现行内元素排列的一种方式，但通常情况下float使用较多。1.3 floatdiv{ margin: 10px; padding: 5px; } #father{ border: 1px solid red; } .layer01{ border: 1px solid red; display: inline-block; float: right; } .layer02{ border: 1px solid red; display: inline-block; float: right; } .layer03{ border: 1px solid red; display: inline-block; float: right; } .layer04{ border: 1px solid red; font-size: 16px; line-height: 24px; display: inline-block; float: right; }1.4 父级边框塌陷问题clear/* clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 clear: none; */ .layer04{ border: 1px solid red; font-size: 16px; line-height: 24px; display: inline-block; float: right; clear: right; }解决方案：1、增加父级元素的高度#father{ border: 1px solid cornflowerblue; height: 800px; }2、增加一个空的div标签，清除浮动.clear{ clear: none; margin: 0; padding: 0; } <div class="clear"></div>3、overflow/*在父级元素中，增加一个 overflow: hidden；方法*/ #father{ border: 1px solid cornflowerblue; overflow: hidden; }4、在父类添加一个伪类：after#father:after{ content: ''; display: block; clear: both }小结：浮动元素后面增加空div简单，但需注意代码中尽量避免空div设置父元素的高度如果元素有固定高度，会被限制overflow在下拉的一些场景中避免使用父类添加一个伪类：after（推荐使用）display：方向不可以控制float：浮动起来后会脱离标准文档流，需解决父级边框塌陷问题
