文档章节

CSS的定位,浮动与清除浮动,position的定位

哎那个新来的
 哎那个新来的
发布于 2017/05/14 20:29
字数 494
阅读 430
收藏 1

CSS中的三种定位:1.标准文档流定位;2.float浮动;3.absolute定位

盒子模型的3D效果:第一层:border;第二层:center+padding;第三层:background-image;第四层:background-color;最后一层:margin;

盒子模型的尺寸:content+padding+border+margin;

盒子模型的自动居中:margin{0 auto};左右外边距设置auto即可,同时还要给width设置值,但是不可以同时各float,absolute一起使用。一般盒子元素不设置高度,随着内容进行撑高

浮动会对父级元素造成影响,因为父容器正常情况下会自动扩高,但是子元素加了浮动后位置不保留,父容器就感觉它不存在了,所以不会扩高,解决方式:给父容器加overflow:hidden解决即可。

浮动同时会给他的下一个相邻元素造成影响,使用clear:both来清楚浮动。

相对定位:relative的特点:相对于自身原有的位置进行偏移;仍然处于文档流中;原来的位置依旧占有位置

绝对定位:abosulte的特点:相对于离自己最近的的已定位的祖先元素进行偏移【一般设置他的父元素为position:relative,因为relative定位仍然处于文档流中。】;不处于文档流中;当一个元素设置了absolute以后,没有设置宽度,他的宽度会以自身的内容的尺寸进行调节;原来的位置不占有位置,已经脱离文档流。

绝对定位主要适用于:横向两列布局中的一列宽度固定,一列宽度自适应的情况,需要注意的是:设置绝对定位的这列的高度必须要小于未设置定位的那一列的高度,因为设置了绝对定位不占文档流,高度不会撑起父元素的高度

 

 

© 著作权归作者所有

共有 人打赏支持
哎那个新来的
粉丝 0
博文 92
码字总数 29196
作品 0
闸北
程序员
css中float和position属性

盒子的三种定位形式 在标准流下的定位 在浮动属性下的定位 在定位属性下的定位 除非设置浮动属性或定位属性,否则所有盒子都是在标准流中定位 顾名思义,标准流中元素盒子的位置由元素在HTM...

RanoB
2016/12/26
14
0
Learn CSS Positioning in Ten Steps

使用float和clear可以方面的实现多列,并且div高度不用自己定义,会随着内容自动变化。 1. position:static 所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中...

晨曦之光
2012/03/09
0
0
什么叫文档流,为什么清浮动,定位的规则是什么?

文档流 做网页布局的时候,有时候会对网页元素进行浮动,按照自己的需求对网页元素进行排版,元素浮动之后会脱离文档流,造成一些小麻烦,这时候就需要清除浮动,让元素按照自己需求正常排版...

默非静语
07/10
0
0
详解 清除浮动 的多种方式(clearfix)

说明 本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者! 1.什么是浮动 首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位...

FEWY
2017/04/03
0
0
浮动定位BFC边距的合并

1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素的特征是 浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它...

熊蛋子17
2017/11/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

学习大数据为什么要先学Java?

计算机编程语言有很多,目前用的多一点的就是Java,C++,Python等等。目前大多数学习大数据的人都是选择学习Java,那Java到底好在哪呢?为什么学大数据之前要先学Java呢?我们今天就来分析一...

董黎明
20分钟前
0
0
php删除服务器所有session

php删除服务器所有session踢掉所有在线用户linux 注意:如果要删除服务器上所有session,重启php服务是解决不了问题的,php的session是持久化的。 有效解决办法: 删除 /tmp 下的所有文件(默...

妖尾巴
26分钟前
0
0
Ubuntu18.04 安装最新版WPS

1.手动卸载libreoffice:sudo apt-get remove --purge libreoffice* 2.官网下载WPS和字体: WPS:http://wps-community.org/download.html 字体:http://wps-community.org/download.html?vl......

AI_SKI
54分钟前
4
0
数据结构(算法)-图(深度优先搜索 DFS)

#include <iostream>using namespace std;#define MaxVex 30typedef char VertexType;typedef struct vexNode adjList[MaxVex];struct edgeNode{int adjvex;//邻接点......

ashuo
59分钟前
1
0
1024 搞事倒计时!距程序员节还有 2 天!

详情请关注微信公众号:七牛云

七牛云
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部