牛腩回顾历程

曾经终败给现在 2022-07-26 01:46 189阅读 0赞

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhanghan]

# 【开篇前言】 #

从开始的不知所以然到现在的越敲越有意思，学习真是一个有趣的过程。牛腩打开了B/S学习的大门，上一个阶段是C/S阶段，那么B/S和C/S有什么区别呢？原来C/S的全称为Client/Server(客户机/服务器）是建立在局域网的基础上的，是一种软件体系结构。B/S的全称为Browser/Server（浏览器/服务器）是建立在广域网的基础上的。B/S通过不断成熟的WWW（World wide web万维网）浏览器技术，利用多种语言和技术通过浏览器实现了原来需要复杂专用软件才能实现的功能，降低了成本。B/S有一些优点，根据它的分布特点我们就可以看出他可以随时随地的查看和浏览，业务扩展简单，只需要增加界面就可以实现，维护也简单了不少，通过改变网面就可以实现，而且共享性非常的强。伴随着优点，自然也会有缺点，因为C/S是客户端与服务器直接相连，没有中间环节，B/S相对C/S来讲，响应速度就不及C/S了。

# 【从无到有】 #

![Center][]

这次学习体会到了文档驱动的力量，视频一开始就先制作文档，在文档中添加了该系统的用例图和原型图，通过用例图就可以看出，这个系统将用户和后台管理人员抽象出来，用户可以浏览新闻、发表评论和搜索新闻，后台管理员分别可对新闻类别和新闻管理进行增删改操作，对评论管理进行删除操作。通过类图很便利的建立了数据库。

![Center 1][]

# 【盒子模型】 #

在前台界面制作阶段，多次用到了盒子模型，该系统是全兼容的，有的功能在一部分浏览器上适用，在另一部分浏览器上就会出现问题，我用360极速浏览器中的审查元素可以清楚的看到自己界面的盒子模型，很多次一目了然自己的边距是哪里设置的不合理了。

![Center 2][]

## ●理解 ##

盒子模型（box model）包括四个属性，每个属性又包括四个部分。四个属性分别为：Contet（内容），Padding（填充），Border（边框），margin（边界）。每个属性的四个部分分别是：上、下、左、右。

Content（内容）：就是盒子中装的东西。

Padding（填充）：我们在生活中都有体会，我们买东西到家拆开箱子的时候往往都有一层泡沫在其中，目的就是防震，所以Padding有同样的效果。

Border（边框）：对照着生活中的箱子来理解，就是箱子本身了。

Margin（边界）：为了防止箱子一个个紧挨着，所以就要在箱子外部留有一定的空间防止箱子紧挨损坏箱子。

## ●计算 ##

盒子模型是用在块级元素的，假如我们想要设置一个类名为box的元素内容的宽度如上图盒子模型中的300\*200，那我们的代码就应该为：（注意，这样的设置并不是Total width和Total height）

.box{
           width:300px;   //Content部分的宽度
           height:200px;  //Content部分的高度
    }

Total width=left margin +left border+left padding+width+right padding+right border+right margin=15+1+10+300+10+1+15=352

Total height=top margin+top border+ top padding+height+bottom padding+bottom border+bottom margin=15+1+10+200+10+1+15=252

# 【总结收获】 #

自己亲身经历了一个项目从无到有，也打开了B/S学习的大门，B/S的学习非常有意思，文档驱动深有体会，之前老感觉原型图没有什么用，当制作前台界面的时候才体会到他的妙处。盒子模型对比着生活中的盒子和生活经验，理解了每一个属性的用意，加上会计算也是对盒子模型有了初步的了解，下一步就是多实践了。

[http_www.captainbed.net_zhanghan]: http://www.captainbed.net/zhanghan
[Center]: /images/20220724/2d8af1f6ae1c4d998d306706309bf428.png
[Center 1]: /images/20220724/ab1a18be233743e580f525e2566e85da.png
[Center 2]: /images/20220724/2a4dff78298b43f4a18ad825ae358351.png