CSS学习笔记：3 布局
2017-04-15 16:43
417 查看
绝对定位
属性：position值： absolute
设置了绝对定位的元素，相当于该元素被从原文档中删除了
绝对定位文字如果不是在绝对定位的div中，是以body为基础移动的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>前端练习</title>
</head>
<body>
<style>
p.abs{
position: absolute;
left: 150px;
top: 75px;
}
</style>
<p >正常文字1</p>
<p >正常文字2</p>
<p class="abs" >绝对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>
</body>
</html>
绝对定位的块级元素与绝对定位的文字
绝对定位的文字，如果在块级元素内部，以块级元素为基准。<style>
p.abs{
position: absolute;
left: 0px;
top: 50px;
}
.absdiv{
position: absolute;
left: 150px;
top: 100px;
width:215px;
border: 1px solid blue;
}
</style>
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>
<div class="absdiv">
这是一个定位了的div
<p class="abs" >绝对定位的文字</p>
</div>
注：”绝对定位的文字” 这个p 的父容器div，并没有定位。 所以它的”最近的一个定位了的父容器” 即body
<style>
p.abs{
position: absolute;
left: 100px;
top: 50px;
}
</style>
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
</div>
<div >
这是一个div
<p class="abs" >绝对定位的文字</p>
</div>
z-index 覆盖问题
通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。
<style>
img#i1{
position: absolute;
left: 60px;
top: 20px;
z-index:1;
}
img#i2{
position: absolute;
left: 60px;
top: 120px;
z-index:-1;
}
</style>
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
</div>
<img id="i1" src="xxxx.gif" />
<img id="i2" src="xxxx.gif" />相对定位
相对定位
属性：position值：relative
相对定位不会将元素从源文档中删除，是在原位置的基础是移动一定距离。
<style>
p.r{
position: relative;
left: 100px;
top: 50px;
}
</style>
<p >正常文字a</p>
<p >正常文字b</p>
<p class="r" >相对定位的文字,不在div内</p>
<p >正常文字c</p>
<p >正常文字d</p>
不占用位置的相对位置
<style>
.abs{
position: absolute;
left:50px;
top:100px;
}
p.r{
position: relative;
left: 100px;
top: 50px;
}
</style>
<p >正常文字a</p>
<p >正常文字b</p>
<div class="abs">
<p class="r" >相对定位的文字,在绝对定位的div内</p>
</div>
<p >正常文字c</p>
<p >正常文字d</p>
浮动
文字向右移动
属性：float值：right
在原来高度基础上，文字向右浮动，让出原来的位置，
<style>
.f{
float:right;
}
</style>
<div >正常文字1</div>
<div >正常文字2</div>
<div class="f">浮动的文字</div>
<div >正常文字4</div>
<div >正常文字5</div>
文字向左浮动
属性：float值：left
文字围绕图片
在块级元素div中，设置图片浮动来实现<style>
.f{
float:left;
}
div{
width:320px;
}
</style>
<div >
<img src="file://C:/Users/Administrator/Desktop/ss.png"/>
<p> 当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
当图片不浮动时，文字就会换行出现在下面
</p>
</div>
<div >
<img class="f" src="file://C:/Users/Administrator/Desktop/ss.png"/>
<p>
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
当图片浮动时，文字围绕着图片
</p>
</div>
文字不环绕图片
不允许出现浮动元素属性：clear
值：left（左侧不能环绕）、right（右侧…）、both（两侧都不可环绕）、none（可以环绕）
<style>
.f{
float:right;
}
div{
width:320px;
}
.clearp{
clear:right;
}
</style>
<div >
<img class="f" src="file://C:/Users/Administrator/Desktop/ss.png"/>
<p class="clearp">
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
当图片浮动时，文字却不想围绕图片
</p>
</div>
块级元素div的水平排列
默认的div排列是会换行的如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果
<style>
div#floatingDiv{
width:100px;
}
div#floatingDiv div{
float:left;
}
</style>
默认的div排列是会换行的
<div>
菜单1
</div>
<div>
菜单2
</div>
<div>
菜单3
</div>
--------分隔线--------
<div id="floatingDiv">
<div>
菜单1
</div>
<div>
菜单2
</div>
<div>
菜单3
</div>
<div>
菜单4
</div>
</div>
显示方式
隐藏
display:none; 使得被选择的元素隐藏，并且不占用原来的位置visibility:hidden; 隐藏元素，元素继续占用原空间。
http://blog.csdn.net/lizhongping00/article/details/70170167#t20
块级
display:block; 表示块级元素块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效
div默认是块级元素
span默认是内联元素(不会有换行,width和height也不会生效)
<style>
div,span{
border: 1px solid lightgray;
margin:10px;
width:200px;
height:100px;
}
.d{
display:block;
}
</style>
<div>普通的div块</div>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<span class="d">这是span,被改造成了块级元素</span>
内联
display：inline 内联元素内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定
<style>
div{
border: 1px solid lightgray;
margin:10px;
width:200px;
height:100px;
}
.d{
display:inline;
}
</style>
<div>普通的div块</div>
<div class="d">这是div,被改造成了内联元素</div>
内联–块级 结合
内联元素不换行，且不能指定大小（宽度和高度）块级元素能指定大小，换行。
元素处于同一行，同时能指定大小
属性：display值：inline-block
<style>
span{
display:inline-block;
margin:10px;
width:100px;
}
</style>
<span>路飞</span>
<span>艾斯</span>
<span>萨博</span>
其它显示方式
list-item：显示为列表table：显示为表格
inline-table：显示为前后无换行的表格
table-cell：显示为单元格
水平居中
内容居中
设置内容居中有两种方式：1 align=”center” 属性
2 style=”text-align” 样式
<style>
div{
border:1px solid lightgray;
margin:10px;
}
</style>
<div align="center">
通过设置属性align="center" 居中的内容
</div>
<div style="text-align:center">
通过样式style="text-align:center" 居中的内容
</div>
元素居中
块级元素div使用auto样式居中内联元素span放入到块级元素中居中
<style>
div{
border: solid 1px lightgray;
margin: 10px;
}
span{
border: solid 1px lightskyblue;
}
</style>
<div> 默认情况下div会占用100%的宽度,所以无法观察元素是否居中</div>
<div style="width:300px;margin:0">
设置本div的宽度，然后再使用样式 margin: 0，未设置auto</div>
<div style="width:300px;margin:0 auto">
设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中</div>
<br>
<span style="width:300px;margin:0 auto">
span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中</span>
<div style="text-align:center">
<span>span的居中可以通过放置在div中，然后让div text-align实现居中</span>
</div>
垂直居中
line-weight方式
单行垂直居中<style>
#d {
line-height: 100px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">line-height 适合单独一行垂直居中</div>内边距方式
<style>
#d {
padding: 30 0;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">设置内边距的方法来实现多行数据的垂直居中效果</div>table方式
首先通过display：table-cell； 把div用单元格的形式显示，然后借用单元格的垂直居中 vertical-align：middle；来达到效果。<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">
<img src="file://C:/Users/Administrator/Desktop/ss.png"/>
</div>
左侧固定
左侧固定宽度通过浮动float来实现。<style>
.left{
width:200px;
float:left;
backgrount-color:pink;
}
.right{
overflow:hidden;
background-color:lightskyblue;
}
</style>
<div class="left">左侧固定宽度</div>
<div class="right">右侧自动填满</div>左右固定
<style>
.left{
width:200px;
float:left;
background-color:lightskyblue;
}
.right{
width:200px;
float:right;
background-color:lightskyblue;
}
.center{
margin:0 200px;
text-align:center;
background-color:lightgray;
}
</style>
<div class="left">左侧固定宽度</div>
<div class="right">右侧固定宽带</div>
<div class="center">中间自适应</div>
贴在下方
设置下面的块bottom为0，并且绝对定位。<style>
#div1
{
position: relative;
height: 100px;
width: 30%;
background-color: skyblue;
}
#div2
{
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
background-color: lightgreen;
}
</style>
<div id="div1">
<div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
</div>
</div>
块之间的空格
内联元素span不同的写法产生空格<style>
span{
border-bottom:2px solid blue;
}
</style>
<div class="continue">
<span>连续的span</span><span>连续的span</span><span>连续的span</span><span>连续的span</span>
</div>
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>
使用浮动解决空格问题
<style>
div.nocontinue span{
border-bottom:2px solid lightgray;
float:left;
}
</style>
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>
<div style="clear:both"></div>
<div>后续的内容</div><div style="clear:both"></div>用于使得后续的元素，不会和这些span重复在一起
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS布局学习笔记
- css学习笔记---盒模型，布局
- CSS学习笔记-附加篇( CSS仿淘宝首页导航条按钮布局效果）
- 慕课网《如何用CSS进行网页布局》视频学习笔记
- CSS学习笔记 —— flex 弹性盒子布局
- CSS3+HTML5学习笔记四--CSS三栏布局-宽度只适应
- CSS布局学习笔记之图片居中
- css布局学习笔记之box-sizing
- HTML&CSS基础学习笔记1.22-文章布局
- css学习笔记---盒模型，布局
- CSS布局学习笔记
- css布局学习笔记之max-width
- WEB标准布局（DIV+CSS）学习笔记（一）-- CSS样式基础知识
- css布局的学习笔记
- css学习笔记 --初学 css代码风格、布局误区
- CSS+HTML网页设计与布局（学习笔记1）
- css布局学习笔记之box-sizing
- css布局学习笔记之position属性
- css布局-学习笔记
- CSS布局学习笔记之position