收藏
批改状态：合格
老师批语：看来你是缺了不少作业了, 布局才开始写, 加油呀
清除子级对父级的影响的方法：
html
<body> <div class="box1"> <div class="box2"> 子区块 </div> <!-- <div class="clear"></div> --> </div> </body>
css：
.box1 {
width: 300px;
border: 5px dashed red;
}
.box2 {
width: inherit;
height: 300px;
background-color: aqua;
float: left;
}方法一：
父级元素高度设置=子元素一样的高度*
css
.box1 {
height: 300px;
}方法二：
父元素一起嗨起来
css：
.box1 {
float: left;
}方法三：添加一个元素，抵消上一个元素的浮动
css：
.clear {
clear: both;
}方法四：给父级元素添加overfloer，专门来清除浮动
css：
.box1 {
overflow: hidden;
}三列布局（绝对定位+浮动定位）
html：
body> <div class="container"> <div class="header">头部</div> <div class="main"> <div class="left">左侧</div> <div class="content">内容区</div> <div class="right">右侧</div> </div> <!-- 将中间改为散列 --> <div class="footer">体部</div> </div> </body>
绝对定为css：
.container {
width: 1000px;
margin: auto;
}
.header {
height: 60px;
background-color: lightgray;
}
.footer {
height: 60px;
background-color: lightgray;
}
.main {
/* min-height: 800px;用内容来撑开高度 */
background-color: aquamarine;
margin: 5px auto;
}
.left {
width: 200px;
min-height: 800px;
background-color: green;
}
.content {
min-height: 800px;
background-color: red;
}
.right {
width: 200px;
min-height: 800px;
background-color: green;
}
.main {
/* 给定位父级设置定位属性 可以是相对 也可以是绝对 */
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
/* 内容区通过挤压得到的 margin */
.content {
margin-left: 200px;
margin-right: 200px;
}浮动css：
.container {
width: 1000px;
margin: auto;
}
.header {
height: 60px;
background-color: lightgray;
}
.footer {
height: 60px;
background-color: lightgray;
}
.main {
/* min-height: 800px;用内容来撑开高度 */
background-color: aquamarine;
margin: 5px auto;
overflow: hidden;
}
.left {
width: 200px;
min-height: 800px;
background-color: green;
}
.content {
min-height: 800px;
background-color: red;
}
.right {
width: 200px;
min-height: 800px;
background-color: green;
}
/* 浮动 */
.left {
float: left;
}
.right {
float: right;
}
.content {
float: left;
width: 600px;
}样式：
![4PKX~0}SP8(ZI7BUAN$IK]G.png](https://img.php.cn/upload/image/371/863/207/1568175185915726.png "1568175185915726.png")
总结
主要学习了如何清除浮动的影响（best：overflow：hidden）。了解了相对定位，绝对定位，固定定位。在制作登录网页时了解了要设置遮和透明度（opacity），在二维码图片区设置了父子元素，通过移动父级元素调整。在制作招生广告时，使用了js代码，cursor: pointer改变鼠标形状。
在配置三列布局中：父级元素设置定位属性可以随意设置不用注意，主题的高度由内容来撑开.
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
