文章标题

2.6盒子模型
Margin：外边距
Margin-top、margin-right、margin-bottom、margin-left
使用方式
（1）margin：30px；表示上下左右外边距都为30px
（2）margin-top：10px；表示分别单独设置外边距
（3）margin：10px、20px、30px、40px；分别在上右下左设置边距为10px、20px、30px、40px

padding：内边距，也有上下左右，同外边距一样

border：边框
border: 10px groove red

2.7定位
定位方式有：static、fixed、relative、absolute。
static：静态定位（默认）
无定位，元素正常出现在流中，不受left、right、top、bottom的影响
div{
width: 200px;
height: 200px;
background-color: red;
position: static;
}

div1{

width: 200px;
height: 200px;
background-color: red;
position: fixed;
left: 30px;
top: 20px;

}

div2{

width: 200px;
height: 200px;
background-color: blue;

}

从结果可以看出fix定位会将元素从流中“摘”出来单独进行定位，定位取决于输入的方向属性和数值。
重新定位之后可能会出现重叠，可以通过z-index来调整

div1{

width: 200px;
height: 200px;
background-color: rgb(255,0,0);

}

div2{

width: 200px;
height: 200px;
background-color: blue;
position: relative;
top: 20px;

left: 30px;

div3{

width: 100px;
height: 100px;
background-color: gold;

}

从结果可以看出：相对定位只改变某一部分的元素可以参照其他的元素来对比。

从结果可以看出：绝对定位将元素从“流”中摘出，用方向属性改变位置，与fixed类似，但参照物不同，fixed参照根元素，即html要求，ablosute则是参照父元素

3选择器
3.1标签选择器
用标签名作为选择其，选中所有相应的元素

3.2id选择器

顾名思义是根据id来选择元素，其样式定义为：

id{

……
}

#div1{
width: 200px;
height: 200px;
background-color: red;
}
#div2{
width: 200px;
height: 200px;
background-color: blue；
}

3.3类选择器
根据class属性来选择元素，其样式定义为：
.className{
….
}

.even{
width: 200px;
height: 200px;
background-color: red;
}
.odd{
width: 200px;
height: 200px;
background-color: blue;
}

显示为：

从结果可以看出.odd{….}定义的样式会施加到所有的class=“odd”的元素上，即使是标签不同，也会一样施行

3.4属性选择器
根据某个属性的特性（比如有无、值等）来选择
（1）根据有无某属性来选择

[title]{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid blue;
}

从结果可以看出，所有具有title属性的元素都应用了红色背景
（2）根据属性的值来进行选择
[title =’div2’]{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid blue;
}

从结果可以看出，只有第二个div应用了红色背景的样式，因为只有第二个第div的title属性应用了样式
title ~=：选中属性值包含指定完整单词的元素，类似word中的全字匹配

[title~=’div’]{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid blue;
}