<style type="text/css">

div{
width:300px;
height:300px;
background:green;
margin:10px;<!--盒子外边距 -->
border:20px solid red;<!-- 盒子的厚度，三元素：宽度，材质，颜色-->
padding:20px;<!-- 盒子内边距，即盒子内容到边框的距离-->
}
#text{
background:green;
}

</style>
</head>
<body>
<div id="test" class="g">
123
</div>

</body>

div盒子模型的更多相关文章

  1. 从div盒子模型谈如何写可维护的css代码（转）

    市面上我们常常会看到各种各样的设计模式书籍,Java设计模式.C#设计模式.Ruby设计模式等等.在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容,细细一看之下才发觉 ...

  2. DIV布局之道二：DIV块的嵌套，DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  3. CSS复合选择器和div盒子模型

    一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...

  4. div盒子模型(一图胜千言)

    offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...

  5. DIV盒子模型介绍 div用法

  6. css盒子模型的宽度不包括margin

    看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的 <!DOCTYPE html> <htm ...

  7. html学习第三天—— 第11章 盒子模型 div

    盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...

  8. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  9. HTML学习笔记 w3sCss盒子模型（阴影）（div的一些使用）案例 第十节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. js的set和get

    'use strict' class Student { constructor(_name,age){ this.name = _name; this.age = age; } set name(_ ...

  2. liunx常用命令-----查找命令

    locate 根据文件名查找文件 根据数据库记录搜索,当天创建的搜不到 whereis which  搜索命令的命令   如 whereis ls find   /root   -name       ...

  3. spring boot: @Retention注解 @Documented 注解 @Inherited 注解

    http://www.jb51.net/article/55371.htm Retention注解 Retention(保留)注解说明,这种类型的注解会被保留到那个阶段. 有三个值:1.Retenti ...

  4. SQLyog中的计算适合的数据类型

    可能使用的数据库工作比较杂吧(机器上有toad.PLSQL Developer.Navicat.SQLyog等).并非是觉得那种都不好用,而是觉得有适合大部分需求的,但也有工具在某一方面特别方便的. ...

  5. 二维码的扫描和生成--第三方开源--ZXing

    ZXing的二维码功能的提取lib下载地址:https://github.com/xuyisheng/ZXingLib 1.扫描二维码: 我们扫描就是要用到这个CaptureActivity类,直接把 ...

  6. 使用NSUserDefaults保存自定义对象（转）

    转自http://zani.iteye.com/blog/1431239 .h文件 #import <Foundation/Foundation.h> @interface MyObjec ...

  7. nodejs--vue

    nodejs--vue 基础知识认识: 前端工程化 最近才兴起,nodejs(包的管理更加方便),webpack 数据双向绑定 mvm 数据驱动vue,vue改变数据 组件化开发 vue 中的常见 概 ...

  8. 把数据库里面的数据导出来csv

    function export_csv($filename, $data, $head = '') { $string = $head; foreach ($data as $key => $v ...

  9. WordPress发布文章前强制要求上传特色图像

    如果你的网站需要给每篇文章设置特色图像才能达到理想的显示效果,而且允许其他用户在后台发布文章的,那么您可能需要强制要求他们给文章上传特色图像,否者就无法发布.Require Featured Imag ...

  10. HDU3727 Jewel（主席树+树状数组（或二分））

    Problem Description Jimmy wants to make a special necklace for his girlfriend. He bought many beads ...