盒子模型。

盒子由 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#二进制位算 权限

    关于权限管理,之前所做的都是一个权限对应一条数据,比方A页面有增删改查四个权限,那么用户在权限管理表中相对应AA页面有四条记录.后来改用二进制运算,发现省事很多. 首先说下位运算 熟悉一下操作符,懒得 ...

  2. Openerp 添加修改报表

    Report Designer 模块在生成新报表的时候是有BUG的不建议直接使用,不过我们也可以通过该插件再写简单的代码来实现新添加报表,插件安装成功后我们可以按照下列方法来添加报表 OpenERP ...

  3. 什么是WCF(转)

    什么是WCF(Windows Communication Foundation(WCF)) 大家可以百度一下了解什么是WCF.当然有些人看到密密麻麻的黑框白字就懒的读.即使读了 可能也没明白确切的含义 ...

  4. C#中方法,方法声明,方法调用和方法重载!

      一,定义:方法是具有名称的可执行代码块. 二,方法的声明:声明方法的语法包括以下五个部分: 1,访问权限修饰符,这个是可选的参数,默认值是私有访问private,即只能从声明它的类的内部访问. 2 ...

  5. PowerDesigner新建CDM设置相同属性

    在 PowerDesigner设计逻辑模型CDM时,在一个包的一个域中,考虑到主外键名称可能冲突的问题,默认两个不同的实体中不能有相同的属性 但实际设计的时候,通常要在两个实体中使用相同的属性名, 比 ...

  6. 各种height/width总结

    CSS盒模型是比较复杂的,尤其是当页面中有滚动条时,仅仅通过css来操作高度宽度是不够的,幸运的是Javascript提供了不少这样的接口.Javascript中clientHeight / clie ...

  7. codeblocks中文编码问题

    其实这是老调重弹的问题了,在windows下面出现中文乱码大多都是编码格式的问题不一致的问题,最简单的就是uft-8和gbk冲突的问题.如果一个文件本来是以utf-8存的,但是以gbk打开,当然会出现 ...

  8. Jquery 在多个相同标签click的问题

    最近在做文章的删除动作,用Jquery来执行操作.但是实现时一开始总是只能对第一个起作用,其他的点击删除后没反应. 一开始的jquery代码是这样的, $('#articledelete').on(' ...

  9. FocusBI:地产分析&雪花模型

    微信公众号:FocusBI关注可了解更多的商业智能.数据仓库.数据库开发.爬虫知识及沪深股市数据推送.问题或建议,请关注公众号发送消息留言;如果你觉得FocusBI对你有帮助,欢迎转发朋友圈或在文章末 ...

  10. 每天一道leetcode203-移除链表的元素

    考试结束,班级平均分只拿到了年级第二,班主任于是问道:大家都知道世界第一高峰珠穆朗玛峰,有人知道世界第二高峰是什么吗?正当班主任要继续发话,只听到角落默默想起来一个声音:”乔戈里峰” 前言 2018. ...