一,情景导入;
正常文档流:指的是HTML文档在进行内容布局时所遵循的从左到右,从上到下的表现方式。HTML中的大多数元素都处在正常的文档流中,而一个元素要脱离正常流的唯一途径就是浮动或定位。
二,定位的常见几种形式;
1,CSS有三种基本的定位机制:普通流,浮动和绝对定位;
a,普通流demo:
<!-- 普通流 -->
<h1>1.普通流</h1>
<div >
<div ></div>
<div ></div>
<div ></div>
</div>
b,相对定位demo:
<!-- 相对定位 -->
<h1>2.相对定位</h1>
<div >
<div ></div>
<div ></div>
<div ></div>
</div>
总结:1,上面例子可以看出,对蓝色div进行相对定位,分别右移,下移20px后绿色div位置并没有相应变化,而是在原位置,蓝色div遮挡住了部分绿色div。
c,绝对定位demo:
<!-- 绝对定位 -->
<h1>绝对定位</h1>
<div > (**总结2的解释**加上:position:relative)
<div ></div>
<div ></div>
<div ></div>
</div>
总结:
1,相对定位可以看作特殊的普通流定位,元素位置是相对于他在普通流中位置发生变化,而绝对定位使元素的位置与文档流无关,也不占据文档流空间。
<即绝对定位不占位>
2,绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素,那么他的位置就相对于初始包含块儿(body或html神马的)元素。
d,固定定位demo:
<h1>4.固定定位</h1>
<div >
<div >
</div>
<div >
</div>
<div >
</div>
</div>
e,浮动定位demo:
1,基本知识:
浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样.
1,)不浮动:
<!-- 浮动之不浮动 -->
<h1>5.浮动之不浮动</h1>
<div >
<div >
</div>
<div >
</div>
<div >
</div>
</div>
<!-- 右浮动 -->
<h1>6.右浮动</h1>
<div >
<div >
</div>
<div >
</div>
<div >
</div>
</div>
<!-- 左浮动 -->
<h1>7.左浮动</h1>
<div >
<div >
</div>
<div >
</div>
<div >
</div>
</div>
<!-- 整体左浮动 -->
<h1>8.整体左浮动</h1>
<div >
<div >
</div>
<div >
</div>
<div >
</div>
</div>
<br><br><br><br><br><br>
<!-- 宽度不够时 -->
<h1>9.宽度不够时</h1>
<div >
<div >
</div>
<div >
</div>
<div >
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 高度不够时 -->
<h1>10.高度不够时</h1>
<div >
<div >
</div>
<div >
</div>
<div >
</div>
</div>
f.行框清理demo:
1. 理解:前面指出浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。
2.代码:
<!-- 行框和清理 -->
<h1>11.行框和清理:不浮动时</h1>
<div >
<div ></div>
<div >
11111111111
11111111111
</div>
</div>
<h1>浮动时</h1>
<div >
<div ></div>
<div >
11111111111
11111111111
</div>
</div>
三,display:inline-block;
1.由于div是块级元素,所以框会以纵向形式排列。在实际操作中往往需要将框横向排列。所以可以使用:display:inlin-block;
2.代码:
1):
<div class="boxBg">
<div class="box1">
框框1
</div>
<div class="box2">
框框2
</div>
<div class="box3">
框框3
</div>
</div>
2):
<style type="text/css">
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc
}
.box1{
width:100px;
height:50px;
background-color:red;
display:inline-block
}
.box2{
width:100px;
height:50px;
background-color:blue;
display:inline-block
}
.box3{
width:100px;
height:50px;
background-color:green;
display:inline-block
}
</style>

3.总结:
1.至于中间的缝隙,追溯到本质原因是元素之间的空白符引起的,所以在父元素设置fone-size的大小,可以调节空白缝隙的大小。
2.代码:
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:34px;(文字的大小影响缝隙,为0就没有缝隙了,想要有文字,在子元素中设置)
}

css里涉及到定位相关的example实例的更多相关文章

  1. 奇妙的CSS之布局与定位

    前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...

  2. IOS开发涉及有点概念&相关知识点

    前言,IOS是基于UNIX的,用C/C+/OC直通系统底层,不想android有个jvm. 首先还是系统架构的分层架构 1.核心操作系统层 Core OS,就是内存管理.文件系统.电源管理等 2.核心 ...

  3. 百度地图API示例之添加定位相关控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  4. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  5. CSS的浮动和定位

    一.CSS中的浮动 1.定义和用法 float 属性定义元素在哪个方向浮动.在 CSS 中,任何元素都可以浮动.浮动会使原元素变成一个行级元素,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个 ...

  6. 浅析CSS里的 BFC 和 IFC

    前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链:segmentfault.com 分享到:   前端必备图书<Web安全开发指南 掌握白 ...

  7. 关于css里大于号(>)的用法

    之前用的css没涉及到这个问题,今天看到.知道大概用法,但不知道和普通的后代选择器有什么区别.到网上找了,其实w3c的css文档里有很详细明确的介绍(http://www.w3school.com.c ...

  8. CSS之浮动布局及相关问题

    CSS之浮动布局及相关问题   1.什么是浮动:       在我们布局的时候用到的一种技术,能够方便我们进行布局,默认流动布局有不足,让块元素可以并排显示,通过让元素浮动,我们可以使元素在水平上左右 ...

  9. 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

    最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...

随机推荐

  1. spring boot 日志文件配置(logback-spring.xml)亲测可用!

    问题描述:如何配置springboot项目,通过日志配置,使之输出自定义日志. 详细文章:https://blog.csdn.net/gebitan505/article/details/701421 ...

  2. Go开发环境安装配置

    访问下载地址:https://golang.org/dl/ 32位系统下载go1.8.1.linux-386.tar.gz,64位系统下载go1.8.1.linux-amd64.tar.gz, 假定你 ...

  3. 4-4 集成测试练习,和测试基础知识(guide)。

    Guide指南 18章应用测试指南(简单学习了一下.) (中文版--主要是为了先理解,之前看过英文版受语言影响,怕理解有偏差.) Minitest::Test是ActiveSupport::TestC ...

  4. codeforces 497b// Tennis Game// Codeforces Round #283(Div. 1)

    题意:网球有一方赢t球算一场,先赢s场的获胜.数列arr(长度为n)记录了每场的胜利者,问可能的t和s. 首先,合法的场景必须: 1两方赢的场数不一样多. 2赢多的一方最后一场必须赢. 3最后一场必须 ...

  5. Ant Man CodeForces - 704B (图论,贪心)

    大意: 给N个点,起点S终点T,每个点有X,A,B,C,D,根据I和J的X坐标可得I到J的距离计算公式 |xi - xj| + ci + bj seconds if j< i |xi - xj| ...

  6. 总结: MySQL(基础,字段约束,索引,外键,存储过程,事务)操作语法

    1. 显示数据库列表 show databases; # 查看当前所有数据库 show databases \G   #以行的方式显示 2. 在命令行中,执行sql语句 mysql -e 'show ...

  7. hdu2059 dpdpdp玄学5555~~

    龟兔赛跑 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. vEthernet(默认交换机) 无法访问网络

    VMware 开启虚拟机 最近公司由无线网转为有线时,我用VMware Workstation Pro装的几个系统,其中一个 ubuntu无法访问网页,在ubuntu运行ifconfig -a ,直接 ...

  9. Java多线程的同步控制记录

    Java多线程的同步控制记录 一.重入锁 重入锁完全可以代替 synchronized 关键字.在JDK 1.5 早期版本,重入锁的性能优于 synchronized.JDK 1.6 开始,对于 sy ...

  10. snagit12个人爱好