<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. [转]理解Object.assign

    本节内容我们继续探讨关于ES2015的一些新的内容,Object.assign函数的使用,使用该函数我们可以快速的复制一个或者多个对象到目标对象中,本文内容涉及es6,es7相关的对象复制的内容,以及 ...

  2. 在express中提供静态文件笔记

    在express中提供静态文件 要在express框架中提供静态文件,如:css.javascript等文件,就要使用到他的内置中间件功能express.static,将包含静态文件目录文件传递给ex ...

  3. 《Advanced Bash-scripting Guide》学习（十二）：占位符":"及其他

    本文所选的例子来自于<Advanced Bash-scripting Gudie>一书,译者 杨春敏 黄毅 : 在一个二元命令中提供一个占位符 例1. : ${username=`whoa ...

  4. hzau 1203 One Stroke

    1203: One Stroke Time Limit: 2 Sec  Memory Limit: 1280 MBSubmit: 264  Solved: 56[Submit][Status][Web ...

  5. 1D/1D优化dp之利用决策点的凸性优化

    关于dp的优化之前做过一些简单的利用优先队列或者单调队列维护一个值就ok了,但有时候给出的方程很难直接用单调队列维护,需要转化一下思路. 这种优化方式利用数形结合,根据比较斜率来抛去一些非最优解,能将 ...

  6. Ceph的现状

    转自:https://www.ustack.com/blog/ceph-distributed-block-storage/ 1. Ceph简介 Ceph是统一分布式存储系统,具有优异的性能.可靠性. ...

  7. Sublime2 + SASS + Koala 测试

    Sublime SASS语法高亮插件下载地址:https://github.com/kuroir/SCSS.tmbundle/zipball/SublimeText2 koala_2.0.4_setu ...

  8. Jquery过滤选择器，选择前几个元素，后几个元素，内容过滤选择器等

    一.基本过滤选择器(重点掌握下列八个):first 选取第一个元素 $("div:first").css("color","red");:l ...

  9. EF中使用Linq的Lambda比较字符串格式日期大小

    在使用EF时,想要比较字符串类型的日期时,参考以下: SQL语句: 1)select * from TableName where StartTime > ‘2015-04-08‘ 2)sele ...

  10. BZOJ3832 Rally

    传送门(权限) 题目大意 给定一个有向无环图,可以删去一个点和所有与它相连的边,使得图的其余部分最长路径最小,求这个位置和最小的最长路径长度. 题解 对于每一条边$u\rightarrow v$,设$ ...