css盒子模型
2015-08-23 22:21 we星星 阅读(173) 评论(0) 编辑 收藏 举报 ## 盒子的概念: ##
（1） 是CSS控制页面的一个重要的概念，只有很好掌握了盒子模型以及其中每个元素用法才能真正控制好页面中的各个元素；
（2）在CSS中，一个独立的盒子模型有：content（内容）、border（边框）、padding（内边距）、和margin（外边距）；
（3）width和height属性只能应用于元素内容区域。
边框：border
border-style:规定边框的样式
border-width：边框宽度
border-color：边框颜色
eg： border： 1px #000000 solid;
外边距：margin
外边距是围绕在元素边框之外的可选区域，有matgin-top、margin-right、margin-left、margin-bottom。
内边距：padding
内容与边框之间的距离，有padding-top、padding-right、padding-left、padding-bottom。
eg：padding：50px（只有一个值表示上下左右都有50px的距离）
padding： 50px 100px（有两个值时，第一个值表示上下的距离；第二个表示左右）；
padding：50px 30px 100px（有三个值时，分别标书上，右左，下）
padding：50px 10px 100px 50px（有四个值时，分别是以顺时针的方式读取）
如何在XHTML文档中加入CSS
1. 外部样式表（行内样式）
#
<link rel = "stylesheet" type = "text/css" href = "样式表的URl"
2.嵌入样式表
# <head>
<style>
* {
magin:0;
padding:0;
}
</style>
</head>
3.内联样式表
# <body>
<div style = "样式"></div>
</body>
选择器
1. 交集选择器
2. 并集选择器
3. 后代选择器
权值：元素：1；class：1
