html之div
先了解⼀些什么是盒⼦模型
margin(外边距/边界)
border(边框)
padding(内边距/填充)
所以元素的实际占位尺⼨=元素尺⼨+padding+边框宽度
第1层:盒⼦的边框(border),
第2层:元素的内容(content)、内边距(padding)
第3层:背景图(background-image)
第4层:背景⾊(background-color)
第5层:盒⼦的外边距(margin)
从这个层次关系中可以看出,当同时设置背景图和背景⾊时,背景
图将在背景⾊的上⽅显⽰
margin外边距
可统⼀设置或四边分开设置,如图:
margin:0px; 统⼀设置
⽔平居中包含两种情况:
块级元素的⽔平居中:margin:0px auto;
⽂字内容的⽔平居中:text-align: center;
垂直居中:div border属性
常见的单⾏⽂字的垂直居中可设置⽂字所在⾏的height与
⾏⾼样式属性⼀致,⽐如:
div{
width: 400px;
height: 400px;
line-height: 400px;/*⾏⾼与div⾼度⼀致*/
}
理解浮动属性⾸先要搞清楚,什么是⽂档流?
⽂档流:浏览器根据元素在html⽂档中出现的顺序,从左向右,从上到下依次排列。
浮动属性是CSS中的定位属性,⽤法如下:
float: 浮动⽅向(left、right、none);
left为左浮动、right为右浮动、none是默认值表⽰不浮动,设置元素的浮动,该元素将脱离⽂档流,向左或向右移动直到它的外边距碰到⽗元素的边框或另⼀个浮动元素的边框为⽌。
浮动⽰例,没有使⽤浮动的3个DIV:
HTML结构代码:
<div id="first">第1块div</div>
<div id="second">第2块div</div>
<div id="third">第3块div</div>
CSS样式代码:
#first, #second, #third{
width:100px;
height:50px;
border:1px #333 solid;
margin:5px;
}
执⾏效果如图:
样式中加⼊ float:left;
执⾏效果如图:
⽰例:
<html>
<head>
<title>div布局⽰例</title>
<style type="text/css">
div{
width:100%;
}
#header{
background:red;
height:20%;
color:blue;
}
#main{
width:100%;
height:60%;
color:green;
}
.mid{
float:left;
}
#divleft{
background:yellow;
height: 100%;
width: 20%;
}
#divmid{
background:pink;
height: 100%;
width: 60%;
}
#divright{
background:purple;
height: 100%;
width:20%;
}
#footer{
background:blue;
width:100%;
height:20%;
color:red;
}
</style>
</head>
<body>
<div id="header">
top div
</div>
<div id="main">
<div id="divleft" class="mid"> left div
</div>
<div id="divmid" class="mid"> center div
</div>
<div id="divright" class="mid"> right div
</div>
</div>
<div id="footer">
bottom div
</div>
</body>
</html>
View Code
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论