盒子布局
none 定义无边框。
hidden 与"none”相同。不过应用于表时除外，对于表，hidden用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在才多数浏览器中呈现为实线。
solid- 定义实线。
padding---内边距---内容距离边框的距离 上右下左
margin------外边距---边框距离页面的距离
浮动
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
.main{
width: 500px;
height: 800px;
border: 1px solid black;
margin: 200px;
position: relative;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: aqua;
position: absolute;
top: 500px;
left: 100px;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color:gold;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
</head>
<style>
.flex-contain{
width: 400px;
height: 300px;
background-color: orange;
display: inline-flex;
align-content: space-between;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</body>
</html>
40
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
