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设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- 动手实现自己的 STL 容器《2》---- list
1. 序: 本文参考了侯捷的 <STL 源码分析>一书,出于兴趣,自行实现了简单的 list 容器. 学习了 STL 的 list 容器的源代码,确实能够提高写链表代码的能力.其中的 so ...
- C++ UFunction({FLAG}) 宏 FLAG 解释笔记
1.BluePrintCallable --蓝图可调用 但不可编辑 2.BlueprintImplementableEvent --函数体必须实现与Blueprint 但函数名必须生成与C++ .h ...
- OD调试篇6--对一些真正的小程序进行一点点的修改
先打开这个程序看看,提醒你这是一个未注册版本的软件.会发现只能添加4个联系人,这显然是我不想看见的,于是我要对这个程序进行一些修改,嘿嘿... 通过OD载入这个程序 有一些(SEH)也就是异常,我们可 ...
- 【转】Flexbox——快速布局神器
原文转自:http://www.w3cplus.com/css3/flexbox-basics.html 简介 在很多方面HTML和CSS是一个强大的内容发布机制——易学.灵活和强大.但复杂的布局是他 ...
- Java数据结构和算法之递归
四.递归 递归是函数调用自身的一种特殊的编程技术,其应用主要在以下几个方面: 阶乘 在java当中的基本形式是: Public void mothed(int n){//当满足某条件时: Mo ...
- Azure媒体服务的Apple FairPlay流功能正式上线
在此我们高兴地宣布,Azure FairPlay Streaming服务已正式商用. FairPlay允许用户轻松构建解决方案,并可扩展到最新版本的Apple TV.Azure媒体服务可以结合现有的P ...
- http和htpps
http(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议. HTTPS 基于安全套接字层的超文本传输协议 或者是 HTTP over SSL **HTTP 和 HTTPS相同 ...
- ucos3的配置文件
1,配置文件,用于系统的裁剪 均有详细的注释 为组件的开关 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...
- ✡ leetcode 166. Fraction to Recurring Decimal 分数转换 --------- java
Given two integers representing the numerator and denominator of a fraction, return the fraction in ...
- 数据获取以及处理系统 --- 功能规格说明书V2.0
产品规格说明书: 版本号: V2.0 版本说明: Version 1.0 简单得需求分析以及构思,初稿形成 Version 2.0 细化beta阶段设计,增加典型用户尝尽以及功能罗列 1. 引言 1. ...