css框模型

为什么需要框模型？

为了给HTML中的元素布局，定位。（那用x，y坐标不就完了，为何提出框模型？）

css框模型是什么？

image.png

CSS框模型(Box Model)初学理解 - __Esc丶小晋的博客 - 博客频道 - CSDN.NET
这个解释是最容易理解的，把这个框模型类比成对东西的包装，比如你买个电脑，最里边的当然是content（电视机），第二层是泡沫，（padding）,接下来是纸箱，（border)，最后是margin

包装这么多干啥？

为了更精确的排版。
比如添加背景色。
举个例子

<style type="text/css">
    li {
        background: yellow;
        border:1px solid black;
    }
</style>
<p>see below</p>
<ul>
    <li>part 1</li>
</ul>

结果如下，这个背景色填充的事实上是到padding界限，相当于是包装的泡沫板。这个border是纸箱子。

image.png

margin有何存在必要？

margin事实上是确定两个元素之间的距离的，距离太近就不爽嘛。想想行距。

<style type="text/css">
    li {
        background: yellow;
        border:1px solid black;
        margin:10px;
    }
</style>
<p>see below</p>
<ul>
    <li>part 1</li>
    <li>part 2</li>
</ul>

上述代码让两个li元素直接有了10px的距离。结果如下

image.png

如果margin为0或者不设置margin，效果就是下面这样

image.png

有padding何没padding有何区别？

设置20pxpadding，效果如图

image.png

不设置padding，效果如图

image.png

<style type="text/css">
    li {
        padding-left: 70px;
        padding-top:70px;
        
        border:1px solid black;
    }
</style>
<p>see below</p>
<ul>
    <li>part 1</li>
</ul>

结果如图

image.png

除了px，也可以用百分比来设置
比如padding=50%，这是什么意思呢？

<style type="text/css">
    p {
        padding-top: 50%;
        border:1px solid black;
    }
</style>
<div style="width:100px">
<p>see below</p>
</div>

结果如图。这个50%是相对于其父元素而言的。比如这个父元素100px。那么50%就是50px，也就是padding边框距离元素50px。

image.png

对于边框border我们关心什么?

当然是边框的样式

<style type="text/css">
    p {
        padding-top: 50%;
        border:1px dotted red;
    }
</style>
<div style="width:100px">
<p>see below</p>
</div>

结果如下，宽度，颜色，线�型都可以一次设置完毕

image.png

上述定位方式与对齐这些属性有何关系？

对齐这些属性都是在盒子内部发挥作用的。
比如你让一个段落居中对齐，那么是会相对于盒子的border的中间对齐，而不是整个页面。
举个例子

<style type="text/css">
    p {
        padding-top: 50%;
        border:1px dotted red;
    }
</style>
<div style="width:100px">
<p align="left">see left</p>
</div>

结果如图

image.png

<style type="text/css">
    p {
        padding-top: 50%;
        border:1px dotted red;
    }
</style>
<div style="width:100px">
<p align="center">see left</p>
</div>

结果如图

image.png

总结

盒子模型就是为了给元素定位的。对比一下word文档中怎么给元素定位，利用行间距，段落间距这些东西。或者是居中，这些东西。当然居中这些东西html也是有的，但是诸如行间距，段落间距就没有了。比如p，可以查一下
就这些属性

image.png

那么要设置段落间距，就只有利用盒子模型。或者说框模型，是同一个东西。