网站建设项目验收付款,注册个人公司流程和费用最新,一个人怎么开发自己的app,c++线上培训机构哪个好浮动的设计初衷
float: left/right/both;浮动是网页布局最古老的方式。
浮动一开始并不是为了网页布局而设计#xff0c;它的初衷是将一个元素拉到一侧#xff0c;这样文档流就能够包围它。
常见的用途是文本环绕图片#xff1a; 浮动元素会被移出正常文档流#xff0c;…浮动的设计初衷
float: left/right/both;浮动是网页布局最古老的方式。
浮动一开始并不是为了网页布局而设计它的初衷是将一个元素拉到一侧这样文档流就能够包围它。
常见的用途是文本环绕图片 浮动元素会被移出正常文档流并被拉到容器边缘。
清除浮动的原因及方法
浮动元素的高度不会追加到父元素上。
如果浮动的元素比容器高那么就可能发生容器折叠现象 这时我们就需要清除浮动。
清除浮动不太优雅的方式在容器末尾添加一个空 div设置 clear: both清除两边浮动使得容器会向下扩展包含它。
div styleclear: both;/div既然是添加一个 div 元素不如使用伪元素 ::after 来实现。
.clearfix::after{display: block;content: ;clear: both;
}这个 clearfix 类是添加到包含浮动元素的元素上而不是浮动元素本身。
使用 display: block 的原因默认情况下伪元素是内联元素而不是块级元素。为了确保伪元素占据一整行并且在浮动元素之后换行我们需要将其设置为块级元素。更重要的是clear 属性只对块级元素生效。
设置 content: 的原因解决一些旧版浏览器的 Bug。 清除浮动后的另一个问题浮动元素的外边距不会折叠到清除浮动后的容器外部但是非浮动元素会。
对此解决该问题的clearfix的修改版如下
.clearfix::after,
.clearfix::before{display: table;content: ;
}.clearfix::after{clear: both;
}为什么使用 display:table 而不是 display: block 外边距无法通过单元格元素折叠。 浮动陷阱浏览器会将浮动元素尽可能地放在靠上的地方。
如果众多的浮动元素高度不一致最后导致布局会千变万化。哪怕是 1px 的高度差距也会导致浮动陷阱。
解决方法给每一行的第一个元素清除左浮动。
假设每行有 m 个元素
.floatElement::nth-child(mn1){clear: left
}浮动布局示例解析古诗欣赏
初始源代码如下
index.html
div classcontainerheaderh1古诗欣赏/h1/headermain classmain clearfixh3五言绝句/h3divdiv classmediaimg classmedia-image src相思.pngdiv classmedia-bodyh4相思·王维/h4p红豆生南国春来发几枝。愿君多采撷此物最相思。/p/div/divdiv classmediaimg classmedia-image src听筝.pngdiv classmedia-bodyh4听筝·李端/h4p鸣筝金粟柱素手玉房前。欲得周郎顾时时误拂弦。/p/div/divdiv classmediaimg classmedia-image src江雪.pngdiv classmedia-bodyh4江雪·柳宗元/h4p千山鸟飞绝万径人踪灭。孤舟蓑笠翁独钓寒江雪。/p/div/divdiv classmediaimg classmedia-image src春晓.pngdiv classmedia-bodyh4春晓·孟浩然/h4p春眠不觉晓处处闻啼鸟。夜来风雨声花落知多少。/p/div/div/div/main
/divstyle.css
:root {box-sizing: border-box; /* 修改盒模型 */
}*,
::before,
::after {box-sizing: inherit; /* 继承 box-sizing */
}body {background-color: aliceblue;font-family: Arial, Helvetica, sans-serif;
}/* 猫头鹰选择器 */body * *{margin-top: 1.5em;
}header{padding: 1em 2em;background-color: antiquewhite;border-radius: .5em;margin-bottom: 2em;
}.main{padding: 0 1.5em;background-color: white;border-radius: .5em;
}.container{max-width: 800px; /* 自动适配宽度 */margin: 0 auto; /* 双容器模式 水平居中 */
}.media{float: left;margin: 0 1.5em 1.5em 0; /* 重置 margin */width: calc(50% - 1.5em); /* 从宽度里减去 1.5em */padding: 1.5em;background-color:rgb(238, 245, 247);border-radius: .5em;
}.media-image{width: 60px;height: 60px;
}/* 清除浮动 *//* .clearfix::after{display: block;content: ;clear: both;
} *//* 清除浮动修改版 */.clearfix::after,
.clearfix::before{display: table;content: ;
}.clearfix::after{clear: both;
}/* 解决浮动陷阱 */.media:nth-child(odd){clear: left;
}效果图 实现图片被文字环绕
.media-image{width: 100px;height: 100px;float: left; /* 左浮动 */
}.media-body{margin-top: 0; /* 覆盖猫头鹰选择器 */
}.media-body h4{margin-top: 0; /* 覆盖用户代理样式表 */
}效果 实现图片在左文字在右 如上图片被包含在了相邻的同级元素 media-body 中。
如果想实现图片在左文字在右可以为文字创建一个块级格式上下文block formatting contextBFC。
BFC 将内部与外部隔绝开内外互不影响。
创建 BFC 的方式
float 不为 none。overflow 不为 visible。display 为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid。position 为 absolute 或 fixed。
网页的根元素就是一个顶级的 BFC。
CSS 修改如下
.media-image{width: 60px;height: 60px;float: left;margin-right: 1.5em; /* 图片与文字间增加一定间距 */
}.media-body{margin-top: 0; /* 覆盖猫头鹰选择器 */overflow: auto; /* 创建 BFC */
}效果图 注意使用浮动或 display: inline-block创建BFC的元素的宽度会变为 100% 。
基于浮动实现网格系统 大部分的 CSS 框架都实现了自己的网格系统在一个行容器内放置若干列容器列的宽度由列容器的类决定。
div classrowdiv classcolumn-1/divdiv classcolumn-1/divdiv classcolumn-1/divdiv classcolumn-1/divdiv classcolumn-1/divdiv classcolumn-1/divdiv classcolumn-3/divdiv classcolumn-3/div
/div使用网格系统可以提高代码的可复用性。
网格系统不参与行列元素的视觉样式只负责设置宽度和定位。在行列内的元素就不必再考虑宽度和定位了。
/* 网格系统 */.row::after{display: block;content: ;clear: both;
}[class*column-]{float: left;padding: 0 0.75em; /* 左右设置内边距 */margin-top: 0; /* 去掉顶部外边距 */
}.column-1{width: 8.333%;
}
.column-2{width: 16.6667%;
}
.column-3{width: 25%;
}
.column-4{width: 33.3333%;
}
.column-5{width: 41.6667%;
}
.column-6{width: 50%;
}
.column-7{width: 58.333%;
}
.column-8{width: 66.6667%;
}
.column-9{width: 75%;
}
.column-10{width: 83.333%;
}
.column-11{width: 91.6667%;
}
.column-12{width:100%;
}完整 CSS
:root {box-sizing: border-box; /* 修改盒模型 */
}*,
::before,
::after {box-sizing: inherit; /* 继承 box-sizing */
}body {background-color: aliceblue;font-family: Arial, Helvetica, sans-serif;
}/* 猫头鹰选择器 */body * *{margin-top: 1.5em;
}header{padding: 1em 2em;background-color: antiquewhite;border-radius: .5em;margin-bottom: 2em;
}.main{padding: 0 1.5em 1.5em;background-color: white;border-radius: .5em;
}.container{max-width: 800px; /* 自动适配宽度 */margin: 0 auto; /* 双容器模式 水平居中 */
}/* 媒体对象的样式 */.media{padding: 1.5em;background-color:rgb(238, 245, 247);border-radius: .5em;
}.media-image{width: 60px;height: 60px;float: left;margin-right: 1.5em;
}.media-body{margin-top: 0; /* 覆盖猫头鹰选择器 */overflow: auto; /* 创建 BFC */
}.media-body h4{margin-top: 0; /* 覆盖用户代理样式表 */
}/* 清除浮动 *//* .clearfix::after{display: block;content: ;clear: both;
} *//* 清除浮动修改版 */.clearfix::after,
.clearfix::before{display: table;content: ;
}.clearfix::after{clear: both;
}/* 网格系统 */.row::after{display: block;content: ;clear: both;
}[class*column-]{float: left;padding: 0 0.75em; /* 左右设置内边距 */margin-top: 0; /* 去掉顶部外边距 */
}.column-1{width: 8.333%;
}
.column-2{width: 16.6667%;
}
.column-3{width: 25%;
}
.column-4{width: 33.3333%;
}
.column-5{width: 41.6667%;
}
.column-6{width: 50%;
}
.column-7{width: 58.333%;
}
.column-8{width: 66.6667%;
}
.column-9{width: 75%;
}
.column-10{width: 83.333%;
}
.column-11{width: 91.6667%;
}
.column-12{width:100%;
}效果图如下 与前面的相比这个导致了内容出现了错位没有对齐标题。
使用负 margin 拉伸行元素解决该问题
/* 网格系统 */.row{margin-left: -0.75em;margin-right: -0.75em;
}...
...效果图 最终代码。
