CSS学习笔记：3 布局

来源：互联网发布：电视机屏幕检测软件编辑：程序博客网时间：2024/04/29 10:55

绝对定位

属性：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重复在一起
这里写图片描述

0 0

CSS学习笔记：3 布局

绝对定位

绝对定位的块级元素与绝对定位的文字

z-index 覆盖问题

相对定位

相对定位

不占用位置的相对位置

浮动

文字向右移动

文字向左浮动

文字围绕图片

文字不环绕图片

块级元素div的水平排列

显示方式

隐藏

块级

内联

内联–块级 结合

元素处于同一行，同时能指定大小

其它显示方式

水平居中

内容居中

元素居中

垂直居中

line-weight方式

内边距方式

table方式

左侧固定

左右固定

贴在下方

块之间的空格

使用浮动解决空格问题

内联–块级结合