<h1>第二十课时，margin重叠现象</h1>
相邻的“普通”元素，上下边距，并非简单相加，
而是取其中最大值。漂浮元素互相相加。
这种现象叫做margin重叠。
作业：测试margin重叠的发生条件及现象，
并自行搜索，父子div也会发生margin重叠，写出代码及效果图。
<h1>第二十一课时 内联元素inline</h1>
把其中第几个字换成某个颜色
第一个思路，把其中两个字放在div中，结果，div是块状元素，会单独占一行。
把div换成span， 行内元素，不会生成块状。
span设置设置竖直方向的宽高是没有意义的，只能在这一行内起作用。水平方向上可以设置mrgin和padding，跳不出行。
作业：搜索并总结，哪些html元素是块状，哪些内联元素。
《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
本次代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页实战</title>
<style>
container{/总体页面大小/
width: 1000px;/*left-side 和right-side 加起来的宽度*/
background-color: blue;
margin:auto 0;
}
header{
height:120px;
background-color: #A4D3EE;
}
main{
background-color: #E0FFFF;
height: 600px;/*main 只有定义了其高度之后，它下面的footer才能显示出来*/
}
left-side{
width:700px;
height:600px;
float:left;
background-color: #FFEC8B;
}
.four{
width: 330px;
height:280px;
background-color: #CD6889;
float: left;
margin:10px;
}
hua{
color: red;
}
right-side{
width: 300px;
height: 600px;
float: right;
background-color: #388E8E;
}
footer{
height:100px;
background-color:#36648B;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="left-side">
<div class="four">云想衣裳<span id="hua">花</span>想容</br>春风拂栏露华浓。</div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
</div>
<div id="right-side"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
网友评论