CSS盒子模型学习记录1
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盒子模式都具备这些属性。
百度百科：
CSS盒子模型学习记录1的更多相关文章
- CSS盒子模型学习记录3（侧面导航栏）
学习http://www.blueidea.com/tech/web/2007/4545_2.asp 代码试验 html <!DOCTYPE html PUBLIC "-//W3C// ...
- CSS盒子模型学习记录2
参考:http://www.blueidea.com/tech/web/2007/4545_2.asp 代码试验: html代码: <!DOCTYPE html PUBLIC "-// ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
- 前端学习（十三）：CSS盒子模型
进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...
- [CSS3] 学习笔记--CSS盒子模型
1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...
- 1.26学习总结——css盒子模型
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- css3 倒影
说起倒影效果,在传统网页中,我们只能使用photoshop进行事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发的效率.而 css3新增了Reflections板块,css Refl ...
- Linux的sed命令
一.初识sed 在部署openstack的过程中,会接触到大量的sed命令,比如 # Bind MySQL service to all network interfaces.sed -i 's/12 ...
- GCD的其他方法
1.栅栏函数 作用:控制线程的执行顺序 注:栅栏函数不能使用全局并发队列 -(void)barrier { //1.创建队列(并发队列) dispatch_queue_t queue = dispat ...
- SCC（强连通分量）
1.定义: 在有向图G中,如果两个顶点间至少存在一条路径,称两个顶点强连通(SC---strongly connected). 有向图中的极大强连通子图,成为强连通分量(SCC---strongly ...
- HDU 1508 DP
题意:规定一个数列 = {这个数的质因子只能包括2,3,5,7},求第n个数字是多少: 思路:暴力打表,然后只粘数据,虽然过了,但是正解其实是DP,每一个数字都是由某一个该数列里的某一个数字乘以2,3 ...
- 如何解决requireJs的模块加载超时
requireJs的加载是一种异步机制,它加载js的时候有个默认的超时机制,当加载一个js超过一定时间的时候,它就会在浏览器中抛出模块加载超时错误,接下来,就不会加载这个模块. 这个机制其实是起到了节 ...
- 一些JavaScript的技巧、秘诀和最佳实践
文章分享一些JavaScript的技巧.秘诀和最佳实践,除了少数几个外,不管是浏览器的JavaScript引擎,还是服务器端JavaScript解释器,均适用. 本文中的示例代码,通过了在Google ...
- web安全之http协议
http协议 全称是超文本传输协议,是web的核心传输机制,也是服务端和客户端之间交换url的首选协议. url url全称是统一资源定器(统一资源标识符) 顾名思义 每一条格式正确且规范,但url都 ...
- zoj3551 Bloodsucker ——概率DP
Link: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4530 A[i]数组表示当吸血鬼有 I 个的时候,还需要的天数.可以 ...
- MongoDB 备份(mongodump)恢复(mongorerstore) 导出 (Mongoexport) 导入( Mongoimport)
MongoDB 备份(mongodump) 在Mongodb中我们使用mongodump命令来备份MongoDB数据.该命令可以导出所有数据到指定目录中. mongodump命令可以通过参数指定导出的 ...