Question

我为所有div设置了边框，但是当我删除边框时，它影响了我设置的定位。

＆＃13;

div {
	border: 1px solid #1bbc9b;
}

#main {
	width: 1020px;
	margin: auto;
}

#navbar {
	height: 95px;
}

#spacing {
	margin: 25px 0px 55px 25px;
	height: 47px;
}

#logo_img {
	margin-right: 12px;
	float: left;
}

#logo_txt {
	margin-top: 5px;
	font-size: 15px;
	font-weight: bold;
}

#logo_txt span {
	font-weight: normal;
	font-size: -0.5em;
}

.float_div {
	display: inline-block;
	position: relative;
	height: 47px;
}

#float_div_left {
	float: left;
	width: 25%; 
}

#float_div_left a:link, #float_div_left a:hover, #float_div_left a:active, #float_div_left a:visited {
	text-decoration: none;
	color: black;
}

#float_div_right {
	float: right;
	width: 58%; 
}

#nav_menu {
	margin: 3px 0px 0px 0px;
	list-style: none;
}

#nav_menu li {
	display: inline-block;
	margin-top: 1px;
}

#nav_menu li a {
	display: inline-block;
	padding: 10px 25px;
	text-decoration: none;
	color: black;
}

#nav_menu li a:hover, #nav_menu li a:active {
	background-color: #1bbc9b;
}

#jumbotron {
	height: 453px;
	background-image: url(../images/jumbotron.jpg);
	background-repeat: no-repeat;
}

#caption {
	margin: auto;
	margin-top: 40px;
	width: 585px;
	height: 350px;
}

#we_bb {
	color: white;
	text-align: center;
	font-weight: normal;
	font-size: 55px;
	margin-bottom: 30px;
}

#we_bb span {
	font-weight: bold;
}

#we_bb_1st_p {
	text-align: center;
	font-size: 18px;
	color: white;
	margin-top: 0px;
}

#learn_more {
	text-align: center;
	margin-top: 45px;
}

#learn_more a {
	display: inline-block;
	margin: auto;
	padding: 10px 20px;
	color: white;
	background-color: #1bbc9b;
	text-decoration: none;
}

#down_button_img {
	display: block;
	margin: auto;
	margin-top: 35px;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="Style/css_reset.css" />
		<link rel="stylesheet" href="Style/style.css" />
		<title>Site</title>
	</head>
	<body>
		<div id="main">
			<div id="navbar">
				<div id="spacing">
					<div class="float_div" id="float_div_left">
						<a href="index.html">
							<img src="images/b-logo.jpg" id="logo_img" />
							<p id="logo_txt">BAK-ONE <br/>
								<span>One Page Flat Template</span>
							</p>
						</a>
					</div>
					<div class="float_div" id="float_div_right">
						<ul id="nav_menu">
							<li><a href="#">HOME</a></li>
							<li><a href="#">PORTFOLIO</a></li>
							<li><a href="#">ABOUT</a></li>
							<li><a href="#">CONTACT</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div id="jumbotron">
				<div id="caption">
					<h1 id="we_bb">We Build <span>Brand</span></h1>
					<p id="we_bb_1st_p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
					<p id="learn_more"><a href="#">LEARN MORE</a></p>
					<img id="down_button_img" src="images/down_button.png" />
				</div>
			</div>
		</div>
	</body>
</html>

＆＃13;

带边框的网站 http://i62.tinypic.com/24cgwwi.jpg

无国界的网站 http://i60.tinypic.com/1gsjuc.jpg

Answer 1

将边框设置为透明色。

透明边框仍然保留了您正在隐藏它的边框的空间，其颜色已更改为不可见，因此它不会影响您的定位。

删除边框完成将影响您的定位（最初计算事物的方式），因为边框也会占用元素外部宽度（完整尺寸）的空间

div {
    border: 1px solid transparent ;
}

Answer 2

除了@ A.B的回答之外，您可以使用outline来做同样的事情，但不会像边框一样占用任何空间。但是，如果您的设计需要边框使用的空间，那么您将不得不更改元素大小或完全不使用它。

Answer 3

另一种方法是像Twitter Bootstrap那样做，并将box-sizing设置为border-box。这使得边框和填充是框的尺寸标注的一部分。 Bootstrap实际上是为整个文档执行此操作。

div {
    width: 100px;
    height: 100px;
    background: pink;
    box-sizing: border-box;
}
div.border {
    border: 2px solid #000;
}

<强> Demo

这种技术的优势在于您不会编写额外的CSS来处理大小调整问题。

删除边框而不影响位置

3 个答案: