西安火车站建设,wordpress资源主题,wordpress 自动替换,自媒体app推广是做什么的从 HTML 到 CSS#xff1a;开启网页样式之旅#xff08;七#xff09;—— CSS浮动 前言一、浮动的简介1.没有浮动的代码和效果2.加入浮动的代码和效果 二、元素浮动后的特点1. 脱离文档流2.宽高特性#xff1a;3.共用一行#xff1a;4.margin 特性#xff1a;5.区别于行… 从 HTML 到 CSS开启网页样式之旅七—— CSS浮动 前言一、浮动的简介1.没有浮动的代码和效果2.加入浮动的代码和效果 二、元素浮动后的特点1. 脱离文档流2.宽高特性3.共用一行4.margin 特性5.区别于行内块元素 三、浮动小练习练习 1盒子 1 右浮动移动后代码 练习 2盒子 1 左浮动移动后代码 练习 3所有盒子都浮动移动后代码 练习 4所有盒子浮动后盒子 3 落下来问题代码 练习 5所有盒子浮动后盒子 3 卡住了 前言
在之前的博客中我们已经详细探讨了 CSS 样式的继承、元素的默认样式、元素间空白问题以及行内块的幽灵空白问题等诸多内容这些知识为我们构建网页样式打下了坚实的基础。而今天我们将聚焦于 CSS 中一个极为重要的布局方式 —— 浮动深入了解它的相关概念、特点以及在实际布局中如何运用并处理其产生的影响 一、浮动的简介
最初浮动是为了实现文字环绕图片的效果而诞生的比如在网页中我们想要文字围绕着一张图片进行展示就可以利用浮动来达成这样的效果。发展到现在浮动已然成为主流的页面布局方式之一它能够帮助我们灵活地对网页中的各种元素进行排版布局创造出丰富多样的页面结构。
1.没有浮动的代码和效果
!DOCTYPE html
html langenheadmeta charsetUTF-8titleFloat Example/titlelink relstylesheet hrefstyles.cssstyle.container {width: 800px;margin: 0 auto;}/style
/headbodydiv classcontainerimg src../HTMLpart2Bootstrap/bootstrap-5.1.3-dist/图片/HTML5.jpg width200 height200p classtextLorem ipsum dolor sit amet consectetur adipiscing elit. Fuga, esse eveniet. Soluta quas beataeaperiam velit voluptatibus at veniam minima mollitia nostrum maxime eveniet eos, totam facilis animilaudantium eius placeat earum aspernatur rerum voluptatum, sunt repellat? Quidem recusandae iusto velitincidunt veritatis quasi, labore voluptatem odit debitis eum ullam vero illum tempora dignissimosvoluptatibus eius cumque, optio nulla assumenda! Magnam quisquam laborum doloribus eveniet minima eum!Repellat, quibusdam. Illum, consectetur blanditiis fugiat quasi reiciendis inde voluptate rem sequiexplicabo, temporibus facilis quod tenetur voluptates aliquam aperiam, ducimus sint. Similique mollitiaillum liquid eos ero suscipit necessitatibus dolore maxime?/p/div
/body/html2.加入浮动的代码和效果
!DOCTYPE html
html langenheadmeta charsetUTF-8titleFloat Example/titlelink relstylesheet hrefstyles.cssstyle/* 给图片添加左浮动使其可以让文字环绕在右侧 */img {float: left;margin-right: 10px; /* 可以设置图片和文字之间的间隔 */}/style/headbodydiv classcontainerimg src../HTMLpart2Bootstrap/bootstrap-5.1.3-dist/图片/HTML5.jpg width200 height200p classtextLorem ipsum dolor sit amet consectetur adipiscing elit. Fuga, esse eveniet. Soluta quas beataeaperiam velit voluptatibus at veniam minima mollitia nostrum maxime eveniet eos, totam facilis animilaudantium eius placeat earum aspernatur rerum voluptatum, sunt repellat? Quidem recusandae iusto velitincidunt veritatis quasi, labore voluptatem odit debitis eum ullam vero illum tempora dignissimosvoluptatibus eius cumque, optio nulla assumenda! Magnam quisquam laborum doloribus eveniet minima eum!Repellat, quibusdam. Illum, consectetur blanditiis fugiat quasi reiciendis inde voluptate rem sequiexplicabo, temporibus facilis quod tenetur voluptates aliquam aperiam, ducimus sint. Similique mollitiaillum liquid eos ero suscipit necessitatibus dolore maxime?/p/div
/body/html二、元素浮动后的特点
1. 脱离文档流 元素设浮动后脱离正常文档流按浮动方向调整位置不再按原有顺序排列原位置也不再占据。 2.宽高特性 浮动前不论何种元素浮动后默认宽高由内容撑开也能手动设置宽高以满足布局要求 3.共用一行 浮动元素可与其他元素共用一行多个浮动盒子能依宽度和浮动方向紧凑排列空间够就不换行让布局更灵活紧凑 4.margin 特性 浮动元素不会出现 margin 合并及塌陷问题能精准设置四个方向的 margin 和 padding 来控制间距与内边距。 5.区别于行内块元素 浮动元素不像行内块会被当文本处理不存在空白问题基于浮动规则排版更精细。 三、浮动小练习
练习 1盒子 1 右浮动 headmeta charsetUTF-8title03_浮动的小练习/titlestyle.outer {width: 500px;background-color: gray;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;margin: 10px;}/style
/head
bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div
/body效果图 移动后代码
headmeta charsetUTF-8title03_浮动的小练习/titlestyle.outer {width: 500px;background-color: gray;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;margin: 10px;}.box1 {float: right;}/style
/head
bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div
/body在上述代码中通过给类名为 box1 的 div 元素设置 float: right使其向右浮动 练习 2盒子 1 左浮动 移动后图片
移动后代码
headmeta charsetUTF-8title03_浮动的小练习/titlestyle.outer {width: 500px;background-color: gray;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;margin: 10px;}.box1 {float: left;}/style
/head
bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div
/body这里将 box1 的浮动属性设置为 float: left它就会向左浮动靠页面左侧显示后面的文本内容会环绕在它的右侧实现了左浮动的布局效果。 练习 3所有盒子都浮动 移动后代码
headmeta charsetUTF-8title03_浮动的小练习/titlestyle.outer {width: 500px;background-color: gray;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;margin: 10px;float: left;}/style
/head
bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div
/body给所有类名为 box 的 div 元素都设置 float: left它们就都会向左浮动在同一行依次排列只要一行空间足够通过设置 margin-right 来控制盒子之间的间距展现出所有盒子浮动后的布局效果。 练习 4所有盒子浮动后盒子 3 落下来 问题代码
headmeta charsetUTF-8title03_浮动的小练习/titlestyle.outer {width: 500px;background-color: gray;border: 1px solid black;}.box {width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;margin: 10px;float: left;}/style
/head
bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div
/body练习 5所有盒子浮动后盒子 3 卡住了
headmeta charsetUTF-8title03_浮动的小练习/titlestyle.outer {width: 500px;background-color: gray;border: 1px solid black;}.box {width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;margin: 10px;float: left;}.box1 {height: 230;}/style
/head
bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div
/body只增加盒子1的长度将三挤下去 非常感谢您的阅读喜欢的话记得三连哦
