深入学css盒子模型
盒子模型
content area /*内容区*/
padding /*透明内边距*/
border /*透明内边距边框*/
margin /*透明外边距*/
/*单词guarantee 担保*/
行高
line-height /*设置行间的距离（行高）*/
/*注：line-height不准许使用负值*/
字体
font-style /*属性定义字体的风格*/
/*italic 浏览器会显示一个斜体的字体样式*/
背景
background-image /*属性为元素设置背景图像*/
/*注：元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。*/
background-repeat /*属性设置是否及如何重复背景图像*/
/*background-repeat属性no-reprat 默认。背景图像将在垂直方向和水平方向重复。 */
/*repeat水平垂直方向重复，repeat-x水平重复，repeat-y图像只在垂直方向上重复，inherit按父元素的设置来处理。*/
background-position /*属性设置背景图像的起始位置。*/
/*background-position属性top left，也可以结合用数字和百分比10px top*/
边框
边框样式
border-style /*指定边框样式*/
solid /*实线*/
dottde /*虚线*/
bouble /*双线*/
dashed /*破折线*/
groove /*线槽*/
inset /*内凹*/
outset /*外凸*/
ridge /*脊线*/
边框宽度
border-width: /*控制边框宽度*/
border-width:thin;/*细*/
boredr-width:medium;/*中等*/
border-width:thick;/*粗*/
border-width: 5px;/*或者使用像素来写条线的粗细*/
边框颜色
border-color: /*控制边框颜色，可以使用rgb或者使用十六进制码来写颜色*/
border-color: red;
border-colot:red(100%,0%,0%);
border-color:#ff0000;
使用border-color指定边框颜色。可以使用任意一种常用方法来指定颜色。
指定某一边的边框
/*指定上边框*/
border-top-color:black;/*指定上边框的颜色*/
border-top-style:dashed;/*指定上边框的样式*/
boeder-top-width:10px;/*指定上边框的粗细*/
/*指定右边框*/
border-right-color:black;/*指定右边框的颜色*/
border-right-style:dashed;/*指定右边框的样式*/
border-right-width:10px;/*指定右边框的粗细*/
/*指定下边框*/
border-bottom-color:black;/*指定下边框的颜色*/
border-bottom-style:dashed;/*指定下边框的样式*/
border-bottom-width:10px/*指定下边框的粗细*/
/*指定左边框*/
border-left-color:black;/*指定左边框的颜色*/
border-left-style:dashed;/*指定左边框的样式*/
border-left-width:10px;/*指定左边框的粗细*/
圆角
border-radius:15px;/*可以在四个角上都创建圆角*/
/*或者在某一个角设置圆角，但是因为圆角是由两条线组成的所以代码也使用两条线组合*/
border-top-right-radius:15px;/*右上侧圆角*/
border-top-left-radius:15px;/*左上侧圆角*/
boeder-bottom-right-radius：15px;/*右下侧圆角*/
border-bottom-left-radius:15px;/*左下侧圆角*/
也可以使用border-radius得到更有趣的形状
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-top-left-radius:0px;
border-bottom-left-radius:0px;
/*得到一个右侧上和右侧下都圆角，左侧是直角的盒子。*/
练习
/*左上和左下圆角*/
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
/*全部圆角*/
border-radius: 40px;*/
/*右上右下左下圆角*/
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius:40px;
/*右上左下圆角*/
border-top-right-radius: 2em;
border-bottom-left-radius:2em;
ID属性
id和class属性的区别在于如果一个页面只有一个页脚或者页眉就可以用id和class来区分他们的作用，很显然，用id更适合在一个页面中一个页脚。
如何在css中使用id和class
class使用方式
使用id和class选择标签的方法是一样，但是选择一个标签的方式有不同方法。
假如在页面上有一个class名叫guarantee而且他是一个段落，可以用不同方法实现。
p.guarantee{
color:red;
}
/*或者*/
.guarantee{
color:red;
}
id使用方式
假如有一个p段落id是footer来使用id控制这段文字的颜色
p#footer{
color:red;
}
/*或者*/
#footer{
color:red;
}
class和id还有一点差别：id选择器只与页面中的一个元素匹配
指定段落的区别
id和class前面的p
其实这两种写法都是可以的，他们都会选择同一个标签，但是如果在一组更复杂的页面中，可能会出现这种情况，有些页面将这个唯一的id指定给一个段落，而在另外一些页面中也有可能把这个id分给列表或者块引用，这时候根据页面上不同的类型标签应用不同的规则，如p#footer和blockquote#footer。
不同的标签使用不同的id可以生效，如果相同的id相同的标签就不会用作用。
id的目的是为了区分，class的目的是为了聚集。
页面效果
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
/*读取外部css文件*/
<link type="text/css" rel="stylesheet" href="lounge.css">
</head>
<body>
<p id="guarantee">
Our guarantee: at the lounge, we‘re committed to providing you,
our guest, with an exceptional experience every time you visit.
Whether you‘re just stopping by to check in on email over an
elixir, or are here for an out-of-the-ordinary dinner, you‘ll
find our knowledgeable service staff pay attention to every detail.
If you‘re not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
</body>
</html>
css文件
#guarantee{
line-height: 1.9em;
font-style: italic;
font-family: serif;
color: #444444;
border-color: white;
border-width: 1px;
border-style: dashed;
/* border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
上左下左圆角*/
/* border-radius: 40px;
全部圆角*/
/* border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius:40px;
上右下右下左圆角*/
/* border-top-right-radius: 2em;
border-bottom-left-radius:2em;
上右下左圆角*/
background-color: #a7cece;
padding: 25px;
padding-left: 80px;
margin: 30px;
margin-right: 250px;
background-image:url(images/background.gif);
background-repeat: no-repeat;
background-position: 10px top;