Ell*_*ski 4 html css layout stylesheet width
我正在学习CSS,我试图创建一个简单的布局.
我将"标题"设置为宽度为100%,将"左侧"设置为宽度为20%,将"右侧"设置为80%.但是标题的宽度大于左侧和右侧的总宽度.为什么这样以及如何解决？
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
} <!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>编辑
感谢您的回答和一些阅读,我现在得到的问题是身体部分的边缘.当我使用body {margin:0;}时,"left"加上"right"在页面中占据更大的位置,而"header"占用的位置更小,因此它们的宽度相等.
另一个具有相同结果的解决方案是在"left:0; right:0; position:absolute;"周围添加一个"容器"div.
我理解为什么这些解决方案使"左"加"右"更大(因此它们占据了整个页面),我不知道的是为什么"标题"突然变小了.如果固定的"标题"不在常规流程中,为什么改变身体的边缘会对其产生影响呢？
body {
margin: 0;
}
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
border-top-left-radius: 0;
border-top-right-radius: 0;
top: 0;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>谢谢
当使用百分比宽度的margin,padding并且border不包括在计算中.所以你想确保所有这些都在相应的元素上设置为0.
margin: 0;
padding: 0;
border: none;
或者,您可以使用box-sizing将使计算包括padding和的属性border.那么你只需要考虑其他地方的利润.
box-sizing: border-box;