前端postion定位问题
在页面中以标准流的形式添加两个盒子，第一个盒子设置宽度和高度，第一个盒子包括内容极其盒子加上定位，为什么第二个盒子设置width:100％呈现的页面效果不是width：100％，而是与第一个盒子同一个宽度。
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>故乡报刊title>
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/fourth.css" />
<link rel="stylesheet" href="../font/iconfont.css" />
<script src="../font/iconfont.js">script>
head>
<body>
<header>
<div class="nav">
<div class="logo">
<img src="../images/logo.png" alt="" />
div>
<nav>
<ul>
<li><a href="#">首页a>li>
<li><a href="#">故乡历史a>li>
<li><a href="#">故乡风俗a>li>
<li><a href="#">故乡报刊a>li>
<li><a href="#">故乡建筑a>li>
<li><a href="#">故乡美食a>li>
<li><a href="#">访客留言a>li>
ul>
nav>
div>
header>
<div class="img">
<img src="../images/banner.jpg" alt="" />
div>
<div class="line">故乡报刊div>
<div class="center">
<img src="../images/magazine.jpg" alt="" />
<div class="text_magazine">
<p>
《读者》杂志发行量从创刊时月发行量3万册，到2006年月平均发行量898万册，稳居中国期刊排名第一，亚洲期刊排名第一，世界综合性期刊排名第四。同时，《读者》杂志行销世界90多个国家和地区，在美国、日本、澳大利亚、新加坡等国家和香港等地区拥有众多读者。可以说，有华人的地方就有《读者》。《读者》被誉为“中国人的心灵读本”“中国期刊第一品牌”。
p>
<p>
《读者》杂志创办于1981年，原名《读者文摘》。1982年初，美国《读者文摘》来函指出：甘肃人民出版社使用《读者文摘》中文名是不正当的，不符合国际权协定。中美两家《读者文摘》长达数年的版权之争从此开始。后为化解与美国《读者文摘》发生的版权纠纷，1993年3月号《读者文摘》刊登征名启事，在读者中引起强烈反响，最后采用“读者”一名。1993年第7期，《读者文摘》正式改名为《读者》。
p>
<span> <a href="http://www.baidu.com" target="_blank">Morea>span>
div>
<div class="column">
<h3>主要栏目h3>
<p>文苑：卷首语、文苑、书林一叶、幽默小品、原创精品p>
<p>人物：人物、名人轶事p>
<p>社会：杂谈随感、话题p>
<p>生活：心理人生、经营之道、理财p>
<p>文明：在海外、他山石、历史一叶、文化茶座、人与自然、影像p>
<p>家园：人与自然、生物世界p>
<p>点滴：言论、漫画与幽默、意林、点滴p>
<p>互动：智趣、读者•作者•编者p>
<p>艺术：封面、美术插页、歌曲p>
div>
div>
<div class="section">
<div class="section_text">
<h2>读者h2>
<ul>
<li>
<div class="icon-x">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baokanzazhi">use>
svg>
div>
<h3>办刊宗旨h3>
<div class="icon_text">
<p>博采中外p>
<p>荟萃精华p>
<p>启迪思想p>
<p>开阔眼界p>
div>
li>
<li>
<div class="icon-x">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baokanzazhi">use>
svg>
div>
<h3>办刊理念h3>
<div class="icon_text">
<p>高雅p>
<p>清新p>
<p>隽永p>
div>
li>
<li>
<div class="icon-x">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-geren">use>
svg>
div>
<h3>办刊对象h3>
<div class="icon_text">
<p>社会各界群众p>
<p>青年p>
<p>知识界p>
div>
li>
ul>
div>
div>
<div class="line">关于读者div>
<div class="time">
<div class="time-axis">
<div class="left">
<span class="dot">span>
<span class="jiantou">span>
<div class="con">2013年9月,获得“2013年度中国邮政发行报刊百强排行榜”第一名。div>
div>
<div class="right">
<span class="dot">span>
<span class="jiantou">span>
<div class="con">2015年,获得“最受海外机构用户青睐的中国期刊发行排行”第一名。div>
div>
<div class="left">
<span class="dot">span>
<span class="jiantou">span>
<div class="con">2018年9月,获得“2018年度中国邮政发行报刊百强排行榜”第四名。div>
div>
<div class="right">
<span class="dot">span>
<span class="jiantou">span>
<div class="con">]2019年6月,获得“2018数字阅读影响力期刊TOP100”海外榜单第一名，中国国内榜单第二名。div>
div>
div>
<footer>
<div class="footer">
<img src="../images/logo.png" alt="">
<ul>
<li>
<span class="iconfont icon-dingwei1">span>地址：甘肃省兰州市XXX街XX大厦
li>
<li>
<span class="iconfont icon-dianhua">span>联系方式：189XXXX8924
li>
<li>
<span class="iconfont icon-youjian">span>邮箱：18919168924@163.com
li>
<li>
<span class="iconfont icon-fangkuang">span>Copyright© 2022 GaoXupeng. All rights
li>
ul>
div>
<div class="return">
<nav>
<p>
<a href="#">首页a><em>|em>
<a href="#">故乡历史a><em>|em>
<a href="#">故乡资源a><em>|em>
<a href="#">故乡风俗a><em>|em>
<a href="#">故乡报刊a><em>|em>
<a href="#">故乡建筑a><em>|em>
<a href="#">故乡美食a>
p>
nav>
div>
footer>
body>
html>
.img {
/* margin: 0 auto; */
width: 1519px;
height: 648px;
background-color: #b1bbf9;
}
.img img {
width: 1519px;
height: 648px;
}
.line {
padding: 0 20px 0;
margin: 85px 465px;
line-height: 1px;
font-size: 30px;
font-family: simsun;
color: #3F4E61;
text-align: center;
border-left: 200px solid #d6dde7;
border-right: 200px solid #d6dde7;
}
.center {
margin: 0 auto;
width: 1200px;
height: 335px;
/* background-color: orchid; */
}
.center img {
float: left;
margin-left: 65px;
margin-top: 50px;
width: 185px;
height: 230px;
}
.center .text_magazine {
float: left;
margin-left: 40px;
width: 435px;
height: 320px;
/* background-color: orange; */
}
.center .text_magazine span {
display: block;
margin-top: 12px;
text-align: center;
line-height: 35px;
width: 65px;
height: 40px;
background-color: #9d6e51;
}
.text_magazine p {
text-align: justify;
font-family: simsun;
}
.center .text_magazine span a {
color: #ffffff;
}
.center .column {
float: left;
margin-left: 15px;
width: 438px;
height: 320px;
/* background-color: indianred; */
border-left: 3px solid #9d6e51;
}
.center .column h3 {
margin-left: 20px;
font-size: 25px;
font-family: simsun;
}
.center .column p {
margin-bottom: 8px;
margin-left: 20px;
line-height: 24px;
font-size: 14px;
font-family: simsun;
width: 95%;
height: 25px;
background-color: #9d6e51
}
.section {
width: 100%;
height: 400px;
background-color: #ddd37e;
}
.section_text {
margin: 0 auto;
width: 1200px;
height: 400px;
background-color: indianred;
}
.section_text h2 {
font-size: 35px;
font-family: simsun;
color: #ffffff;
text-align: center;
line-height: 90px;
}
.section_text ul {
margin-left: 188px;
margin-top: 22px;
width: 810px;
height: 265px;
/* background-color: yellow; */
}
.section_text ul li {
float: left;
margin-left: 80px;
width: 170px;
height: 240px;
/* background-color: orange; */
}
.section_text ul li .icon-x {
margin-left: 45px;
margin-top: 20px;
text-align: center;
line-height: 70px;
font-size: 40px;
width: 80px;
height: 80px;
background-color: violet;
border-radius: 50%;
}
.section_text ul li .icon-x .icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.section_text ul li h3 {
text-align: center;
line-height: 50px;
font-family: simsun;
}
.icon_text {
text-align: center;
font-size: 16px;
font-family: simsun;
color: #ffffff;
width: 170px;
height: 86px;
/* background-color: greenyellow; */
}
.time{
margin: 0 auto;
width: 1519px;
height: 330px;
/* background-color: #b1bbf9; */
}
.time-axis {
width: 804px;
height: 330px;
/* border: 2px solid red; */
margin: 0 auto;
}
.time-axis .left {
position: relative;
float: left;
width: 400px;
/* height: 300px; */
/* background-color: yellowgreen; */
border-right: 4px solid #b1bbf9;
}
.time-axis .right {
position: relative;
float: right;
width: 400px;
/* height: 300px; */
/* background-color: cornflowerblue; */
border-left: 4px solid #b1bbf9;
}
.time-axis .dot {
position: absolute;
top: 50%;
margin-top: -7px;
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 7px;
border: 2px solid #b1bbf9;
}
.time-axis .left .dot {
right: -9px;
}
.time-axis .right .dot {
left: -9px;
}
.time-axis .jiantou {
position: absolute;
top: 50%;
margin-top: -10px;
display: block;
border: 10px solid transparent;
}
.time-axis .left .jiantou {
right: -1px;
border-left: 10px solid yellow;
}
.time-axis .right .jiantou {
left: 0px;
border-right: 10px solid yellow;
}
.time-axis .con {
padding: 15px;
margin-right: 20px;
font-size: 18px;
font-family: simsun;
/* height: 200px; */
background-color: #fff;
border-radius: 10px;
}
.time-axis .left .con {
margin-right: 20px;
}
.time-axis .right .con {
margin-left: 20px;
}
footer {
width: 100%;
height: 310px;
background-color: #3f4e61;
}
.footer {
position: relative;
margin: 0 auto;
width: 1200px;
height: 270px;
/* background-color: cornflowerblue; */
}
.footer img {
margin-top: 110px;
width: 329px;
height: 70px;
}
.footer ul {
position: absolute;
left: 420px;
top: 82px;
color: #fff;
font-family: simsun;
width: 350px;
/* background-color: #ddd37e; */
}
.footer ul li {
float: left;
height: 35px;
}
.footer span {
display: block;
float: left;
padding: 0 8px 0 0;
}
.return {
height: 50px;
background-color: #26395b;
}
.return nav {
margin: 0 auto;
width: 1200px;
height: 50px;
}
.return p {
line-height: 50px;
text-align: center;
height: 50px;
}
.return p a {
padding: 0 0 0 20px;
font-size: 15px;
font-family: simsun;
color: #fff;
}
.return p em {
font-style: normal;
margin-left: 15px;
color: #fff;
}
.return p a:hover {
color: #ddd37e;
}
time的div标签没闭合，导致footer变为div这个time的子元素了
是关于footer宽度，盒子time的宽度与footer宽度保持一致，而不是100%。怎样才能100%，我加入time盒子是为让footer盒子与电脑页面铺平的宽度。
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632