css入门教程（三）css盒子模型与网页布局方式

本文链接：https://blog.youkuaiyun.com/duan_2018/article/details/79821389

一、盒子模型

一个盒子模型包含外边距margin，边框border，内边距padding，内容content。

上面这个盒子模型的设计代码是：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;}

1.内边距padding的属性值

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

2.边框border
3.外边距margin

二、网页布局方式

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

1.相对定位

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2.绝对定位

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<h2 class="pos_abs">hahahahahaah</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

我们发现这里重叠了。

3.浮动定位

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
</style>
</head>

<body>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>

<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。
li 元素显示为行内元素（元素前后没有换行）。
这样就可以使列表排列成一行。ul 元素的宽度是 100%，
列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。
我们添加了颜色和边框，以使其更漂亮。
</p>

</body>
</html>

float只能在水平上浮动不能在垂直上浮动。

三、一个实例

<!doctype html>
<html>
<head>
<style>
#con{width:1000px;
height:960px;
border:#000000 solid 1px;
margin:0 auto;}
#header{
	height:10%;
	padding:1px;
	border:#000000 solid 1px;}
#left{
	float:left;
	top:10%;
	left:0;
	width:20%;
	height:80%;
	border:#000000 solid 1px;}
#right{
	position:relative;
	top:-80%;
	right:-60%;
	width:40%;
	height:26.5%;
	border:#000000 solid 1px;}
#middle{
	position:relative;
	top:0;
	left:20%;
	width:40%;
	height:40%;
	border:#000000 solid 1px;}
#footer{
	position:relative;
	top:-80%;
	left:0;
	width:100%;
	height:8.5%;
	border:#000000 solid 1px;}
</style>
</head>
<body>
<div id="con">
  <div id="header">
  <h1>A</h1>
  </div>
  <div id="left">  <h1>B</h1>
  </div>
  <div id="middle">  <h1>C</h1></div>
  <div id="middle">  <h1>D</h1></div>
  <div id="right">  <h1>E</h1></div>
  <div id="right">  <h1>F</h1></div>
  <div id="right">  <h1>G</h1></div>
  <div id="footer">  <h1>H</h1></div>
</div>
</body>
</html>