CSS-盒模型

body{
line-height:1.6em;  /*改变行间距*/
}

盒模型

从CSS的角度来看，每个元素就是一个盒子，每个盒子由一个内容区以及可选的内边距、边框和外边距组成。

内容区：包含内容

内容区被可选的透明内边距包围

内边距周围可能放置一个可选的边框

最后，有一个可选的透明外边距包围所有部分

内边距和外边距都是用来提供更多可见的空间，不能对内边距和外边距指定颜色，也不能加任何装饰。

如何设置段落的盒子

首先将段落增加到一个类当中，这样可以只为这个段落创建一些定制样式

.guarantee{
border-color:black;  /*设置边框为黑色*/
border-width:1px;  /*设置边框宽度*/
border-style:solid;  /*设置边框为实线*/
background-color:#a7cece;
}

 padding属性：用来对内容四周设置相同的内边距

 margin属性：用来对内容四周设置相同的外边距

.guarantee{
border-color:black;
border-width:1px;
border-style:solid;
background-color:#a7cece;
padding:25px;
margin:30px;
}

 background-image属性：为元素增加一个背景图像

.guarantee{
background-image:url(images/background.gif);
}

.guarantee{
background-image:url(images/background.gif);
background-repeat:no-repeat;  /*拒绝重复*/
background-position:top left;  /*定位在左上角*/
}

background-position属性可选项：top、left、right、bottom、center

background-repeat可选项：

• no-repeat：只显示一次
• repeat-x：只在水平方向上重复
• repeat-y：只在垂直方向上重复
• inherit：按父元素的设置来处理

.guarantee{
padding:25px;
padding-left:80px;  /*只改变左侧内边距，注意二者顺序*/
}

 边框简明指南

border-style属性：可以控制边框的视觉样式，8个可选项如下：

• solid：实线边框
• double：双线
• groove：槽线
• outset：外凸
• dotted：虚线，又称点线
• dashed：围绕边框的一组破折线
• inset：内凹
• ridge：脊线，像页面上凸起的山脊

border-width属性：控制边框的宽度（px，thin，medium，thick）

border-color属性：设置边框的颜色

指定某一边的边框，如：border-top-color，border-right-style

border-radius属性：在四个角同时创建圆角，可以任意组合

• border-radius：15px
• border-top-left-radius：3em   指定左上角

id属性

如果想要对多个元素使用某个样式时，使用class创建类；但是如果只有一个元素需要增加样式，或者页面上只有一个元素，那就应该使用id，id属性恰好是用来唯一的命名元素

id选择器只与页面中的一个元素相配

/*假设某元素的id为footer*/
#footer{
color:red;
}  /*选择id为footer的任意元素*/
p#footer{
color:red;
}  /*选择一个id为footer的<p>元素*/