position和BFC
一、关于position
流定位:不能通过left/top属性来进行定位(那用什么定位),上下排列的元素纵向边距会被合并,左右元素横向边距不会合并。
浮动定位:脱离文本流,就好像不在父元素中,像是浮在父元素的上方。
相对定位:相对自身位置定位,不会脱离文本流,相当于是个参照物,给子代元素作为参照。
绝对定位:脱离文本流,不占据空间,相对于最近的有定位属性的祖籍元素定位。
固定定位:相对于窗口进行定位。
二、BFC 块级格式化上下文
BFC会阻止垂直外边距的折叠,对于的嵌套元素来说,只要将父元素设置BFC就不会和父元素的margin重叠了
(这么牛X怎么实现BFC)
形成条件:
float:left/right
overflow:hidden/auto/scroll
display:inline-block
position:absolute/fixed
常见的清除浮动的方法
1、
zoom:1;
after{
content:" ";
display:block;
height:;
visibility:hidden;
clear:left;
}
2、
zoom:1;
after{
content:"";
display:table;
clear:borth;
}
清除浮动只有两种方式,一种是用clear清除浮动,二是使用父级元素形BFC。
position和BFC的更多相关文章
- 由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...
- BFC引发的关于position的思考
BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边, ...
- CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC
display常用值 参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级 ...
- 深入理解BFC
定义 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...
- “fixed+relative==absolute”——对BFC的再次思考
好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...
- 关于CSS inline-block、BFC以及外边距合并的几个小问题
CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...
- 我对BFC的理解
最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC, ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- 前端精选文摘:BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
随机推荐
- 使用js获取URL地址栏里面的参数, 获取请求链接参数,函数定义如下
function getUrlRequestParam(name) { var paramUrl = window.location.search.substr(1); var paramStrs = ...
- freemarker生成word,表格分页
在做项目的过程中,使用到了freemarker生成word.又有一个需求,明细的要确定有多少页,这就用到了换页的xml标签了,找了我好久 <w:p ><w:r><w:br ...
- 记录开发Nodejs c++ addon的一些经验(一、技术栈)
Nodejs c++ addon 是用c++去编写Nodejs的插件 技术栈: 1.node-gyp 一个用于把c++文件编译成node可执行文件的库 2.v8 google v8引擎 用于处理c++ ...
- js获取当前日期和时间的代码
最佳答案 var myDate = new Date(); myDate.toLocaleDateString(): //获取当前日期myDate.toLocaleTimeString(); //获取 ...
- FCKeditor文本编辑器的使用方法
FCKeditor是一个功能强大支持所见即所得功能的文本编辑器,可以为用户提供微软office软件一样的在线文档编辑服务. 它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持ASP.Net.A ...
- [小北De编程手记] : Lesson 03 - Selenium For C# 之 元素定位
无论哪一种自动化测试的驱动框架(基于B/S,桌面应用,还是手机App).都应当具有一套优秀的元素定位技术.通常的自动化测试流程也可以简单的归结为是一个从被测试程序中识别或是定位元素以及执行操作和验证元 ...
- MySQL数据库(4)----生成统计信息
MySQL最有用的一项功能就是,能够对大量原始数据进行归纳统计. 1.在一组值里把各个唯一的值找出来,这是一项典型的统计工作,可以使用DISTINCT 关键字清楚查询结果里重复出现的行.例如,下面的查 ...
- 【Android】修改包名
工程写的差不多了才发现原来用的包名还是自己尝试性的进行写代码的时候用到的.但apk的发布,google map api的申请等等方面都需要用到一个比较规范的包名.这就涉及到修改包名的问题. 包名一开始 ...
- SQL 截取字符
select SUBSTRING('123,abcdefg',charindex(',','123,abcdefg',0)+1,LEN('123,abcdefg')-charindex(',','12 ...
- UVaOJ 694 - The Collatz Sequence
题目很简单,但是一开始却得到了Time Limit的结果,让人感到很诧异.仔细阅读发现,题目中有一个说明: Neither of these, A or L, is larger than 2,147 ...