<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. (转)Openstack Cascading和Nova Cell

    Openstack是看着AWS成长起来的,这点毋庸置疑:所以AWS大规模商用已成事实的情况下,Openstack也需要从架构和产品实现上进行优化,以满足大规模商用的要求.从已有的实现来看其中两种方式值 ...

  2. CSS之动态相册

    注释还是比较详细的,所以我就不一一再说明了.--->运行效果图<--- (点击之前温馨提示一下:此picture是我自己的照片,本来不想拿出来的,后来觉得反正不会有很多人看到而且也没人认识 ...

  3. 51nod 1625 贪心/思维

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1625 1625 夹克爷发红包 基准时间限制:1 秒 空间限制:13107 ...

  4. IIFE 立即执行的函数表达式

    介绍IIFE IIFE的性能 使用IIFE的好处 IIFE最佳实践 jQuery优化 在Bootstrap源码(具体请看<Bootstrap源码解析>)和其他jQuery插件经常看到如下的 ...

  5. 练习json读取中文

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

  6. MySQL+Node.js连接和操作

    在本节中,您将学习如何使用mysql模块从node.js应用程序与MySQL进行交互. 我们将向您展示如何使用Node.js连接到MySQL,执行常用操作,如使用mysql模块API执行插入,选择,更 ...

  7. nyoj-158-省赛来了（组合数）

    题目链接 /* Name:nyoj-158-省赛来了 Copyright: Author: Date: 2018/4/25 17:07:22 Description: 暴力,秒天秒地 */ #incl ...

  8. hdu-2609-How many（串的最小表示）

    题目链接 /* Name:hdu-2609-How many Copyright: Author: Date: 2018/4/24 15:47:49 Description: 串的最小表示 求出每个串 ...

  9. 浅学soap--------2

    使用wsdl文件: 生成wsdl <?php require('person.class.php'); // 引入生成wsdl的类文件 require('SoapDiscovery.class. ...

  10. STL的erase函数和lower_bound

    前提摘要: [1]一般我们的区间是左闭右开,如下面例子2. [2]erase函数谨慎使用. [3]map也是有序保存的. [erase] 1,删除字符串的首字母: string s="ecu ...