做网站合同,培训网站开发流程,全国电子商务公共服务网,网页设计实训内容步骤记录绝对定位的元素会脱离文档流#xff0c;它们是相对于包含块#xff08;通常是最近的具有相对定位、绝对定位或固定定位属性的父元素#xff09;进行定位的。当你把一个绝对定位的元素的高度设置为100%时#xff0c;它会相对于其包含块的高度来确定自己的高度。如果包含块是…
绝对定位的元素会脱离文档流它们是相对于包含块通常是最近的具有相对定位、绝对定位或固定定位属性的父元素进行定位的。当你把一个绝对定位的元素的高度设置为100%时它会相对于其包含块的高度来确定自己的高度。如果包含块是整个屏幕那么这个绝对定位的元素设置为100%高度就会占满整个屏幕。
相反float属性用于让元素浮动在其父元素内部但是它不会使父元素的高度被撑开因此一个使用float的元素设置高度为100%并不会让它占满整个屏幕因为float的元素仍然存在于父元素的文档流中而并不会脱离文档流。
因此通过绝对定位的元素设置高度为100%可以让这个元素占满整个屏幕而使用float的元素设置高度为100%则不能实现同样的效果因为float元素并没有脱离文档流。
方法一、绝对定位absolute margin)
给左右两边的元素设置absolute这样左右两边的元素脱离标准文档流的控制中间的元素自然会上来然后给中间的元素设置margin留出左右两边元素的位置。左右两边的元素放在前面可以不计较位置但中间的元素必须放在最后否则中间元素的margin设置会把左右两边元素顶到下面。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 这里样式的初始化也很重要不然有空隙 */* {margin: 0;padding: 0;}body {/* 为了使得中间的 div 能够自适应屏幕100%的高度要这样设置 */height: 100vh;}.left,.right {/* 绝对定位的左右 div 是直接放在 body 元素中的而 body 的高度会自动扩展以适应内容的高度也可以通过设置 height: 100vh 让其填满整个视口高度但只涉及左右div的时候没有必要因为脱离了文档流高度被设置为 100% 时其定位的参考对象是 body 或者视口所有可以占满整个屏幕。*/width: 200px;height: 100%;position: absolute;}.left {background-color: green;left: 0;}.right {background-color: blue;right: 0;}.center {/* 中间的 div 还在正常文档流布局中没有脱离文档流它现在的父元素是body要是body没有设置显性高度值的话那它的高度设置为 100% 是无效的。 */height: 100%;margin: 0 200px;background-color: red;}/style
/headbodydiv classleftleft/divdiv classrightright/divdiv classcentercenter/div
/body/html
注随着浏览器窗口缩小会发生压缩左右元素重叠
方法二、自身浮动float
给左右元素分别设置左浮动和右浮动之后给中间的元素设置margin设置方法同方法一三个div的顺序也和方法一的一样。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {height: 100vh;}.left,.right {width: 200px;height: 100%;}.left {background-color: green;float: left;}.right {background-color: blue;float: right;}.center {height: 100%;margin: 0 200px;background-color: red;}/style
/headbodydiv classleftleft/divdiv classrightright/divdiv classcentercenter/div
/body/html
注随着浏览器窗口缩小右边元素会被挤到下一行
方法三、圣杯布局BFC负margin
使用margin负值法使用圣杯布局首先需要将中间元素用div包住设置float使其形成一个BFC并且要设置宽度整个宽度和左边元素的margin负值要相互配合也就是margin-left -中间元素外层div宽度 右边元素的margin负值要和它自己的宽度配合也就是margin-left “-右边元素宽度”。什么圣杯布局就是拿中间元素当底左右元素调整位置打配合。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {/* 这里依旧发挥着重要的作用 */height: 100vh;}.wrap {width: 100%;/* 这里的100%高度影响着center的高度 */height: 100%;float: left;}.left,.right {width: 200px;height: 100%;}.left {background-color: green;float: left;margin-left: -100%;}.right {background-color: blue;float: left;margin-left: -200px;}.center {height: 100%;background-color: red;}/style
/headbodydiv classwrapdiv classcentercenter/div/divdiv classleftleft/divdiv classrightright/div
/body/html
注随着浏览器窗口缩小会发生压缩左右元素重叠继续缩小之后右边元素会又会被挤到下一行但是同方法二有不同。
方法四、 flex布局 将左中右三个元素用div包裹起来给外层div设置display:flex之后给中间元素设置flex:1三个元素的顺序是固定的中间元素要放在中间不能兼容IE8及以下浏览器。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}body {/* 灵魂酱汁 */height: 100vh;}.wrap {width: 100%;height: 100%;display: flex;}.left,.right {width: 200px;height: 100%;}.left {background-color: green;}.right {background-color: blue;}.center {/* 灵魂酱汁 */flex: 1;height: 100%;background-color: red;}/style
/headbodydiv classwrapdiv classleftleft/divdiv classcentercenter/divdiv classrightright/div/div
/body/html
注随着浏览器窗口的缩小会发生压缩但是不会重叠和换行
