盒子模型， 定位

盒子模型

Margin：外边距

Margin-top、margin-right、margin-bottom、margin-left

使用方式

（1）      margin：30px；表示上下左右外边距都为30px

（2）      margin-left：30px：单独设置上下左右外边距

（3）      margin：10px、20px、30px、40px、:分别设置上下左右四个边距为10px、20px、30px、40px

 

padding：内边距

也有上下左右边距，和margin类似。

 

Border：边框

/*border:10px dashedblack;*/
border-width: 10px;  边框的宽度
border-style: dashed;  边框线条类型
border-color: black;  边框的颜色

Word中设置边框的操作

可以更优化的书写方式

border:10px  dashed  black；

 

outline: 10px dotted greenyellow;

outline：轮廓线，用法同border

定位方式有：static、fixed、relative、absolute

Static 静态定位（默认）

定位相关属性

（1）  文档流：就是HTML的布局机制，块元素（block）独占一行，内联元素（inline）不独占一行，

（2）  相对定位：就是相对于一个东西来定位。这个东西就是他本身。同时可以使用left、top、right来移动元素位置

相对定位不会脱离文本流

（3）  绝对定位：找一个东西相对来绝对定位。这个东西有时是什么呢？这这个东西（element）必须设定posintion,并且定位方式非static。

这个小鬼定位（element）定位可以是他爸爸、他爷爷、他外公。。。。。。。。。。。（祖宗 body）中有钱的（position:absolute）的或者当官的（posintion:reltive,fixed）就是不能是程序员（position：station 或直接没有定位）

注意：绝对定位脱离文档流。一般使用“父相子绝”。

使用绝对定位设置top：0和不设置top：0属性他们有区别吗？

有区别，如果没有设置top属性，元素的位置和没有脱离文档流的位置一样

（4）  fixed定位：就是相对于浏览器窗口的定位

（5）  使用了postion属性，一般不使用margin，padding属性。

选则器，指的是选择施加样式目标的方式。

元素选择器

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

<style type="text/css">
    p{
        font-size:24px;
        color:red;
    }
    div{
        font-size:32px;
        color:blue;
    }
</style>