CSS中可以使用负值吗？ [英] Is using negative values in CSS acceptable?
本文介绍了CSS中可以使用负值吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对编码和CSS都不陌生，这是我编写的第一页，要求我使用负值。我记得前段时间读到，最好不要使用负值。我不确定为什么无法找到该文章。
我也很感谢您在下面的代码中使用负值的反馈。我避免使用任何框架之类的东西，这样我就可以掌握CSS编码的全部概念。
我还使用了一个内部样式表，以便可以快速修改我的代码，而不是在2个不同的文件之间交换。我最肯定会在开发现实世界页面时考虑使用外部样式表。其次，这是我第一次使用导入使用重置样式表。
代码
< ;! DOCTYPE html PUBLIC-// W3C // DTD XHTML 1.0 Strict // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns = http://www.w3.org/1999/xhtml>
< head>
<元http-equiv = Content-Type content = text / html; charset = UTF-8 />
< meta http-equiv = Content-Language content = zh-cn />
<元名称=关键字 content = />
<元名称=说明 content = />
<元名称=作者 content = />
< title> Sample< / title>
< link rel = icon type = image / png href = />
< link rel = stylesheet type = text / css href = />
< style type = text / css media = all>
@import网址（ http://meyerweb.com/eric/tools/css/reset/reset.css）；
body {
字体家族：乔治亚州；
字体大小：1em;
}
#wrapper {
/ * background-color：＃FAEBD7; * /
宽度：960px；
保证金：0px自动；
}
#innerwrapper {
/ *背景颜色：＃CDC0B0; * /
溢出：自动;
}
#header {
/ * background-color：＃8B8378; * /
}
#logo {
background-color：＃000000;
浮动：左；
宽度：100像素；
高度：70像素；
颜色：#ffffff;
text-align：center;
padding-top：30像素；
}
#topnav {
/ * background-color：＃8B8970; * /
float：正确；
margin-top：50px;
宽度：300像素；
text-align：right;
}
＃状态{
/ * background-color：＃808080; * /
宽度：100px；
职位：相对；
top：-80px；
左：800px；
text-align：center;
}
#topnav ul {
字距：5px;
}
#topnav ul li {
display：inline;
}
＃分隔符{
边框底：1px虚线灰色；
margin-top：20px;
}
#content {
/ * background-color：＃68838B; * /
溢出：隐藏；
margin-top：60px;
}
#innercontent {
/ * background-color：＃778899; * /
浮点数：左；
宽度：600像素；
}
#rightcol {
/ * background-color：＃CDCDB4; * /
float：正确；
宽度：300像素；
}
#rightcol p + p {
保证金最高：1em;
}
#footer {
/ * background-color：＃CDB7B5; * /
margin-top：20px;
}
< / style>
< / head>
< body>
< div id = wrapper>
< div id = innerwrapper>
< div id = header>
< div id = logo> logo< / div>
< div id = topnav>
< ul>
< li>约< / li>
< li&br; browse< / li>
< li> join< / li>
< li> faq< / li>
< li> contact< / li>
< / ul>
< / div>
< div id = status>登录< / div>
< / div>
< / div>
< div id = separator>< / div>
< div id = content>
< div id = innercontent>
Lorem ipsum dolor atmet，在维他命元素的原始元素前庭sollicitudin semper neque。 Nibh ligula mi。 Faucibus rutrum elit turpis，nec congue quam ipsum felis neque et，wis amet和architecto eros congue。 Maecenassuspensissetellusarcueget pharetra，rhocus aenean sapien morbi necarcu，vivamus aliquet lorem amet处，vestibulum purus sociis varius id。不合法的巨人比目鱼油条，前庭的多角虫，风叶，rised sed等，libero和non eros commodo。 Taciti eu leo sollicitudin malesuada，nibh duis amet aenean，dioo aptent ultrices。 Tristique morbi nunc ullamcorper ut curabitur。等等，请在直径上将sem rutrum vehicula sem sed插入。等坐在猫的座位上。
Quam eget sed elit natoque velit，enim mauris mauris urna，inte amettellus illo ipsum，dolor fermentum cursus enim mollis tristique porttitor。非dignissim。坐在ligula leo tincidunt，没有quis ut ut ut placerat quisque，没有冒充风险。胎盘，足额前庭割，盘状es虫病。 Sem sed抑制了严重的尿失禁，导致严重的尿失禁。 Viverra amet脚踏车在Ornare欧盟（内蒙古）。 Justo mussuspensionisse praesent等人，acmet mattis convallis ullamcorper felis，ac发酵罐，ipull auctor et maecenas，quili aliquam molestiae。 Massa elitsuspississ penatibus molestie libero dolor，non leo vitae，sollicitudin a，platea tristique iaculis，tortor augue non est。 Cursus integer vehicula quis，justo eget，nunc vel eros lectus。
< / div>
< div id = rightcol>
< p>段1< / p>
< p>段2< / p>
< / div>
< / div>
< div id = footer> footer< / div>
< / div>
< / body>
< / html>
编辑-根据wdm的建议更新了代码
<！DOCTYPE html PUBLIC-// W3C // DTD XHTML 1.0 Strict // EN
http：// www。 w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns = http://www.w3.org/1999/xhtml>
< head>
<元http-equiv = Content-Type content = text / html; charset = UTF-8 />
< meta http-equiv = Content-Language content = zh-cn />
<元名称=关键字 content = />
<元名称=说明 content = />
<元名称=作者 content = />
< title> Sample< / title>
< link rel = icon type = image / png href = />
< link rel = stylesheet type = text / css href = />
< style type = text / css media = all>
@import网址（ http://meyerweb.com/eric/tools/css/reset/reset.css）；
body {
字体家族：乔治亚州；
字体大小：1em;
}
#wrapper {
/ * background-color：＃FAEBD7; * /
宽度：960px；
保证金：0px自动；
}
#innerwrapper {
/ *背景颜色：＃CDC0B0; * /
溢出：自动;
}
#header {
/ * background-color：＃8B8378; * /
}
#logo {
background-color：＃000000;
浮动：左；
宽度：100像素；
高度：70像素；
颜色：#ffffff;
text-align：center;
padding-top：30像素；
}
＃状态{
/ *背景颜色：＃808080; * /
头寸：相对；
top：-85px；
左：780px；
宽度：100像素；
text-align：center;
}
#topnav {
/ * background-color：＃8B8970; * /
float：正确；
宽度：300像素；
margin-top：-70px;
text-align：right;
}
#topnav ul {
字距：5px;
}
#topnav ul li {
display：inline;
}
＃分隔符{
边框底：1px虚线灰色；
margin-top：20px;
}
#content {
/ * background-color：＃68838B; * /
溢出：隐藏；
margin-top：60px;
}
#innercontent {
/ * background-color：＃778899; * /
浮点数：左；
宽度：600像素；
}
#rightcol {
/ * background-color：＃CDCDB4; * /
float：正确；
宽度：300像素；
}
#rightcol p + p {
保证金最高：1em;
}
#footer {
/ * background-color：＃CDB7B5; * /
margin-top：20px;
}
< / style>
< / head>
< body>
< div id = wrapper>
< div id = innerwrapper>
< div id = header>
< div id = logo> logo< / div>
< div id = status>已登录< / div>
< div id = topnav>
< ul>
< li>约< / li>
< li&br; browse< / li>
< li> join< / li>
< li" / li>
< li> contact< / li>
< / ul>
< / div>
< / div>
< / div>
< div id = separator>< / div>
< div id = content>
< div id = innercontent>
Lorem ipsum dolor atmet，在维他命元素的原始元素前庭sollicitudin semper neque。 Nibh ligula mi。 Faucibus rutrum elit turpis，nec congue quam ipsum felis neque et，wis amet和architecto eros congue。 Maecenassuspensissetellusarcueget pharetra，rhocus aenean sapien morbi necarcu，vivamus aliquet lorem amet处，vestibulum purus sociis varius id。不合法的巨人比目鱼油条，前庭的多角虫，风叶，rised sed等，libero和non eros commodo。 Taciti eu leo sollicitudin malesuada，nibh duis amet aenean，dioo aptent ultrices。 Tristique morbi nunc ullamcorper ut curabitur。等等，请在直径上将sem rutrum vehicula sem sed插入。等坐在猫的座位上。
Quam eget sed elit natoque velit，enim mauris mauris urna，inte amettellus illo ipsum，dolor fermentum cursus enim mollis tristique porttitor。非dignissim。坐在ligula leo tincidunt，没有quis ut ut ut placerat quisque，没有冒充风险。胎盘，足额前庭割，盘状es虫病。 Sem sed抑制了严重的尿失禁，导致严重的尿失禁。 Viverra amet脚踏车在Ornare欧盟（内蒙古）。 Justo mussuspensionisse praesent等人，acmet mattis convallis ullamcorper felis，ac发酵罐，ipull auctor et maecenas，quili aliquam molestiae。 Massa elitsuspississ penatibus molestie libero dolor，non leo vitae，sollicitudin a，platea tristique iaculis，tortor augue non est。 Cursus integer vehicula quis，justo eget，nunc vel eros lectus。
< / div>
< div id = rightcol>
< p>第1< / p>
< p>第2< / p>
< / div>
< / div>
< div id = footer> footer< / div>
< / div>
< / body>
< / html>
解决方案
在这里，我将我的评论整合成一个答案。 / p>
首先：负值是完全可以接受的，但是我会谨慎使用它们。它们在某些情况下绝对有用
HTML标记应遵循页面的视觉流程。我不会按照您最初的意图使用负边距。一种常见用法是覆盖元素时。例如： http://jsfiddle.net/wdm954/jwBzv
我该如何修复您的顶级菜单代码？我会将 #status 和您的 UL 包装在 #topnav 中像这样...
< div id = topnav>
< div id = status>已登录< / div>
< ul>
< li>约< / li>
< li&br; browse< / li>
< li> join< / li>
< li" / li>
< li> contact< / li>
< / ul>
< / div>
然后在CSS上使用以下内容……
#topnav {
float：right;
}
#topnav #status {
text-align：center;
底边保证金：15px；
}
#topnav li {
display：inline;
margin-left：15px;
}
这里是演示： http://jsfiddle.net/wdm954/RwEWN/3/
希望帮助！
I am new to the world of coding as well as CSS and this is the first page I have ever put together that required me to use negative values. I remember reading somewhere some time ago that it is best to stay away from using negative values. I am unsure why as I can't seem to locate that article any more.
I would appreciate your feedback on the use of negative values in my code below as well. I have avoided using any frameworks or the like so that I can grasp the concept of what CSS coding is all about.
Also I have used an internal stylesheet so that I can quickly amend my code rather than swapping between 2 different files. I would most certainly look at using an external stylesheet when developing a real world page. Secondly this is the first time I have used a reset stylesheet using import.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
@import url('http://meyerweb.com/eric/tools/css/reset/reset.css');
body {
font-family: Georgia;
font-size: 1em;
}
#wrapper {
/* background-color: #FAEBD7; */
width: 960px;
margin: 0px auto;
}
#innerwrapper {
/* background-color: #CDC0B0; */
overflow: auto;
}
#header {
/* background-color: #8B8378; */
}
#logo {
background-color: #000000;
float: left;
width: 100px;
height: 70px;
color: #ffffff;
text-align: center;
padding-top: 30px;
}
#topnav {
/* background-color: #8B8970; */
float: right;
margin-top: 50px;
width: 300px;
text-align: right;
}
#status {
/* background-color: #808080; */
width: 100px;
position: relative;
top: -80px;
left: 800px;
text-align: center;
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
display: inline;
}
#separator {
border-bottom: 1px dashed gray;
margin-top: 20px;
}
#content {
/* background-color: #68838B; */
overflow: hidden;
margin-top: 60px;
}
#innercontent {
/* background-color: #778899; */
float: left;
width: 600px;
}
#rightcol {
/* background-color: #CDCDB4; */
float: right;
width: 300px;
}
#rightcol p + p {
margin-top: 1em;
}
#footer {
/* background-color: #CDB7B5; */
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>join</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="status">login</div>
</div>
</div>
<div id="separator"></div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="rightcol">
<p>paragraph1</p>
<p>paragraph2</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
EDIT - Updated code as per wdm's suggestion
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
@import url('http://meyerweb.com/eric/tools/css/reset/reset.css');
body {
font-family: Georgia;
font-size: 1em;
}
#wrapper {
/* background-color: #FAEBD7; */
width: 960px;
margin: 0px auto;
}
#innerwrapper {
/* background-color: #CDC0B0; */
overflow: auto;
}
#header {
/* background-color: #8B8378; */
}
#logo {
background-color: #000000;
float: left;
width: 100px;
height: 70px;
color: #ffffff;
text-align: center;
padding-top: 30px;
}
#status {
/* background-color: #808080; */
position: relative;
top: -85px;
left: 780px;
width: 100px;
text-align: center;
}
#topnav {
/* background-color: #8B8970; */
float: right;
width: 300px;
margin-top: -70px;
text-align: right;
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
display: inline;
}
#separator {
border-bottom: 1px dashed gray;
margin-top: 20px;
}
#content {
/* background-color: #68838B; */
overflow: hidden;
margin-top: 60px;
}
#innercontent {
/* background-color: #778899; */
float: left;
width: 600px;
}
#rightcol {
/* background-color: #CDCDB4; */
float: right;
width: 300px;
}
#rightcol p + p {
margin-top: 1em;
}
#footer {
/* background-color: #CDB7B5; */
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo">logo</div>
<div id="status">Logged in</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>join</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div id="separator"></div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="rightcol">
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
解决方案
Let me consolidate my comments into an answer here.
First: Negative values are perfectly acceptable however I would use them sparingly. They are definitely useful in certain situations
HTML markup should follow the visual flow of your page. I wouldn't use a negative margin in the way you originally intended. One common use is when overlaying elements. Ex: http://jsfiddle.net/wdm954/jwBzv
How would I fix your top menu code? I would wrap #status and your UL within #topnav like this...
<div id="topnav">
<div id="status">Logged in</div>
<ul>
<li>about</li>
<li>browse</li>
<li>join</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
And use something along these lines for the CSS...
#topnav {
float: right;
}
#topnav #status {
text-align: center;
margin-bottom: 15px;
}
#topnav li {
display: inline;
margin-left: 15px;
}
Here is the demo: http://jsfiddle.net/wdm954/RwEWN/3/
Hope this helps!
这篇关于CSS中可以使用负值吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
