浮动布局及盒子模型
Posted -lwl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浮动布局及盒子模型相关的知识，希望对你有一定的参考价值。
今天巩固了一周学的知识，我感觉超链接样式、背景样式、列表样式比较麻烦，还需要多加练习。
学习了盒子模型，内容不是很多，但需要注意的地方很多：
首先在设置css样式的时候先初始化
*{margin：0px；padding：0px；}
学习了div标签：不是功能标签，可以放文字图片以及各种元素的快标签，常用来布局
浮动布局
float属性
|
属性值 |
说明 |
|
left |
元素向左浮动 |
|
right |
元素向右浮动 |
clear属性
|
属性值 |
说明 |
|
left |
清除左浮动 |
|
right |
清除右浮动 |
|
both |
左右浮动一起清除 |
盒子模型
每个元素都看成一个盒子，盒子模型是由content(内容)、padding(内边距)、margin(外边距)和border(边框)这4个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。
|
属性 |
说明 |
|
border |
(边框)元素边框 |
|
margin |
外边距 |
|
padding |
内边距 |
|
content |
(内容)可以是文字或图片 |
注意：margin属性的顺序是上下左右的顺序
margin重复现象：
只要有一个元素没有float属性就会出现重叠现象。margin取相邻元素的最大值
溢出：overflow：hidden代表若内容超出div则隐藏
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#d{width: 470px;height: 540}
#d1{width: 90px;height: 90px;float: left;background-color: antiquewhite}
#d2{width: 90px;height: 90px;float: left;background-color: aqua}
#d3{width: 90px;height: 90px;float: left;background-color: aquamarine}
#d4{width: 90px;height: 90px;float: left;background-color: azure}
#d5{width: 110px;height: 90px;float: left;background-color: beige}
#d6{width: 280px;height: 130px;clear: both;float: left;background-color: bisque}
#d7{width: 190px;height: 180px;float:right;background-color: black}
#d8{width: 200px;height: 130px; clear:left; float:left;background-color: chartreuse;}
#d9{width: 80px;height: 130px;float: left;background-color: lightgreen}
#d10{width: 190px;height: 180px; float: right;background-color: #5BF01F}
#d11{width: 280px;height:100px;clear: left; float: left;background-color: #400EEC }
#d12{width: 470px;height: 90px;clear: both; float: left;background-color: blue}
</style>
</head>
<body>
<div id="d">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9"></div>
<div id="d10"></div>
<div id="d11"></div>
<div id="d12"></div>
</div>
</body>
</html>
以上是关于浮动布局及盒子模型的主要内容，如果未能解决你的问题，请参考以下文章