下午全部(或晚上/早上/晚上(。关于我的一个项目，我正在寻找正确的方向。这个布局是针对tumblr的(不是公司的实际页面，所以请不要对我大喊大叫(，这是我设法制作的第一个代码。问题是，在制作完成后，我注意到...它做得很差。我使用了太多的填充、边距和其他可以剪掉的废话。
我迫切地想尝试重写代码，使用百分比、rems/ems、vh/vw 等，同时仍然保持布局/设计 100% 完好无损。然而，问题是我不知道如何开始，确切地，甚至要剪掉什么，同时仍然保持间距和这样的完整性。例如，假设我想完全消除我的后期容器 (.pc( 的像素测量值，我如何确保它保持在同一确切的位置(至少在共享相同视口测量值的屏幕上(与这些边距，同时使用百分比？我如何以百分比甚至 vw/vh 开始测量div 容器？
请知道，我不是想让别人为我做这件事，或者类似的事情。我只是想朝着我可以开始的正确方向推动。这是我的代码：https://pastebin.com/q5cFtVQP 和一个片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
<!-- BROWSER TITLE -->
<title>𝐃𝐄𝐌𝐄𝐓𝐄𝐑 .</title>
<!-- END OF BROWSER TITLE -->
<!-- BROWSER ICON -->
<link rel="shortcut icon" href="https://66.media.tumblr.com/e948812964cb16505f4cd4f894344288/672e88b582120b94-84/s540x810/9301ad0a7a1dc0235256ca2aa89738258b0383a5.png">
<!-- END OF BROWSER ICON -->
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,900,700,700italic,500italic,500' rel='stylesheet' type='text/css'>
<!-- END OF FONTS -->
<style type="text/css">
/* PULSE ANIMATION */
.pulsate { -webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.5; }
@-webkit-keyframes pulsate { 0% { opacity: 0.5; }
50% { opacity: 1.0;}
100% { opacity: 0.5; } }
/* END OF PULSE ANIMATION */
/* FOLLOW BUTTONS */
.iframe-controls--desktop { position:fixed;
top:0px;
right:0px;
z-index:214748364789123456789;
-filter:invert(100%);
-webkit-filter:invert(100%);
-webkit-transform:scale(0.6,0.6);
-webkit-transform-origin: 100% 0%;
-ms-transform-origin:100% 0%;
-ms-transform:scale(0.6,0.6);
transform:scale(0.6,0.6);
transform-origin:100% 0%; }
/* END OF FOLLOW BUTTONS */
/* SELECTION */
::selection { background:#ff40f3; }
::-moz-selection { background:#ff40f3; }
/* END OF SELECTION */
/* SCROLLBAR */
::-webkit-scrollbar-thumb { background:#ff62f5;
border-radius:25px;linear-gradient(to bottom, #b1e0f5 , #ffc4f6);
width:8px;
height:5px; }
::-webkit-scrollbar { background:#292929;
border-radius:25px;
height:5px;
width:8px; }
/* END OF SCROLLBAR */
/* EMBEDS */
embed, object, video { max-width: 200px; }
img { max-width:180px;
height:auto;
width:auto; }
/* END OF EMBEDS */
/* BLOG STYLINGS */
html { background-color:#e6eaeb;
color:#e6eaeb;
font-family:'Roboto', sans-serif;
font-size:11px;
text-align:left;
word-spacing:3px;
text-transform:uppercase; }
.tc a:hover, .nav a:hover, .pagc a:hover,#mybtn:hover { cursor: pointer;
color: #ff62f5;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out; }
.posts a:hover, .pnc a:hover { color: #ff62f5;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out; }
.divider { border-top: 6px solid #02afff;
border-radius:5px;
margin:auto;
width:80%; }
pre, small, sup, sub { font-size:1rem;
font-family:'Roboto', sans-serif; }
blockquote { border-left:4px solid;
color:#ff62f5;
padding-left:5px;
margin-left:3px;
width:94%; }
blockquote p { font-family:'Roboto', sans-serif;
color:#efefef; }
blockquote blockquote { margin-left:1px; }
h3 { text-transform:uppercase;
color:#ff62f5;
text-align:center;
font-family:'Bowlby One', cursive;
font-size:1.5rem;
letter-spacing:1px; }
h1, h2 { color:#02afff;
text-decoration:none;
line-height:25px;
padding-bottom:2px;
font-family:'Bowlby One', cursive;
text-align:center;
text-transform:uppercase;
font-size:2rem;
margin-top:10px;
margin-right:15px;
background-color:#313131;
box-shadow: 0 -4px #ff62f5 inset; }
p { font-family:'Roboto', sans-serif; }
b, strong { color:#02afff; }
i { color:#ff62f5;
font-style:normal; }
/* END OF BLOG STYLINGS */
/* READ MORE BUTTON */
#more { color:#e6eaeb;
text-decoration:none;
display:inline-block;
font-family:'Bowlby One', cursive;
font-size:1rem;
text-transform:uppercase;
text-align:center;
padding:2px;
background-color:#ff62f5;
border-radius:25px; }
#more:hover { color:#02afff;
cursor: pointer; }
/* END OF READ MORE BUTTON */
/* SCROLL TO TOP BUTTON */
#stt { position: fixed; /* Fixed/sticky position */
z-index:99999999999999;
display: none; /* Hidden by default */
top:613px; /* Place the button at the bottom of the page */
left:1029px; /* Place the button 30px from the right */
border: none; /* Remove borders */
outline: none; /* Remove outline */
font-family:'Bowlby One', cursive;
background-color: #02afff; /* Set a background color */
color:#e6eaeb;
cursor: pointer; /* Add a mouse pointer on hover */
padding:6px;
border-radius:15px; /* Rounded corners */
text-transform:uppercase;
text-align:center;
font-size:1rem; /* Increase font size */ }
/* END OF SCROLL TO TOP BUTTON */
/* PERMALINK PAGE */
.permc { margin-top:5px;
margin-left:18px;
left:368px;
width:387px;
max-height:220px;
background-color:#252525;
overflow-x:hidden;
border-left:25px solid #ff62f5; }
.permc p, .permc a { color:#ff62f5;
margin:0 auto;
margin-top:0px;
text-decoration:none;
display:inline-block;
font-family:'Bowlby One', cursive;
font-size:1rem;
text-transform:uppercase; }
.permc img.avatar { display:none; }
.permc li { list-style-type:none;
margin:0;
padding:0; }
/* END OF PERMALINK PAGE */
/* MAIN TITLE */
.mtc { margin-top:45px;
margin-bottom:45px;
position:absolute;
z-index:1;
left:385px;
width:648px;
height:96px;
background-color:#252525;
border-left:25px solid #ff62f5;
padding:0 -15px -40px 0;
-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
-moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39); }
.mt { font-family: 'Bowlby One', cursive;
color:#e6eaeb;
text-indent:20px;
font-size:5.9rem;
text-shadow:3px 5px 1px #6bb6fa; }
/* END OF MAIN TITLE */
/* POSTS */
.pc { position:absolute;
padding-top:98px;
padding-bottom:6px;
top:14px;
left:368px;
width:445px;
min-height:450px;
margin-bottom:15px;
background-color:#313131;
border-top:15px solid #02afff;
border-bottom:15px solid #02afff;
-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
-moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39);
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.39); }
.posts { width:375px;
font-weight:900;
max-height:350px;
min-height:150px;
margin-top:5px;
margin-left:18px;
padding-left:10px;
left:368px;
background-color:#252525;
overflow-x:hidden;
overflow-y:auto;
border-left:25px solid #ff62f5; }
.posts a { text-decoration:none;
box-shadow:0 -4px #ff62f5 inset;
font-family: 'Bowlby One', cursive;
color:#02afff;
padding-bottom:5px;
font-size:1rem; }
/* END OF POSTS */
/* POST TITLE */
.ptc { width:375px;
margin-top:5px;
margin-left:18px;
padding-left:10px;
left:368px;
background-color:#252525;
border-left:25px solid #ff62f5; }
.pt { color:#e6eaeb;
text-decoration:none;
line-height:35px;
padding-bottom:5px;
font-family:'Bowlby One', cursive;
text-align:center;
text-transform:uppercase;
font-size:2.8rem;
padding-top:5px;
margin-right:15px;
text-shadow:3px 3px 1px #6bb6fa }
/* END OF POST TITLE */
/* POST TAGS */
.tc { width:367px;
padding-left:10px;
padding-right:10px;
margin-left:18px;
margin-top:5px;
background-color:#252525;
border-left:25px solid #ff62f5; }
.tc a { color:#e6eaeb;
text-decoration:none;
display:inline-block;
font-family:'Bowlby One', cursive;
font-size:1rem;
text-transform:uppercase;
text-align:center;
margin-top:5px;
margin-bottom:5px;
padding:4px;
background-color:#02afff;
border-radius:25px; }
/* END OF POST TAGS */
/* NAVIGATION CONTAINER + NAVIGATION */
.navc { position:fixed;
top:547px;
left:818px;
width:242px;
min-height:32px;
background-color:#313131;
border-top:15px solid #02afff;
border-bottom:15px solid #02afff; }
.nav { display:inline block;
width:67px;
float:left;
height:24px;
margin-top:4px;
margin-left:2px;
background-color:#252525;
border-left:10px solid #ff62f5; }
.nav a { text-decoration:none;
font-family: 'Bowlby One', cursive;
color:#e6eaeb;
text-align:center;
font-size:1.3rem;
margin-left:4px;
margin-top:3px;
text-shadow:2px 1px 1px #0081bd; }
/* END OF NAVIGATION */
/* PAGINATION */
.pagc { position:fixed;
top:613px;
left:818px;
max-width:148px;
height:15px;
padding:7px;
background-color:#02afff;
border-radius:25px; }
.pagc a { color:#e6eaeb;
font-size:.9rem;
text-decoration:none;
font-family: 'Bowlby One', cursive; }
/* END OF PAGINATION */
/* SIDEBAR 1 + CONTAINER */
.sbc1 { position:fixed;
top:155px;
left:818px;
width:242px;
height:327px;
background-color:#313131;
border-top:15px solid #02afff;
border-bottom:15px solid #02afff;
overflow-y:auto;
z-index:1; }
.sb1 { margin-right:10px;
margin-left:10px;
font-weight:900; }
/* END OF SIDEBAR 1 + CONTAINER */
/* POSTNOTES */
.pnc { width:250px;
height:45px;
background-color:#252525;
padding-left:10px;
margin-left:18px;
line-height:2.8;
margin-top:35px;
border-left:25px solid #ff62f5; }
.pnc a { text-decoration:none;
color:#02afff;
font-family: 'Bowlby One', cursive;
font-size:.9rem;
display:inline-block;
text-transform:uppercase;
text-align:center;
box-shadow:0 -4px #ff62f5 inset; }
/* END OF POSTNOTES CONTAINER */
/* MODAL POPUP */
/* MODAL OPEN BUTTON */
#mybtn { width:242px;
position:fixed;
height:26px;
background-color:#02afff;
border:none;
top:516px;
left:818px;
font-size:1.6rem;
color:#e6eaeb;
font-family: 'Bowlby One', cursive; }
button:focus { outline: none; }
/* END OF MODAL OPEN BUTTON */
/* MODAL BOX */
.modal { display:none; /* Hidden by default */
position:fixed; /* Stay in place */
z-index:9999999999999999999; /* Sit on top */
padding-top:50px; /* Location of the box */
left:0;
top:0;
overflow-y:auto;
width:100%; /* Full width */
height:100%;
background-color:rgb(0,0,0); /* Fallback color */
background-color:rgba(0,0,0,0.95); /* Black w/ opacity */ }
/* END OF MODAL BOX */
/* MODAL CONTENT */
.modal-content { position: relative;
background-color: #313131;
margin:auto;
overflow-y:auto;
padding:0;
border-top:15px solid #02afff;
border-bottom:15px solid #02afff;
width:680px;
max-height:85%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,1);
-webkit-animation-name:zoom;
-webkit-animation-duration:0.4s;
animation-name:zoom;
animation-duration: 0.4s }
.modal-body { padding: 5px 26px;
font-size:1rem;
font-weight:900;
color:#e6eaeb; }
/* END OF MODAL CONTENT */
/* MODAL ANIMATION */
@keyframes zoom {0% {transform: scale(1,1);}
50% {transform: scale(1.2,1.2);}
100% {transform: scale(1,1);} }
/* END OF MODAL ANIMATION */
/* MODAL CLOSE BUTTON */
.close { color:#e6eaeb;
width:85px;
text-decoration:none;
font-family:'Bowlby One', cursive;
font-size:1rem;
text-transform:uppercase;
text-align:center;
margin:0 auto;
margin-top:2%;
padding:4px;
background-color:#02afff;
border-radius:25px; }
.close:hover { cursor: pointer;
color: #ff62f5;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out; }
/* END OF MODAL CLOSE BUTTON */
/* END OF MODAL POPUP */
/* SVG GRAPHICS */
/* BOTTOM WAVE */
#wave { position:fixed;
z-index:-100;
width:100%;
bottom:-3px;
background-repeat:repeat-x;
left: 0px;
right: 0px; }
/* END OF BOTTOM WAVE */
/* RIGHT BLOB */
#blob1 {position:fixed;
margin:auto;
left:860px;
top:80px;
bottom:0px;
width:500px;
height:515px;
overflow: hidden; }
#blob1stroke {position:fixed;
margin:auto;
stroke:#ffa6f9;
stroke-width:1px;
transform:rotate(10deg);
left:860px;
top:80px;
bottom:0px;
width:500px;
height:515px;
overflow: hidden; }
/* END OF RIGHT BLOB */
/* LEFT BLOB */
#blob2 { position:fixed;
margin:auto;
left:50px;
top:-80px;
z-index:-2;
bottom:0px;
width:500px;
height:515px;
overflow: hidden; }
#blob2stroke { position:fixed;
margin:auto;
left:50px;
top:-80px;
z-index:-2;
stroke:#ffa6f9;
stroke-width:1px;
transform:rotate(10deg);
bottom:0px;
width:500px;
height:515px;
overflow: hidden; }
/* END OF LEFT BLOB */
</style>
(如果这很重要，这是一个现场演示：https://kittycodes-preview.tumblr.com/(
任何帮助不胜感激！(注意：在任何人想要指出"不正确"的布局之前;Tumblr的编码布局设置非常非正统。css 和 html 一起使用专用块来发布等，如果您尝试部署代码本身，它实际上看起来会很糟糕(。
我使用了太多的填充、边距和其他可以削减的废话 外。
为什么您认为填充和边距是无稽之谈？你指的是什么"其他"废话？我从未在 Web 应用程序中构建过在某种程度上不使用填充和边距的网站或视图。
我迫切地想尝试使用百分比重写代码， REMS/EMS、VH/VW 等，同时仍保持布局/设计 100% 完整。
这是因为您阅读了一篇说您应该使用这些单位的中等文章吗？不同的单位在不同情况下很有用。
例如，假设我想完全消除像素测量 我的邮政容器(.pc(，如何确保它保留在同一 确切的点(至少在共享相同视口的屏幕上 测量(与这些边际，同时使用百分比？
为什么需要消除像素测量？像素本身并没有什么问题。这取决于情况和您要完成的任务。
我什至如何以百分比甚至 vw/vh 来测量div 容器 开始？
老实说，您似乎没有做过任何阅读或付出太多努力来教育自己。这些都是你问的非常基本的事情，通过学习如何编写代码，你将更容易找到答案。话虽如此，您以百分比衡量div 的方式与以百分比衡量任何东西的方式相同......100%是全部...50%是一半...等。
我可以理解为什么查看端口单位与百分比会引起一些混乱。
width: 100vw等于用户屏幕宽度的 100%。
width: 100%等于元素父级宽度的 100%。
我建议你从像 w3schools.com 这样的地方开始，开始建立回答你遇到的问题所需的基本知识基础。