CSS盒子模型

最新推荐文章于 2019-06-11 15:19:14 发布

原创最新推荐文章于 2019-06-11 15:19:14 发布 · 717 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #asp.net #.net framework #脚本语言 #盒子模型

✿ 项目开发同时被 2 个专栏收录

33 篇文章

订阅专栏

——【牛腩新闻发布系统】

4 篇文章

订阅专栏

本文介绍了ASP.NET的基础概念及特点，并通过实例演示了如何使用CSS进行网页样式设计，包括内容与样式的分离、盒子模型的应用等。

一、前言

进入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; /*设置盒子内边框---新加*/ 
}