一定要弄懂的盒子模型

goodwangLib 2018-12-02

展开全文

这一篇其实老早之前就该写了，但是在敲牛腩的时候，只是跟着老师敲，没有系统的学习CSS这部分知识，从图书馆借了一本书，最近想要系统的学习这部分的知识，所以今天花了小一天的时间做了一个网页，重新学习了一下盒子模型和浮动的知识。今天就聊聊盒子模型这部分知识吧！

定义

在CSS处理页面的时候，它认为每个元素都是包含在一个不可见的盒子里，盒子模型由内容区域、内容区域周围空间（内边距padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（margin）构成。我们将盒子模型想象成一幅挂在墙上的画，画是内容，衬边是内边距，画框是边框，与相邻画框之间的距离是外边距。

当然我们还可以把它想象成一个真正的快递的盒子，下边来看一看盒子模型图吧！

盒子模型图

DEMO:

不要看盒子模型就这四部分组成，其实他一点都不简单，今天就跟他较了一天的劲。其实网页就是由一个个的元素拼装组合到一起的，话不多说，还是看个小例子吧！这个小例子是一个页面导航的例子，代码如下：

前台代码：

nav是标记导航的元素，他可以明确表示主导航链接的区域，ul是无序列表的结构

<nav role="navigation"> <%--导航--%>
                <ul class="navli">
                    <li><a href="/" class="current-page">Home</a></li>
                    <li><a href="/about/">About</a></li>
                    <li><a href="/contact/">Contact</a></li>
                </ul>
            </nav>

CSS样式：

<pre name="code" class="css"><pre name="code" class="html">/*导航栏样式*/
.navli {
    border-top: 5px solid #019443; /*绿色*/
    border-bottom: 1px solid #c8c8c8; /*灰色*/
    padding: .45em 0 .5em; /*7 0 8*/
}
    .navli a {
        color: #292929;
        display: inline-block;
        padding: .5em 1.15em .5em 1.4em;                                                                                                                          font-family: sans-serif;
        font-weight: 700;
        text-transform: uppercase;
    }
    .navli li {
        border-left: 1px solid #c8c8c8;
        display: inline-block;
    }
        .navli li:first-child {
            /*对第一个li使用了下边的属性，取消左边框，即改回至默认样式*/
            border-left: none;
        }

最终效果：

简单讲解：

设置上边框为绿色，5像素的粗线
设置下边框为灰色，1像素的细线
没有左右边框
设置上下内边距的宽度，分别为7像素和8像素（em是相对长度），没有所有内边距，设置内边距是为了让水平线和垂直线分开，如果没有内边距，上下就没有距离了，就太紧凑了（如右下图所示）
外边距是默认的值

a元素(链接)讲解：

display:inline-block是让他们可以水平显示，而且具有块级元素的性质，如果没有这一条，那么就不会有外边距了
下图显示的是内边距的设置，其中em是相对距离，相对的是默认字体的数值，字体默认是16px,所以.5em就是8px,以此类推，四个值的顺序是按照钟表指针的走向，分别是上，右，下，左
font-family:可以理解为字体集合，如果浏览器不支持第一个字体，可以选择第二个，第三个，我这里就设置了一个字体
font-wight：是字体粗细
text-transform:uppercase都是大写字母