1、元素分为块级元素和行内元素,

块级元素可以设置宽高,会自动换行,并且会发生相邻margin的合并问题。行内元素设置宽和高无效,以水平方向排列,(行内元素,绝对定位,浮动元素不会发生外边距合并)并且垂直方向的margin和padding都是无效的。

2、display

display可以取值为none,inline,inline-block,block,inherit以及table相关的属性,如table,table-cell等,display属性规定元素应该生成的框的类型。

3、float

float可以取值none(默认),left,right,inherit。float浮动是在与原位置在同一水平线上进行向左或向右浮动,会脱离文档流,所以不会撑开父元素的高度,非浮动元素的同辈元素的排版会与浮动元素发生覆盖,但是非浮动元素的内文字会被挤走。

4、position

position可以取值static(默认),relative,absolute,fixed和inherit。static处于正常流,按元素的html排版布局,left,right,top,bottom和z-index无效。relative也是处于文档流中,但它按照自身原来的位置进行定位,进行定位的时候其它元素的位置保持不变,也就是说变得只有它自己。absolute是绝对定位,相对于最近的一个不为static的父元素进行定位,如果没有则相对于根元素html,如果没有设left或者top,则它也会脱离文档流,但是会呆在原来的位置。absolute的定位是相对于父元素的padding定位的,但是不包括border,不管box-sizing是border-box还是content-box。fixed相对于视口(viewport)进行绝对定位,也就是相对于浏览器的窗口,不会随着文档的移动而移动,IE6不支持fixed。

5、相互影响

(1)如果display为none,这是就不产生盒子,所以会忽略position和float,否则
(2)如果position的值为absolute或fixed,float会被转换为none,display会按下表进行转换,否则继续
display转换表
设置值 计算值
inline-table table
inline, run-in, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell,table-caption, inline-block block
其他,如list-item 同设定值

(3)如果position不是绝对布局,这时,如果float不为none或者该元素是跟元素,则依旧按上表进行转换。
(4)否则如果,position不是绝对布局,并且float为none不浮动,且不是跟元素,display就取设置值。

6、margin,overflow,padding和position,display,float的影响,其实都是一些BFC的知识,理解了BFC就好了。

(1)position,display,float不会影响padding。
(2)如果父元素设置了overflow为hidden或auto,那么就会消除float不会撑开父布局的问题。
(3)position的定位是相对于父元素的padding进行定位的。
(4)margin外边距的合并问题会受overflow,position,float,以及display的影响。
(5)overflow不一定可以隐藏position:absolute的元素,如果后代元素的包含块是整个视区(通常指浏览器内容可视区域,可以理解为body元素)或者是该容器(定义了overflow的元素)的父级元素时,则不受影响。所以,要想彻底剪裁它的所有子元素,它不但要有overflow:hidden,而且还要作为所有子元素的包含块(position定位)。

相邻的外边距会合并为一个外边距,这里的相邻意味着两个或多个外边距没有被非空内容,padding,border或clear隔开,并且位于普通流中。计算方法,如果都是正值,则取最大者,如果都是负值,取绝对值最大者,如果一正一负,则相加。
相邻的盒模型中,如果其中的一个是浮动的(floated),垂直margin不会被折叠。
设置了overflow属性的元素和它的子元素之间的margin不会被折叠。
设置了绝对定位(position:absolute)的盒模型,垂直margin不会被折叠。
设置了display:inline-block的元素,垂直margin不会被折叠。






position,display,float,overflow,margin,padding之间的相互影响的更多相关文章

  1. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

  2. Office WPS如何让页与页之间不相互影响

    在一个页面结束的位置点击插入-分页符,完了之后测试按回车下一页的内容有没有跟着往下跑,如果还是跟着往下跑的,再插入一次分页符,一般插入多次之后就不会跟着跑了,但是插的太多会有空白页面   测试按回车, ...

  3. HTML表格中各元素之间属性之间的相互影响

    开发了一个动态表格制作程序,用的是谷歌浏览器.发现几个现象,记录如下: 1.按照技术文档的说法,正规的表格样式如下: <table> <caption>标题</capti ...

  4. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  5. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  6. CSS布局 ——从display,position, float属性谈起

    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

  7. CSS布局 ——从display,position, float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  8. html5的float属性超详解(display,position, float)(文本流)

    html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...

  9. 前端(七)—— 盒模型之display、overflow、隐藏、border、margin、样式支持,层级结构

    display.overflow.隐藏.border.margin.样式支持,层级结构 一.盒模型之display 1.三种样式 block 块 inline 内联/行内 inline-block 内 ...

随机推荐

  1. 【转】SWT/JFace的对话框

    一.MessageDialog       ,MessageDialog的用法很简单 MessageDialog.openInfomation(shell,title,message);       ...

  2. 鸟哥Linux学习笔记07

    1, vi 是 老式的文字处理器,不过功能已经很齐全了,但是还是有可以进步的地方. vim可以说是程序开发者的一项很好用的工具,vim官网(http://www.vim.org)自己也说vim是一个“ ...

  3. C#关于通过反射PropertyType判读字符串类型方法

    今天在通过反射判读实体属性来映射数据库表是否修改的时候发现,最开始我通过 p.GetValue(entity) == null && p.PropertyType.IsValueTyp ...

  4. Windows和Linux查看和更改mysql连接池

    Windows: 查看: 进入mysql 输入:show variables like '%max_connections%'; 更改: 进入MYSQL安装目录 打开MYSQL配置文件 my.ini ...

  5. [转]iOS 应用程序的生命周期

    OS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变换,这些对于开发者来说都是很重要的. iOS系统的资源是有限的,应用程序在前台和在后台的状态是不一样的.在后台时,程序会受到 ...

  6. angularjs的几种常见写法

    学习angularjs不久,遇见的angularjs的写法也是很多的感觉,今天就在这里记录一下,还有没见过的,继续学习中... angularjs 常用的几种种写法 1.链式: angular.mod ...

  7. axios 学习笔记

    官方文档地址:https://github.com/axios/axios axios 是一个基于 Promise 的HTTP库,可以用在浏览器和 node.js 中 特性: • 从浏览器发起 XML ...

  8. 翻译连载 | 第 10 章:异步的函数式(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  9. 第4章 同步控制 Synchronization ----死锁(DeadLock)

    Jeffrey Richter 在他所主持的 Win32 Q&A 专栏(Microsoft Systems Journal,1996/07)中曾经提到过,Windows NT 和 Window ...

  10. H5上传图片并使用canvas制作海报

    马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...