浮动布局及盒子模型

今天巩固了一周学的知识，我感觉超链接样式、背景样式、列表样式比较麻烦，还需要多加练习。

学习了盒子模型，内容不是很多，但需要注意的地方很多：

首先在设置css样式的时候先初始化

*{margin：0px；padding：0px；}

学习了div标签：不是功能标签，可以放文字图片以及各种元素的快标签，常用来布局

float属性

clear属性

每个元素都看成一个盒子，盒子模型是由content(内容)、padding(内边距)、margin(外边距)和border(边框)这4个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

注意：margin属性的顺序是上下左右的顺序

margin重复现象：

只要有一个元素没有float属性就会出现重叠现象。margin取相邻元素的最大值

溢出：overflow：hidden代表若内容超出div则隐藏

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

#d{ 470px;height: 540}

#d1{ 90px;height: 90px;float: left;background-color: antiquewhite}

#d2{ 90px;height: 90px;float: left;background-color: aqua}

#d3{ 90px;height: 90px;float: left;background-color: aquamarine}

#d4{ 90px;height: 90px;float: left;background-color: azure}

#d5{ 110px;height: 90px;float: left;background-color: beige}

#d6{ 280px;height: 130px;clear: both;float: left;background-color: bisque}

#d7{ 190px;height: 180px;float:right;background-color: black}

#d8{ 200px;height: 130px; clear:left; float:left;background-color: chartreuse;}

#d9{ 80px;height: 130px;float: left;background-color: lightgreen}

#d10{ 190px;height: 180px; float: right;background-color: #5BF01F}

#d11{ 280px;height:100px;clear: left; float: left;background-color: #400EEC }

#d12{ 470px;height: 90px;clear: both; float: left;background-color: blue}

</style>

</head>

<body>

</div>

</body>

</html>