<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. Linux上SFTP用法

    SFTP简介 sftp是一个交互式的文件传输协议,类似于ftp,但它进行加密传输,比ftp更安全. SFTP用法 localhost 从远程主机获取文件或目录到本地目录下 sftp>get /h ...

  2. js科里化

    科里化定义如下: 首先将一批函数转入一个函数(然后这个函数返回一个新的函数),这中形式就叫“做科里化”(currying) Function.prototype.curry = function(){ ...

  3. review15

    不同区域的星期格式 不同国家的星期的简称或全称有很大的不同.如果想用特定地区的星期格式来表示日期中的星期,可以用format的重载方法: format(Locale locale, 格式化模式,日期列 ...

  4. dom 兼容性问题 2 offset

        offsetParent : 离当前节点最近的具有定位属性的祖先节点. 如果所有祖先节点都没有定位属性: 对于一个有定位属性的元素: ie6.7 : offsetParent 是 html 节 ...

  5. dp3--codevs2598 编辑距离问题

    dp3--codevs2598 编辑距离问题 一.心得 1.字符串相关问题dp的时候从0开始是个陷阱 二.题目 2598 编辑距离问题  时间限制: 1 s  空间限制: 128000 KB  题目等 ...

  6. jsp:forEach标签

    该标签使用来对一个 Collection 集合中的一系列对象进行迭代输出,并且可以指定迭代次数.一般使用格式如下: <c:forEach items=”collection” var=”varN ...

  7. 关于使用java开发Mis系统的相关内容。

    怎样使用java编程语言开发一个小型的信息管理系统,首先我们要知道用什么样的方法来开发这一系统. 1.java简单基础知识: (1)Java的三种技术架构: 1)JAVAEE:Java Platfor ...

  8. RK30SDK开发板驱动分析（一）：platform device 的概念与注册

    做过51单片机或者ARM开发的人都知道,单片机内部都有自己的“片内外设”,比如UART,比如I2C,比如SPI等等... 写单片机程序的时候,比如对于UART的驱动,我们都是在程序中直接写一套函数,来 ...

  9. 动态加载CSS，JS文件

    var Head = document.getElementsByTagName('head')[0],style = document.createElement('style'); //文件全部加 ...

  10. Idea_学习_09_Idea 方法自动生成参数默认名

    一.方法 1.快捷键 生成方法后,还空着参数,可以使用 ctrl + alt + 空格 ,列出参数,然后选择参数即可. 2.使用插件 二.参考资料 1.Intellij Idea 方法自动生成参数默认 ...