1.盒子布局：
2.元素分类
| 块级元素 | 独占一行，可以设置宽和高 | 例：div p hn 等 |
| 内联元素 | 不会自动换行，设置宽和高的时候是不起作用的 | 例：span a 等 |
块级元素和内联元素可以进行相互转换：display
| 值 | 描述 |
| none | 此元素不会显示 |
| block | 此元素将显示为块级元素，此元素前后会有换行符 |
| inline | 默认。此元素将显示为内联元素，前后没有换行符 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级元素和内联元素</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
display: inline;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: yellow;
}
a{
width: 200px;
height: 200px;
display: block;
}
</style>
</head>
<body>
<div class="box">这是第一个div</div>
<div class="box1">这是第二个div</div>
注意：css隐藏元素的方式：
display:none;
width:0 height:0
5.3 浮动布局
通过设置float属性进行布局
none ----- 不浮动
left -------- 对象向左浮动，而后面的内容会流向对象的右侧
right--------------- 对象向右浮动，而后面的内容会流向对象的左侧
清除浮动：
clear
5.4 定位布局
属性:position -------- 定位方式
static : 默认值
absolute: 绝对定位，会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上的
值相较于父级元素的绝对定位，如果不存在这样的父级元素，相较于body
relative: 相对定位，不会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上
的值进行相对定位
<div class="box2">这是第三个div</div>
<a href="#">这是一个a标签</a>
<a href="#">这是一个a标签</a>
<a href="#">这是一个a标签</a>
</body>
</html>
3.浮动布局：
通过设置float属性进行布局：
none ----- 不浮动
left -------- 对象向左浮动，而后面的内容会流向对象的右侧
right--------------- 对象向右浮动，而后面的内容会流向对象的左侧
清除浮动： clear
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧均不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
4.定位布局：
属性:position -------- 定位方式
static : 默认值
absolute: 绝对定位，会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上的 值相较于父级元素的绝对定位，如果不存在这样的父级元素，相较于body
relative: 相对定位，不会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上 的值进行相对定位
1202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
