css折叠样式（4）——div+css布局内容概要：
⼀、div和span
(1)块级标签：div
(2)内联标签：span
如图所⽰：
padding是外边距还是内边距
⼆、盒模型(重要)
注：可⽤浏览器的调试⼯具可查看盒⼦
（1）margin：盒⼦外边距
（2）padding：盒⼦内边距（会改变块的⼤⼩）
（3）border：盒⼦边框宽度
（4）width：盒⼦宽度
（5）height：盒⼦⾼度
例⼦：
①：外边距和内边距区别：
demo.html
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
background:#C5C1AA;
}
div{
height:500px;
margin:60px;
padding:o;
border:solid 2px black;
background-color:rgba(255,0,0,0.7);
}
div.div1{
height:400px;
margin:0 audio;
border:solid 3px black;
background-color:rgba(0,0,255,0.7);
}
</style>
</head>
<body>
<div>
<div class="div1">
<h1 >欢迎登录系统</h1>
<h4 >账号:<input ></h4>    <h4 >密码:<input ></h4>  </div>
</div>
</body>
</html>
②：盒⼦模型div摆放例⼦：
demo.html
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
background-color:rgba(0,0,255,0.3);
}
div{
width:500px;
height:500px;
background-color:rgba(250,128,10,0.8);  margin:0 auto;  /* 使div居中*/
border:solid black;
}
div.div1{
float:left;  /* 向左排列/*
background-color:rgba(255,0,0,0.4);
border:solid blue;
height:244px;
width:244px;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div>
<div class="div1"></div>
<div class="div1"></div>
</div>
</body>
</html>
三、布局相关的属性（重要）
（1）position 定位⽅式
①.正常定位：relative
②.根据⽗元素进⾏定位：absolute
③.根据浏览器窗⼝进⾏定位： fixed
④.没有定位：static
⑤.继承：inherit
（2）定位
①.left:XXpx（左）离页⾯顶点的距离
②.right:XXpx（右）离页⾯顶点的距离
③.top:XXpx（上）离页⾯顶点的距离
④.bottom:XXpx（下）离页⾯顶点的距离
（3）z-index 层覆盖先后顺序（优先级）
①.-1,0,1,2,3；当为-1时，该图层为最底层
（4）display 显⽰属性（块级标签和内联标签之间的切换）
①.display：none  层不显⽰
②.display：block  块状显⽰，在元素后⾯换⾏，显⽰下⼀个块元素
③.display：inline  内联显⽰，多个块可以显⽰在⼀⾏内
（5）float 浮动属性
①.left：左浮动
②.right：右浮动
（6）clear 清除浮动
①.clear：both
（7）overflow 溢出处理
①.hidden 隐藏超出层⼤⼩的内容
②.scroll⽆论内容是否超出层⼤⼩都添加滚动条
③.auto 超出时⾃动添加滚动条
例⼦：
①：固定位置与布局demo
<!doctype html>
<html>
<head>
<title>Div+Css布局(布局相关的属性)</title>
<meta charset="utf-8">
<style type="text/css">
body{
padding:0;
margin:0;
}
div.diva{
position:relative;  /* ⼀定要添加，如没添加其⼦元素则不⽣效*/    margin:50px;
width:500px;
width:500px;
height:500px;
background-color:rgba(255,0,0,0.4);
}
.spanb{
position:absolute;
background-color:blue;
color:black;
top:-10px;
right:0;
}
.fixed{
padding:20px;
background:green;
position:fixed;
left:0;
top:40px;
z-index:1;  /* z-index的value值可为-1,0,1,2；当为-1时，该图层为最底层 */  }
</style>
</head>
<body>
<div class="fixed">
<p>联系⼈：翁孟铠</p>
<p>：XXXxxxx</p>
<p>地址：XXXXXXXXXXX</p>
</div>
<div class="diva">
<span class="spanb">浏览次数：222</spn>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。