第七篇 CSS盒子

CSS盒子模型

 

在页面上，我们要控制元素的位置，比如：写作文一样，开头的两个字会空两个格子（这是在学校语文作文一样），其后就不会空出来，还有，一段文字后面跟着一张图，它们距离太近，不好看，我们要移动图片，让它里文字远一点点，这时候呢，我们就可以运用到盒子的属性：内边距、外边距。

 

内边距：

 

<div>我是内边距</div>

 

我们先测试以上代码，在页面里按下 “F12”键，会弹出一个框，即是“查看源码”，我们可以看到html、css、js等等源代码，它们是以网页呈现出来的内容的格式出来的，嗯...听不懂的同学，后期会懂的，因为现在我们不需要太资深，慢慢来。 按下F12后(它可能是呈右侧或下方显示)，同学们可以根据自己喜欢，调整，老师用的测试下方显示，在最右侧 有三个竖着的点，点击它就可以切换显示方位。那么我们找到了这个div元素之后，在最右下方，可以看见一个盒子，里面是一个虚线和实实线等组成的，我们可以看到，最里面，会显示两个数字相乘，因为老师电脑分辨率是1920，而这个div没有设置高度，因为内容而出现的高度是21px，所以我两个数字则显示的是：1920*21。

在它的外围，有一个padding，它的意思就是“内边距”，内边距是什么呢？我们用代码来测试效果，再来解释：

 

<div style="padding-left: 50px;">我是内边距</div>

 

这里我们给了div背景色，是因为好看出效果，不然页面白色，它本身无色，就不容易看出来效果了。这里的paddin-left的意思是，内边距距离左侧，值 50px。这里老师提醒同学们，每一个键值对 写完，都要跟一个分号(不是中文哦)，分号如同是它的结束标语一样，就能分离所有的属性和值，否则会报错，没有效果。

上面这个代码，我们可以清楚的看到，div背景色变成浅灰色，然后内容距离左侧50px了，这就是内边距，是元素的内侧发生了移动改变，元素本身是不会发生改变的。

 

外边距：

 

<div style="margin-left: 50px;">我是外边距哟</div>

 

因为有背景色，所以我们可以很容易区分出，外边距和内边距的区别。在页面上，内容部分依旧是距离了浏览器左侧50px，没有发生改变，但是div的背景色是不是发生了改变，它也跟着距离浏览器左侧50px了，这就是外边距，在按下F12里，看盒子，它会在外边距 margin里写上50这个数字。外边距，它是存在 在元素外侧的，如同是管理整个元素，所以它发生改变，整个元素就会改变，而内容确实元素里的，明白了吗

 

这里我们用到的是margin(pdding)-left 意思是距离左侧，那么有左侧，也就应该有上下右，这里写一下，效果同学们自己测试咯：

margin-top  外边距 距离高          padding-left 内边距 距离高

margin-right  外边距 距离右侧     padding-right  内边距 距离右侧

margin-bottom  外边距 距离下     padding-bottom  内边距 距离下

margin-left  外边距 距离左侧        padding-left  内边距 距离左侧

 

最为明显和常用的，是top和left，调整距离，而right和bottom，很多同学可能不明白，如果你给div设置了margin-bottom 下边距，它本身不会发生改变，而是会影响到下一个元素，下一个元素就会距离它 50个px或者其他值，right也是一样，因为我们代码都是从上往下，从左往右执行，写两个元素比较一下就可以了。

 

我们在说一下，如果margin或者padding后面不跟四个方向，我们还可以这样写：

 

<div style="padding: 10px 20px 30px 40px;">内边距测试</div>

 

它会有四个值：值的顺序：top  right  bottom  left
如果换成三个值：值就会影响：第一个值：top   第二个值：left(right)  第三个值：bottom

如果换成两个值:值就会影响：第一个值：top(bottom)  第二个值；left(right)

如果换成一个值：就会直接影响四个：top  right  bottom  left

 

margin和padding两个属性值都是一样的，只是作用不一样罢了，所以懂得其中一个，另一个几乎就没问题了。

 

我们在说说，如果以上代码，将div改成span这种行级元素，会怎么样呢？老师这里给同学们提示一下，行级元素，它不能跨行，所以设置它的top和bottom是没有作用的，left和right是有作用的哦。

 

最后来说一下盒子里还有一个border(边框)

 

之前我们用table做表格，很难看，虽然是上一个tr td 对准下一个tr td，没有样式不好看，但是没有边框也不好区别，有了边框的话，使用者就会更加清晰。

 

我们来演示下给table表格加边框，其他元素也可以加边框哦，同学可以多玩玩：

 

<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>QQ</th>
    </tr>
    <tr>
        <td>1</td>
        <td>龙枫</td>
        <td>563292416</td>
    </tr>
    <tr>
        <td>2</td>
          <td>過來寳貝</td>
        <td>563292416</td>
    </tr>
</table>

 

以上是最基本的table表格，什么都没有，大家会发现，它是根据左对齐的，所以我们不光要知道它的边框，还要清楚它的对齐方式，这里老师写的比较简单，如果是大数据，类别比较多，那就会比较乱，所以加边框是很有必要的，我们来试试效果：

 

<table style="border: 1px solid #dedede;">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>QQ</th>
    </tr>
    <tr>
        <td>1</td>
        <td>龙枫</td>
        <td>563292416</td>
    </tr>
    <tr>
        <td>2</td>
        <td>過來寳貝</td>
        <td>563292416</td>
    </tr>
</table>

 

这样的话，就给table表格加了一个边框，但是我们重点不是给它加，而是给表单里的tr td加，这样的话，才能区分内容块，那么我们再改动一下添加一个，用内联来写：

 

td,th{
    border: 1px solid #dedede;
}

 

这句话的意思是说，td和th两个元素，它们的边框border，值为：1px(大小) solid(实线) #dedede(颜色)。

那么我们这样做了之后，大家会发现，它的边框就是一块一块的，也不好看，这时候我们就要用到table的属性：

 

<table cellspacing="0">

 

cellspacing它的意思是，把表格里的每一个单元(td,th)间距设置为0，它默认情况下不是0，所以才有间距，我们设置成0它就会没有间距了，就不再是一小块的形式分离开一样，而是贴在一起。

还有一个属性：cellpadding这里面能看到padding内边距的意思，它就是单元(td/th)与单元内容之间的间距。

 

回到上面说的，表格里面的内容同学们也看到了，是左对齐的，有的时候我们会选择居中对齐，会更加好看或者更好管理，那么我们做一次，内容居中效果：

 

td,th{
    text-align: center;
}

text代表文本内容，align则是对齐方式，那么值，选择的就是：center(居中)，这里可以选择left(左对齐)，right(右对齐)。效果就会直接出来了