标签：
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;
}
标签：
原文地址：http://www.cnblogs.com/lifi/p/5722722.html
