CSS构造模型
- div
- 边距
- 边框
- 定位
- 浮动
21.1 div
部分(division)---<div>元素,经常以div形式引用---是XHTML元素,用于定义XHTML文件中的区域.
1.添加div
<div>
<p>This is our content area.</p>
</div>
给div添加一个id
<div id="container">
<p>This is our content area.</p>
</div>
#container {
Padding: 20px;
Border:1px solid #000;
Background:#ccc;
}
2.添加子div
<div id="container">
<p>This is our content area.</p>
<div class="box">
<p>I'm in a box!</p>
</div>
<div class="box">
<p>I'm also in a box!</p>
</div>
</div>
.box {
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
3.div和上下文选择器
.box p {
Color: #333;
}
#container p {
Color: #333;
}
21.2 边距
外边距(margin)
外边距声明:
#container {
Margin-top: 20px;
Margin-left: auto;
Margin-right: auto;
Margin-bottom; 20px;
Width: 300px;
Border: 1px solid #333;
background: #ccc;
}
#container {
Margin: 20px auto 1em auto; /*上,右,下,左*/
}
用margin:auto居中
Body {
Text-align: center;
}
#container {
Width: 400px;
Margin: 10px auto 10px auto;
Padding: 20px;
Background: #ccc;
Text-align: left;
}
5.内边距(padding)
#container {
Padding-top: 20px;
Padding-left: 10%;
Padding-right: 1em;
Padding-bottom: 0;
Background: #ccc;
}
6.外边距,内边距和主体
Body {
Margin: 0;
Padding: 0;
}
21.3 边框
Border-style (边框样式)
None(无边框),dotted(点线),dashed(虚线),
Solid(实线),double(双线),groove(凹槽),ridge(凸槽),
Inset(凹边),outset(凸边)
/*上 右 下 左*/
Border-style: solid dotted inset outset;
Border-width(长度)
Border-top-width
Border-right-width
Border-bottom-width
Borer-left-width
Border-color
Border
Border-top
Border-right
Border-bottom
Border-left
Border(四周)Border-top(上)…
21.4 定位
P,h1和div等成为块级元素.意思是这些元素显示为一块内容,即"块框".与之相反,strong和span等元素称为行内元素,即"行内框".更多内容,后章在述.
(1).相对定位
#myBox {
Position: relative;
Top: 20px;
Left: 20px;
}
(2).绝对定位
#myBox {
Position:absolute;
Top: 20px;
Left: 20px;
}
21.5 浮动
.news img {
Float: left;
}
.news p {
Float: right;
}