盒子模型。

盒子由 margin、border、padding、content 四部分组成。

margin ：外边距

border：边框

padding：内边距 (内容与边框的距离)

content：内容

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            div {

                /*设置背景颜色*/

                background-color: blue;

                /*设置宽高*/

                width: 250px;

                height: 250px;

                /*设置外边距*/

                margin: 130px;

                /*设置边框的:边框的宽度 边框的样式 边框的颜色*/

                border: 10px solid red;

                /*设置内边距:上,右,下,左*/

                padding: 20px 40px 50px 100px;

            }

        </style>

    </head>

    <body>

        <div>ABCDEFG</div>

    </body>

</html>

HTML5盒子模型。的更多相关文章

  1. html5盒子模型

    相关博客: Flex 布局教程:语法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程:实例篇:http://ww ...

  2. CSS3盒子模型

    web前端必须了解的CSS3盒子模型 1.需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical ( ...

  3. 盒子模型，定位技术，负边距，html5 新增标签

    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...

  4. HTML5学习笔记（七）：CSS盒子模型

    在CSS中,盒子模型有W3C标准盒子模型和IE盒子模型两种,这里所谈的是基于W3C标准的盒子模型. 所有HTML元素都可以看作盒子,即所有HTML标签都支持盒子模型的属性,在CSS中,"bo ...

  5. 5月5日上课笔记-盒子模型【HTML5】

    int 默认值为0 Integer 默认值为null String str="weraarezxsa"; 字符实现升序且唯一 & 非短路与 && 短路与 a ...

  6. IT兄弟连 HTML5教程 使用盒子模型的浮动布局

    虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另 ...

  7. IT兄弟连 HTML5教程 W3C盒子模型

    日常生活中所见的盒子也就是能装东西的一种箱子,如果家里的东西很多,那么就需要按类别装到不同的箱子中.网页中的内容表现也是一样的,如果页面内容比较多,又想让页面更整洁.更美观.有很好的用户体验,则也需要 ...

  8. HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

    本教程案例在线演示 有路网PC端 有路网移动端 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成 ...

  9. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

随机推荐

  1. c#StreamWriter,StreamReader类（主要用于文本文件访问）

    1.为什么要使用StreamReader或者StreamWriter 如果对文本文件需要读取一部分显示一部分则使用FileStream会有问题,因为可能FileStream会在读取的时候把一个汉字的字 ...

  2. Linux下ls命令使用详解（转）

    说明:我们在linux下使用ll时,其实就是ls -l.ls才是最终的命令程序. ls命令是linux下最常用的命令之一,ls跟dos下的dir命令是一样的都是用来列出目录下的文件,List即列表的意 ...

  3. SQL Server性能监控常用语句

    .查找目前SQL Server所执行的SQL语法,并展示资源情况: SELECT s2.dbid , DB_NAME(s2.dbid) AS [数据库名] , --s1.sql_handle , ( ...

  4. webpack使用 babili-webpack-plugin 报错 "original.line and original.column are not numbers"

    按照这个解决 https://github.com/chentsulin/electron-react-boilerplate/issues/1300 changing "babili-we ...

  5. 64位WIN7上安装11G R2 ，PLSQL的配置方法

    64位WIN7上安装11G R2 ,PLSQL的配置方法:1.       1.1. 去http://www.oracle.com/technetwork/topics/winsoft-085727. ...

  6. 穆里尼奥：曼联没有在今夏尝试过签下C罗

    在曼联结束的本个夏季首场友谊赛中,球队5-2战胜了洛杉矶银河,在赛后穆里尼奥出席了赛后的新闻发布会,并且回答了记者的提问.其中他表示曼联在今年夏季从来没有尝试回签C罗,因为这是“不可能完成的任务”. ...

  7. dll ocx cab IE 自动安装

    我们打开淘宝等网站时,IE浏览器会提示安装空间,这个控件便是用于对用户名密码进行加密的ActiveX控件.如何在我们的站点上安装如此控件,让用户可以通过简单的点击便可方便使用我们的空间呢? 下面是如何 ...

  8. python实例：在列表，字典，集合中，根据条件筛选数据

    1. 从列表中过滤掉 负数 from random import randint # 随机生成列表 data = [randint(-10, 10) for _ in range(10)] print ...

  9. 《Think Python》第5章学习笔记

    目录 5.1 整除和取模(Floor division and modulus) 5.2 布尔表达式(Boolean expressions) 5.3 逻辑运算符(Logical operators) ...

  10. Oracle中的自连接(self join)-当表中的某一个字段与这个表中另外字段的相关时，我们可能用到自连接。

    http://blog.163.com/wkyuyang_001/blog/static/10802122820091751049479/ 当表中的某一个字段与这个表中另外字段的相关时,我们可能用到自 ...