文档章节

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

哎那个新来的
 哎那个新来的
发布于 2017/05/14 20:29
字数 494
阅读 457
收藏 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以后,没有设置宽度,他的宽度会以自身的内容的尺寸进行调节;原来的位置不占有位置,已经脱离文档流。

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

 

 

© 著作权归作者所有

共有 人打赏支持
上一篇: border和background
下一篇: Css使用说明
哎那个新来的
粉丝 1
博文 92
码字总数 29196
作品 0
闸北
程序员
私信 提问
css中float和position属性

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

RanoB
2016/12/26
14
0
什么叫文档流,为什么清浮动,定位的规则是什么?

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

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

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

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

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

熊蛋子17
2017/11/14
0
0
前端开发笔记(3)css基础(中)

上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流。 脱离标准流 css中一共有三种方法脱离标准流 浮动 绝对定位 固定定位 浮动 我们要搞清楚什么是浮动,先来看一个标准文...

lxq_xsyu
2016/11/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

设置虚拟机固定IP地址

1、点击虚拟机编辑找到虚拟网络编辑器 2、设置网络 3、修改接口配置文件 切换到cd /etc/sysconfig/network-scripts/下面找到对应接口的文件 添加如下内容 4、修改域名服务器 切换到 vi /etc/...

zhu_kai1
3分钟前
0
0
如何解决分布式系统数据事务一致性问题

一、关于分布式系统事务一致性问题 Java 中有三种可以的事务模型,分别称作本地事务模型(Local Transaction Model),编程式事务模型(Programmatic Transaction Model),和声明式事务模型...

hblt-j
4分钟前
0
0
弹幕,是怎样练成的?

说起弹幕看过视频的都不会陌生,那满屏充满着飘逸评论的效果,让人如痴如醉,无法自拔 最近也是因为在学习关于 canvas 的知识,所以今天就想和大家分享一个关于弹幕的故事 那么究竟弹幕是怎样...

我的卡
5分钟前
0
0
VisualBox 安装 CentOS 7.6 操作记录

20181213 VisualBox 安装 CentOS 7.6 操作记录 1、下载 官网下载地址: https://wiki.centos.org/Download找到i386 Everything (ISO), Minimal (ISO), NetInstall (ISO)选择 阿里云镜......

wwzzhh166
9分钟前
0
0
telegram_bot

new group -> 选择人 -> 填写群名 搜索BotFather -> start =========================== ou can control me by sending these commands: /newbot - create a new bot /mybots - edit your bo......

八戒八戒八戒
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部