CSS盒子模型

来源：互联网发布：制药工程就业前景知乎编辑：程序博客网时间：2024/06/01 12:11

一、前言

进入BS学习，有好多内容都是全新，一边是兴奋，一边是想着如何要把这些东西有一个自己的理解，今天乖乖来总结，总结了就有收获了。

1.1Asp.net

ASP的全拼是：Active Server Pages（百度链接），简单来说是开发网站的一种脚本语言，他也是基于.NET Framework框架之上的，之前接触过C#的代码，刚刚使用这个新语言，感觉他们的很多思想，尤其是抽象，特别能够体会到。我想这就是面向对象的魅力吧。

1.2CCS

CSS的全拼是Cascading Style Sheets，层叠式样表，也是一种计算机语言，是用来干嘛的呢？从名字来看我们也能看出一点，可以修改文件的样式，修改网页显示的样式。牛老师说的我很认同，利用CSS我们可以将内容和样式分离开来。如何实现呢？这里简单的说一下，我们把所有的样式放在一起如下：
这里写图片描述

这是他们的内容，页面内容，图片如下：
这里写图片描述

如何将他们绑起来呢，我们可以这样做，打开页面的代码框，将样式直接拖进去~如下图：

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>出错啦~~~</title>    <link href="CSS/login.css" rel="stylesheet" /> <!--套用样式--></head>

这样减少了耦合性，我们使用样式的时候，直接绑定就好了，同时一个样式也可被复用。

二、盒子模型

2.1开门见山

盒子模型是什么？打开你的firefox，按下F12,会看到这个界面，这个就是盒子模型：
这里写图片描述
这就是盒子模型，把每个对象放在一个盒子里，我查了一些资料，自己能够接受的是这样的好处是这个对象可以很容易调整他们的位置。从这个图片中我们可以很容易的看出盒子模型是由四部分组成的，外边框（margin），边框（border），内边框（padding），内容（content）。网上有一种说法挺有意思的。content是用装东西的，把我们想要在页面中放的东西展现出来，padding是装的东西里这个盒子边缘的距离，border是一个边框，可以显示一个边框，便于我们判断他的位置，margin避免盒子之间太挤了，可以有一个外边框设置一下各个盒子之间的间距。

2.2代码展示

现在我们做一个简单的盒子，感兴趣的可以了解一下：

<%-- 页面 --%><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>盒子模型</title>    <link href="CSS/learnCSS.css" rel="stylesheet" /></head><body>    <form id="form1" runat="server">    <div id="box">        <p>我是盒子</p>    </div>    </form></body>

/*样式*/#box {    border :1px solid red; /*设置盒子边框*/    width:80px; /*宽高设置*/    height :50px;    margin-top :100px; /*盒子外边框设置*/    margin-left:600px;}

显示出来的结果是这样的：
这里写图片描述

现在改动一点代码：

/*样式*/#box {    border :1px solid red; /*设置盒子边框*/    width:80px; /*宽高设置*/    height :50px;    margin-top :100px; /*盒子外边框设置*/    margin-left:600px;    padding-top:20px; /*设置盒子内边框---新加*/ }

注意观察变动的地方：
这里写图片描述
这只是一点点东西，现在还比较low点，加油。

三、结语

这里只写了一点点网页制作的东西，不过这只是一个开始，自己是很喜欢这个玩意，以后会给大家分享更多CSS的内容，感谢阅读。

0 0