CSS(七) 盒模型

盒模型基本概念

拿相框来作比较的话

盒模型

相框边框- > border
画和相框边框的距离-> padding
相框之间的距离-> margin

---

边框

这个和前面的p标签的边框的设置方法是类似的，也是3种方式
border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式

#outerBox1{
        border-width: 2px;
        border-color: red;
        border-style:solid;
    }

    #outerBox2{
        border: thick blue dashed;
    }

    #outerBox3{
        border-top: thick blue dashed;
        border-right: 2px red solid;
        border-bottom: thin yellow dotted;
        border-left: 2px red solid;
    }

---

内边距padding和外边距margin

padding和margin 的三种设置方式
用padding 设置内边距
用margin 设置外边距

#outerBox1{
        border-width: 2px;
        border-color: red;
        border-style:solid;
        padding: 40px;
        margin: 10px;
    }

    #outerBox2{
        border: thick blue dashed;
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 2px;

        margin-top: 20px;
        margin-right: 10px;
        margin-bottom: 5px;
        margin-left: 2px;
    }

    #outerBox3{
        border-top: thick blue dashed;
        border-right: 2px red solid;
        border-bottom: thin yellow dotted;
        border-left: 2px red solid;
        padding: 20px 10px 5px 2px;
        margin: 20px 10px 5px 2px;
    }

---

网页布局与盒模型

块级元素VS 行内元素

块级元素：以一个块的形式展现，跟同级的兄弟块依次竖直排列，左右撑满，比如<div> <h1> <p>；
行内元素：以普通的一个DOM 节点展现，跟同级的兄弟元素横向排列，排满后，自动换行，比如<span>；

标准文档流

指在不使用其他与排列和定位相关的特殊CSS 规则时，各种元素的排列规则；

盒子在标准流中的定位

1 行内元素之间的水平margin
marin-right + margin-left

<span style="margin-right: 10px;border: 1px red solid;">块1</span>
<span style="margin-left: 10px;border: 1px red solid;">块2</span>

2 块级元素之间的竖直margin

<div style="margin-bottom: 10px;border: 1px red solid;">块1</div>
<div style="margin-top: 0px;border: 1px red solid;">块2</div>

Margin-bottom margin-top 以大的为标准

3 嵌套盒子之间的margin

<div style="margin: 100px;border: 1px red solid;">块1
<div style="margin-top: 20px;border: 1px red solid;">块2</div></div>

子块的margin 将以父块的内容为参考

4 margin 属性可以设置成负值
会在相应的向左移动

<span style="margin-right: 10px;border: 1px red solid;">块1</span>
<span style="margin-left: -20px;border: 1px green solid;">块2</span>