【Css】Layout布局(二)
css定位(Positioning)
所谓定位，即允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
css提供了三种基本的定位机制：普通流、浮动和绝对定位。
position语法：
position : static absolute relative
普通流(static):
也有叫做文档流的，即元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述。
相对定位(relative):
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。(官方定义)
简单来说，就是元素框以普通流中元素框原有的位置的左上点为基准，以设置的数值为偏移量来定位。而不影响其在文档流中的原有位置，所以有时候会覆盖了其他的元素框。
绝对定位(absolute):
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。(官方定义)
简单来说，元素框在普通流的空间被删除，然后该元素框以其最近的已定位祖先元素左上点为基准，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块的左上点为基准，以设置的数值为偏移量来定位。
设置了绝对定位的元素框在普通流中的空间位置被关闭，所以其在普通流中的后一个元素框会向上补齐，从而定位的元素框也会覆盖其他的元素框。
总结一下：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
这样放一起看要好理解一些。
浮动(float)
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
其就像绝对定位一样，元素框根据设置往左或右浮动，直到碰到边框为止，而浮动的元素框从普通流中删除，其空间被其后的元素框补上。
画图太麻烦，直接上代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS Layout</title>
<script type="text/javascript" src="a.js"></script>
<style>
#box {
border: 1px solid green;
width: 300px;
height: 300px;
}
#box1 {
border: 1px solid;
background-color: yellow;
width: 70px;
height:70px;
}
#box2 {
border: 1px solid;
background-color: red;
width: 70px;
height:70px;
}
#box3 {
border: 1px solid;
background-color: green;
width: 70px;
height:70px;
}
</style>
</head>
<body>
<div id='box'>
<div id='box1'>框1</div>
<div id='box2'>框2</div>
<div id='box3'>框3</div>
</div>
</body>
</html>
效果：
然后将12至16行代码加上float属性：
#box1 {
border: 1px solid;
background-color: yellow;
width: 70px;
height: 70px;
float: right;
}
效果：
我们看到框1浮动到了父框体的最右，框2和框3则往上浮填充了原本框1的空间。
如果把right换成left。
float:left;
效果：
按理说框1左浮动，然后应该是框2被框1盖住了，可是这么看到框2和框3字样重叠在一起了？
其实，用调试器查看一下：
box2确实是被框1给覆盖了，原先的想法是正确的。
把框2也往左浮动，效果：
这样就很明显了，绿色的框3不见了，框1框2顺序靠左，框3则被框1给覆盖了。
那框3内的字体怎么没有靠上呢？
其实，3个元素框中的文字为文字流，而文字流是不会随着框体流的上浮而上浮的，所以产生了这样的状况。
如果3个框都左浮动，则
但是如果父框体宽度不够，比如box的宽度设为180px，则：
但如果框1的高度要比其他的高，比如框1的高度为100px，则：
看到框3被框1卡住了，是不是很有意思！
现在我们来看看文本和图片的浮动处理效果：
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS Layout</title>
<script type="text/javascript" src="a.js"></script>
<style>
.box {
border: 1px solid green;
width: 300px;
height: 300px;
}
.img {
width: 80px;
height: 80px;
} </style>
</head>
<body>
<div class='box'>
<img class='img' src='image/1.png' />
<p>圣诞节傻到家哦啊是基地哦就我 i 的端午节啊基地哦哇几滴娃家大奥 i 基地我觉得拍低洼激动 i 家啊我 i 的骄傲 i 觉得皮肤和哦互粉哦</p>
</div>
</body>
</html>
这里没有添加任何浮动效果：
如果图片添加了浮动属性：
.img {
width: 80px;
height: 80px;
float: left;
}
效果：
如果想要阻止文字环绕图片，给图片留出空间，我们可以这么做，给下面的文字流添加浮动效果。
我们给父框体加一个背景颜色。
.box {
border: 1px solid green;
width: 300px;
height: 300px;
background-color: yellow;
}
.img {
width: 80px;
height: 80px;
float: left;
}
p {
float: left;
}
效果：
其实，这里有一个问题，因为我们给box父框体给定义了高度，如果没有定义高度，则：
我们发现，父框体的高度变为了0，以下的图片和文字由于浮动而脱离了文本流，从而不占父框体的空间，因而父框体高度为0。该如何解决这个问题呢？
这就需要用到属性clear了。
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS Layout</title>
<script type="text/javascript" src="a.js"></script>
<style>
.box {
border: 1px solid green;
width: 300px;
background-color: yellow;
}
.img {
width: 80px;
height: 80px;
float: left;
}
p {
float: left;
}
.clear {
clear: both;
} </style>
</head>
<body>
<div class='box'>
<img class='img' src='image/1.png' />
<p>圣诞节傻到家哦啊是基地哦就我 i 的端午节啊基地哦哇几滴娃家大奥 i 基地我觉得拍低洼激动 i 家啊我 i 的骄傲 i 觉得皮肤和哦互粉哦</p>
<div class="clear"></div>
</div>
</body>
</html>
效果：
这样就解决了我们的问题。
当然还有一个办法，就是把整个box浮动，这样也可以达到clear的效果，不过这样下一个元素会受到这个浮动元素的影响。所以很多时候还是要用clear属性来实现这样的目的。
这里有一个小实验：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS Layout</title>
<script type="text/javascript" src="a.js"></script>
<style>
#box {
border: 1px solid green;
width: 300px;
height: 300px;
}
#box1 {
border: 1px solid;
background-color: yellow;
width: 70px;
height:70px;
float:left;
}
#box2 {
border: 1px solid;
background-color: red;
width: 70px;
height:70px;
float:left;
}
#box3 {
border: 1px solid;
background-color: green;
width: 70px;
height:70px;
float:left;
}
div {
clear: both;
}
</style>
</head>
<body>
<div id='box'>
<div id='box1'>框1</div>
<div id='box2'>框2</div>
<div id='box3'>框3</div>
</div>
</body>
</html>
依然是开始的3个框，均向左浮动，不过现在往里面添加了一个clear属性，结果：
【Css】Layout布局(二)的更多相关文章
- 第二百零二节，jQuery EasyUI，Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- CSS Grid layout布局
CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...
- Android 布局学习之——Layout(布局)具体解释二（常见布局和布局參数）
[Android布局学习系列] 1.Android 布局学习之--Layout(布局)具体解释一 2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数) ...
- Android开发中遇到的问题(二)——新建android工程的时候eclipse没有生成MainActivity和layout布局
一.新建android工程的时候eclipse没有生成MainActivity和layout布局 最近由于工作上的原因,开始学习Android开发,在入门的时候就遇到了不少的坑,遇到的第一个坑就是&q ...
- Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- 【Css】Layout布局(一)
看下图: css框模型(Box Model),也有叫做盒模型的.规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. element元素,也是内容的主体: padding内边距,也右称为填充的 ...
- 基本CSS布局二
基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...
- css进阶之二：flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- CSS ? Layout Module : CSS 布局模型
1 1 1 https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1 W3C Working Draft, 19 May 201 ...
随机推荐
- java外观模式
外观模式是为了解决类与类之家的依赖关系的,像spring一样,可以将类和类之间的关系配置到配置文件中,而外观模式就是将他们的关系放在一个Facade类中,降低了类类之间的耦合度,该模式中没有涉及到接口 ...
- python-自定义异步非阻塞爬虫框架
api import socket import select class MySock: def __init__(self, sock, data): self.sock = sock self. ...
- iOS 安装包瘦身（下篇）
本文来自网易云社区 作者:饶梦云 2.4. 清理无用代码 2.4.1. Dead Code Stripping Activating this setting causes the -dead_str ...
- 「AH2017/HNOI2017」礼物
题目链接 戳我 \(Solution\) 应为我们可以将任意一个数列加上一个非负整数,即可以变为将一个数列加上一个整数(可以为负),我们将这个整数设为\(z\).所以要求的式子的变为: \[\sum_ ...
- “全栈2019”Java第六十六章：抽象类与接口详细对比
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- windows本地搭建nginx+php+mysql+redis环境详细步骤
1.mysql的下载和安装 这个可参考我另外一篇文章:http://www.cnblogs.com/myIvan/p/9265645.html 2.php的下载和配置修改 下载地址:https://w ...
- tomcat正常启动后http://localhost:8080/报错404
病症: tomcat在eclipse里面能正常启动,而在浏览器中访问http://localhost:8080/不能访问,且报404错误.同时其他项目页面也不能访问.关闭eclipse里面的tomca ...
- session和cookie的知识总结
1.HTTP协议 由HTTP客户端发起一个请求,建立一个到服务器指定端口(默认是80端口)的TCP连接.HTTP服务器则在那个端口监听客户端发送过来的请求.一旦收到请求,服务器(向客户端)发回一个状态 ...
- PHP 五大运行模式
查看当前php 运行模式 php_sapi_name(); 运行模式 关于PHP目前比较常见的五大运行模式: 1)CGI(通用网关接口/ Common Gateway Interface) 2)Fas ...
- ONTAK2010 Peaks加强版(离线&在线)
题面 弱化版:luogu 强制在线版:bzoj 题解 本题有两种解法 离线算法:线段树合并 先看一道简单题[USACO18JAN]MooTube 本题就是在此基础上求第\(k\)高的点 首先把询问和路 ...