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. 在有main函数的前提下 eclipse找不到主类

    有时候在测试类的时候eclipse会莫名奇妙的提示找不到主类   接下来分别有几种解决办法 1.在项目上右击> Builder Path -> Configure Build Path - ...

  2. SQLServer 自动循环归档分区数据脚本

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/表分区 概述 在很多业务场景下我们需要对一些记录量比较大的表进行分区,同时为了保证性能需要将一些旧的数据进行归档.在分区表很多的情 ...

  3. 如何关闭eclipse对js xml的验证

    经常会发现导入一些js框架,eclipse会编译报错 这是eclipse对js的瞎验证,如何解决呢? 关闭eclipse对js,xml的验证即可: 菜单Window - > Preference ...

  4. 通过express搭建自己的服务器

    前言 为了模拟项目上线,我们就需要一个服务器去提供API给我们调用数据.这次我采用express框架去写API接口.所有请求都是通过ajax请求去请求服务器来返回数据.第一次用node写后端,基本就是 ...

  5. 计算机基础--Java中int char byte的关系

    计算机基础--Java中int char byte的关系 重要:一个汉字占用2byte,Java中用char(0-65535 Unicode16)型字符来存字(直接打印输出的话是字而非数字),当然要用 ...

  6. Hive基础(5)---内部表 外部表 临时表

    1.外部表 关键字:EXTERNAL 外部表创建时需要指定LOCATION 删除外部表时,数据不被删除 CREATE EXTERNAL TABLE page_view(viewTime INT, us ...

  7. Huge Mission

    Huge Mission Problem Description Oaiei is busy working with his graduation design recently. If he ca ...

  8. OpenVPN CentOS7 安装部署配置详解

    一 .概念相关 1.vpn 介绍 vpn 虚拟专用网络,是依靠isp和其他的nsp,在公共网络中建立专用的数据通信网络的技术.在vpn中任意两点之间的链接并没有传统的专网所需的端到端的物理链路,而是利 ...

  9. node.js上除了Express还有哪些好用的web开发框架

    老司机都有体会, 开发本身没有多难, 最纠结其实是最初的技术和框架选型, 本没有绝对的好坏之分, 可一旦选择了不适合于自己业务场景的框架, 将来木已成舟后开发和维护成本都很高, 等发现不合适的时候更换 ...

  10. 基于FPGA的肤色识别算法实现

    大家好,给大家介绍一下,这是基于FPGA的肤色识别算法实现. 我们今天这篇文章有两个内容一是实现基于FPGA的彩色图片转灰度实现,然后在这个基础上实现基于FPGA的肤色检测算法实现. 将彩色图像转化为 ...