div入门之边框（border)，页面水平居中效果（margin)

最新推荐文章于 2022-07-12 14:28:55 发布

最爱林丽明小姐

最新推荐文章于 2022-07-12 14:28:55 发布

阅读量1.6w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： div+css的应用

本文链接：https://blog.youkuaiyun.com/kissme_a/article/details/18908775

div+css的应用专栏收录该内容

5 篇文章

订阅专栏

标记：<div></div>

一行始终只有一个div标记

没有特征性，css更容易控制

border是复合属性：

1.border-width

2.border-style:none(默认值）无边框，hidden,dotted,dashed,solid,double,groove,ridge,inset,outset

3.border-color

//style.css
#first{
	width:300px;
	height:200px;
	border:1px solid #fba;
}

<!doctype html>
<html>
<head>
	<title>div的概念</title>
	<link rel = "stylesheet" href = "style.css" type = "css/style.css"/>
</head>
<body>
	<div id="first">第一个div</div>
	<div>第二个div</div>
	<div>第三个div</div>
</body>
</html>

页面水平居中效果 margin{0 auto}

//style.css
#bannar{
	width:300px;
	height:200px;
	border:1px solid #fba;
	margin:0 auto;
}

<html>
<head>
	<title>div的概念</title>
	<link rel = "stylesheet" href = "style.css" type = "css/style.css"/>
</head>
<body>
	<div id="bannar">第一个div</div>
</body>
</html>