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设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- 电子词典的相关子函数db.c程序
整个电子词典是分块做的:包含的Dic_Server.c,Dic_Client.c,db.c,query.c,xprtcl.c,dict.h,xprtcl.h,dict.txt(单词文件) 下面是db. ...
- .NET 强引用和弱引用
一:什么是弱引用 了解弱引用之前,先了解一下什么是强引用 例如 : Object obj=new Object(); 就是一个强引用,内存分配一份空间给用以存储Object数据,这块内存有一个 ...
- mysql控制台操作
显示表结构 : show create table table_name 复制表:insert into table_name1 select * from table_name2
- Java程序的安装、配置、创建项目
一.安装JDK 第一步:双击进行安装. 第二步:配置 path 右击"计算机"--"属性"--"高级系统设置"--"环境变量&qu ...
- ODOO 源代码安装要求
ODOO 源代码安装要求 ref:http://www.odoo.com/documentation/10.0/setup/install.html#setup-install-source pyth ...
- Linux学习方法
应该如何提问? 先要尝试自己解决 - 帮助 - 文档 - 示例 提问的智慧 - 问题详尽 - 贴图
- PHP 数组 foreach引用导致的bug
<?php $arr = array('a', 'b', 'c'); foreach($arr as &$v) {} foreach($arr as $v) {} var_dump($a ...
- input file上传文件扩展名限制
方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...
- dbms_stats包更新、导出、导入、锁定统计信息
dbms_stats包问世以后,我们可通过一种新的方式来为CBO收集统计数据.目前,已经不再推荐使用老式的Analyze分析表和dbms_utility方法来生成CBO统计数据.dbms_stats能 ...
- python学习-day18、文件处理、
4.文件操作 武sir:http://www.cnblogs.com/wupeiqi/articles/4943406.html 林海峰:http://www.cnblogs.com/linhaife ...