想要实现一个赏心悦目的网页,不要一上来就做内容,先要规划好大致布局,布局好了再依次往里面填充内容,不然很容易出现盒子之间塌陷、版排丑陋(没错,说的就是我的网页QAQ)之类的问题。
规划好大致布局后还要解决高度塌陷:
父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果必然是父元素的高度为0,这也就导致了父元素高度塌陷问题。
浮动脱离文档流,这个问题会对整个页面布局带来很大影响,如何解决高度坍塌问题,我们需要清除浮动
简而言之就是 子元素设置浮动,父元素未设置高度,这个时候父元素的高度就会变为0
解决浮动带来的布局影响/解决高度塌陷的问题:
1、给父元素设置高度(不建议使用)
2、额外标签法(不推荐使用)
优点:语法简单
缺点:会给也没增加很多不必要的结构/元素
清除浮动的语法:
选择器{
clear:left/right/both
}
3、给产生高度塌陷的父元素添加overflow属性
可选值:
1、hidden
2、auto
3、scroll
优点:语法简单
缺点:不希望父元素的溢出内容隐藏(一般不使用)
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
4、添加clearfix的class值
额外标签法的升级版,不会给页面添加无谓的结构
.clearfix::after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
5、伪元素法的升级
.clearfix::before,.clearfix::after{
content:"";
display:table;
}
.clearfix::after{
clear:both;
}
这里运用了 overflow: hidden;
运行代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试鸭3</title>
</head>
<style>
#box1 {
width: 1500px;
height: 200px;
background-color: rgb(214, 196, 196);
margin: 0 auto;
overflow: hidden;
}
#boxs {
width: 1500px;
height: 600px;
background-color: white;
overflow: hidden;
}
#box2 {
width: 300px;
height: 600px;
background-color: gold;
float: left;
overflow: hidden
}
#box22 {
width: 150px;
height: 300px;
background-color: greenyellow;
margin-top: 50px;
margin-left: 75px;
overflow: hidden;
position: fixed;
}
#box3 {
width: 900px;
height: 600px;
background-color: rgb(240, 176, 209);
float: left;
overflow: hidden
}
#box4 {
width: 300px;
height: 600px;
background-color: gold;
float: left;
overflow: hidden
}
#box44 {
width: 150px;
height: 300px;
background-color: greenyellow;
margin-top: 50px;
margin-left: 75px;
overflow: hidden;
position: fixed;
}
#box5 {
width: 1500px;
height: 200px;
background-color: rgb(214, 196, 196);
}
</style>
<body>
<div id="box1">头部内容</div>
<div id="boxs">
<div id="box2">左侧边栏
<div id="box22">左侧广告</div>
</div>
<div id="box3">主体内容</div>
<div id="box4">右侧边栏
<div id="box44">右侧广告</div>
</div>
</div>
<div id="box5">底部内容</div>
</body>
</html>
成品展示:
可以看到无论窗口怎么滚动,被position 属性规定元素fixed定位了的左侧广告(box22)和右侧广告(box44):position: fixed;
相对于浏览器窗口固定,元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动。
注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素和其他元素重叠。
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |