http://www.blueidea.com/tech/web/2007/4545.asp

代码试验:

html代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head> <body>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p></div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>
</body>
</html>

css代码:

 @charset "utf-8";
/* CSS Document */
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099aC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}

运行效果:

盒子模型的各种属性:

内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。

百度百科:

http://baike.baidu.com/linkurl=aaQpP1xVynen7E_MA1Ys0Y9ZsrVw_Ne3jPDPWxy76EkVntsZAMYJ5ct9ku2Aok7yhMAChNWTGfdZv_EhUdalFU0x5PHq7oiNVB5KSs54NgUhgrSalRZFqLyc12Mw4dtn

CSS盒子模型学习记录1的更多相关文章

  1. CSS盒子模型学习记录3(侧面导航栏)

    学习http://www.blueidea.com/tech/web/2007/4545_2.asp 代码试验 html <!DOCTYPE html PUBLIC "-//W3C// ...

  2. CSS盒子模型学习记录2

    参考:http://www.blueidea.com/tech/web/2007/4545_2.asp 代码试验: html代码: <!DOCTYPE html PUBLIC "-// ...

  3. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  4. 前端学习(十三):CSS盒子模型

    进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...

  5. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  6. 1.26学习总结——css盒子模型

    CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...

  7. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  8. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. windows核心编程---第三章 内核对象及句柄本质

      本章讨论的是相对抽象的概念,不涉及任何具体的内核对象的细节而是讨论所有内核对象的共有特性. 首先让我们来了解一下什么是内核对象.内核对象通过API来创建,每个内核对象是一个数据结构,它对应一块内存 ...

  2. windows下安装RabbitMq-Service

    一.RaibbitMQ服务器配置 1. 准备工作.如果之前安装过RabbitMQ软件,若想重新安装,必须先把之前的RabbitMQ相关软件卸载. 2. 安装ERLANG语言包.首先到http://ww ...

  3. Java数据结构和算法之哈希表

    五.哈希表 一般的线性表.树中,记录在结构中的相对位置是随机的即和记录的关键字之间不存在确定的关系,在结构中查找记录时需进行一系列和关键字的比较.这一类查找方法建立在“比较”的基础上,查找的效率与比较 ...

  4. Scalding初探之番外篇:Mac OS下的安装

    把你从写繁琐的Map-reduce Job中解放出来,写分布式跟写本地程序没两样,Scalding真真代表着先进生产力的方向啊 心动不如行动,赶紧装一个吧 1 安装JDK 2 安装Homebrew r ...

  5. Svn服务器的安装和配置

    1.安装svn服务器端软件 从镜像服务器或者YUM源下载安装SVN服务器软件:yum install subversion mkdir /usr/local/svn     //创建SVN安装目录 c ...

  6. Filco minila 的蛋疼。

    3494左shift坏了,期间邮寄厂家维修,就把尘封多年的minila拿出来用着. 最为人诟病的问题:蓝亚适配,与mac跟iphone都能快速的匹配连接上.但是对于我的dell vestro 2012 ...

  7. Backtracking line search的理解

    使用梯度下降方法求解凸优化问题的时候,会遇到一个问题,选择什么样的梯度下降步长才合适. 假设优化函数为,若每次梯度下降的步长都固定,则可能出现左图所示的情况,无法收敛.若每次步长都很小,则下降速度非常 ...

  8. Python中reactor,factory,protocol

    最为简单的情况下,除了了解清reactor的简单使用,你还要了解Protocol和Factory.它们最终都会由reactor的侦听建立和run来统一调度起来. 建立服务器的第一个要解决的问题就是服务 ...

  9. Restful 支持 自定义序列化

    [ServiceContract] [ServiceKnownType(typeof(HRAwardObject))] [ServiceKnownType(typeof(WorkflowBasicIn ...

  10. C++编程命名规则(转载)

    原文地址:http://www.cnblogs.com/ggjucheng/archive/2011/12/15/2289291.html 如果想要有效的管理一个稍微复杂一点的体系,针对其中事物的一套 ...