<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

/*

    盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。

    盒子模型主要是用于操作内边距(padding)与外边距（margin）

*/

    div{

        border-style:solid;

        width:100px;

        height:100px;

        /* 内边距 */

        padding-left:10px;

        padding-top:20px;

    }

    .one{

        margin-bottom:30px;

    }

    .two{

        margin-left:700px;

    }

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    <div class="one">

        这个是一个div

    </div>

    <div class="two">

        这个是二个div

    </div>

</body>

</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

    .outer{

        border-style:solid;

        width:370px;

        height:200px;

        margin-top:250px;

        margin-left:420px;

        background-image:url(../1.jpg);

        background-repeat:no-repeat;

        background-position:center;

    }

    .userName{

        margin-top:60px;

        margin-left:80px;

    }

    .password{

        margin-left:80px;

        margin-top:20px;

    }

    input{

        border-color:#000;

        border-width:3px;

    }

    #button{

        margin-left:120px;

    }

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

    <div class="outer" >

        <div class="userName">

            用户名 <input type="text"/>

        </div>

        <div class="password">

            密&nbsp;&nbsp;码 <input type="password"/>

        </div>

        <input id="button" type="submit" value="登陆"/>

    </div>

</body>

</html>

CSS中盒子模型的更多相关文章

  1. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  2. CSS系列：CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

  3. 认识CSS中盒子模型

    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...

  4. css中盒子模型与box-sizing属性

    盒子模型 w3c标准:定义的width为 内容,有padding,border 都会使得 最终呈现的宽度为 定义的width+padding+border的总和,有margin另加 ie标准:定义的w ...

  5. CSS中盒模型的理解

    今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...

  6. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  7. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  8. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  9. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

随机推荐

  1. SpringBoot static修饰的字段/方法如何获取application.yml配置

    SpringBoot的application.yml一种特殊的应用场景,一般我们获取application.yml的配置文件只要@Value就可以获取到值了,但是如果是static修饰的字段肯定就不能 ...

  2. smbfs

    Hi I tried to mount a network share (smbfs) but it complains about the lack of kernel support. To so ...

  3. C# 图像基本处理

    使用第三方:AForge实现视频采集(实现视频采集.暂停) 实现图片的常用处理功能:旋转.反色.灰度.放大.缩小.模糊.拉伸.增强.锐化.裁剪...... 实现对图片进行文字编辑......

  4. WebClient HttpWebRequest 下载文件到本地

      处理方式: 第一种:  我们需要获取文件,但是我们不需要保存源文件的名称 public void DownFile(string uRLAddress, string localPath, str ...

  5. Linux之apt-get软件管理

    apt-get 用Linux apt-get命令的第一步就是引入必需的软件库,Debian的软件库也就是所有Debian软件包的集合,它们存在互联网上的一些公共站点上.把它们的地址加入,apt-get ...

  6. Springboot + Mybatis + Ehcache

    最近在做一个项目,为处理并发性较差的问题,使用了Mybatis二级缓存 但在多表联合查询的情况下,Mybatis二级缓存是存在着数据脏读的问题的 两天就是在想办法解决这个数据脏读的问题 考虑到简易性. ...

  7. ASP.NET Core 基础知识（四） Startup.cs类

    ASP.NET Core应用程序需要一个启动类,按照约定命名为Startup.在 Program 类的主机生成器上调用 Build 时,将生成应用的主机, 通常通过在主机生成器上调用 WebHostB ...

  8. request_time和upstream_response_time详解

    下图是request_time. 下图是upstream_response_time. 精准的描述就是:request_time是从接收到客户端的第一个字节开始,到把所有的响应数据都发送完为止.ups ...

  9. Redis 安装 与 使用

    下载Redis压缩包.地址:https://github.com/MicrosoftArchive/redis/releases 下载完成后,双击运行安装程序. 点击 Next . 点击 Next 等 ...

  10. POJ-3080-Blue jeans(KMP, 暴力)

    链接: https://vjudge.net/problem/POJ-3080#author=alexandleo 题意: 给你一些字符串,让你找出最长的公共子串. 思路: 暴力枚举第一个串的子串,挨 ...