目前样式

目标样式

Step1：打开body.html文件，看上次写的代码

Step2：将新建的body.css文件引到body.html中

首先将body.css文件引入到body.html中，body.css文件现在是空的，没有写任何代码

Step3：在css文件中定义tbody与is-main样式选择器

从上上篇分析的网站结构可知，tbody对应的div标签是最大的框，所以我们这样来设置它的框。

右键运行一下，如图：

可以发现什么都没有，看我设置的代码：

.tbody{						//最大的框①
    background-color: rgba(61,176,203,0.15);
    padding: 10px;
    overflow: hidden;  //这行可忽略,是细节
}
.tbody .is-main{	//其次框②
    width: 85%;			  	
    margin: 0 auto;    //边框居中
}

tbody作为最大的框①，我给它设置了一件什么事？

设置了一个背景颜色
内边距设置为10px

tbody是没有设置宽与高的，但是没有宽与高不应该什么都没吗？为什么仍然有一个很长的长方形框框呢？

因为我设置了内边距padding，内边距就是边框朝里面的距离。外边距margin已经讲过了，它是边框朝外的距离。这两个是相对的！

内边距设置为10px，那么边框就会朝里空出10px的空间出来。

我为什么不给最大的框①tbody设置宽和高？

一般开发中为了方便，最大的框是不设置宽和高的，它的大小是由其内部的内容决定的。

也就是说，它里面能放多少东西，它就能变多大。

其中框②is-main也是同样的道理，我都不给它设置宽高，因为我们会在他们身体里填东西，它们的大小由里面的内容决定。

Step4：定义is-main中的left与right边框

右键运行一下，发现并没有任何改变，如下图：

看代码：

.is-main .main-left{
    width: 71%;
    float: left;     向左浮动
}

.is-main .main-right{
    width: 28%;
    float: right;   向右浮动
}

我对放内容的左边框与右边框做了一件什么事情？

通过网站的样式可以发现，左边边框较右边边框更宽。

浏览地址：https://ypt.ink/blog/index

所以，给left样式设置宽度为71%; 给右边right设置宽度为28%；

也就是说，现在边框③也就是left已经规定了宽度大小，边框④也就是right也规定了宽度大小。

也就是说，两边框内放的内容不管再多，都不能超过我规定好的这个宽度。

我为什么不给left框与right框规定高度？

因为没必要，还是像上面说的，它们多高不要由它们来决定，让它们里面的内容来决定。否则代码就写死了！这个很重要，不论是java还是前端代码一旦写成死代码就意味着凉凉！

什么是向左向右浮动？

float:left     向左浮动的意思就是，让left这个框③紧贴is-main边框②的左边边框
float:right     就是紧贴着右边边框

剩下的内容放在下一篇吧，这一篇东西有点多了。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

第十次记录，利用css描出一个网站的body