1、外边距——margin
外边距属性,用户设定HTML元素和在它外部的元素之间的间距,可以对元素的上下左右分别设置不同的外边距。注意外边距值不从父元素中继承。
设定外边距属性值有三种方法:长度、比例值或者auto。
- /* css页面 */
- /*Basic container */
- #container
- {
- margin-top:50px;
- margin-left:auto;
- margin-right:auto;
- margin-bottom:50px;
- border:1px solid #000;
- background:#ccc;
- width:300px;
- }
- <!--HTML页面-->
- <div id="container">
- Content<br/><p>I'm also in a box!</p>
- </div>
上面的样式使div的上边距50px,使用margin:auto将元素居中;是否一定会和浏览器上方距离50px还不一定,这还要看body的样式的上内距的值来决定。经过我在ie中的测试,这两个值会取较大的一个值作为两者之间的间距。
注意:margin:auto此属性对IE6居然无效!!!所以居中需要使用其它属性,比如align="center"。
2、内边距——padding
内边距是HTML元素的边框和元素内容之间的距离。内边距的设定值可以选择长度和百分比,没有auto值。
- #container
- {
- padding-top:30px;
- padding-left:50%;
- padding-right:30px;
- padding-bottom:0px;
- }
建议:由于各浏览器之间默认的margin和padding的值都不一样,因此建议在body选择器中设定margin和padding的值。
3、边框——border
任何元素在周边都可以有边框,可以设置四边都有边框,也可以只设置一部分。边框的属性比较灵活,你可以设置宽度、颜色和样式等。
border-style属性
此属性用来设定元素边框样式。边框样式有:none(无边框)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(凹槽)、ridge(凸槽)、inset(凹边)、outset(凸边)。
border-width属性
设定边框宽度,可以逐个或一次性定义宽度;在定义border-width属性值之前,需要先声明border-style属性。本属性还存在三个设定值:thin、medium和thick。不设定此属性值,默认为medium。
border-color属性
颜色属性只有一个,所以如果定义多种颜色,必须使用缩写方式。注意一点:如果不声明边框的颜色,边框将继承元素或父元素中的对应值。
border属性
如果边框四边的设定值都一样,则可以使用border属性进行缩写。
- /* css页面 */
- /*Basic container */
- #container
- {
- border-style:dashed dotted solid ridge;
- border-top-width:thin;
- border-right-width:20px;
- border-bottom-width:medium;
- border-left-width:thick;
- border-color:#000 #999 #333 #ccc;
- }
- /* 另几种缩写形式 */
- #container
- {
- border-top:#000 thin dashed;
- border-right:#999 20px dotted;
- border-bottom:#333 medium solid;
- border-left:#ccc thick ridge;
- }
- #container
- {
- border:#000 thin dashed;
- }