1. 盒模型

2. 外边距合并

3. 定位机制

4. Float

5. Position：属性有哪些取值，它们的行为是什么？ 无依赖绝对定位？

6. Display：常见属性值有哪些取值？

7. 对BFC规范的理解？

       1. 盒模型

盒模型从内向外包括content,padding,border和margin。

从前往后分别是：border，content+padding,background-image,background-color,margin

盒模型有两种模式：W3C标准模式和IE怪异模式，

W3C标准模式content不包括padding和border.

IE怪异模式中content包括padding和border。

IE下只要完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

所以：如果发现页面元素width或height有问题，则主要观察页面的DOCTPEY声明是否正确。

怪异模式并不是一点使用价值都没有，在CSS3中可以通过属性box-sizing设置盒模型：

box-sizing: content-box;  // 默认情况,标准模式

box-sizing: border-box;    //采用怪异模式

比如：在页面进行流体布局时，将宽度定义为百分数，最后就需要将盒模型定义为怪异模型，增加padding而不会影响整体width,否则会超过整体宽度的100%。

       2. 外边距合并 

（注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。）

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

       3. 定位机制

CSS中存在3中定位机制： 标准文档流，浮动和绝对定位；

标准文档流：从上到下，从左到右输出文档内容，由块级元素和行级元素组成。

浮动：使块级元素横向布局，多列布局关键。设置浮动的元素仍然处于标准文档流中。

绝对定位：设置浮动的元素不会处于标准文档流中,目的：横向多列布局和一些复杂效果，如遮罩层，全屏显示等。

       4. Float

元素会向左或向右移动，直到触碰到容器（父元素）为止。值有left，right和none；

浮动最开始诞生的原因只是为了让文字环绕图片。

Float主要特性：

坍塌性：被设置了float的元素会脱离文档流，父级包裹不住子集

包裹性：浮动元素宽度不起作用，内容撑开宽度；

清空格：会导致节点脱离文档流结构，空格，换行都不起作用；

具有坍塌性的样式有：

float,  position:absolute/fixed/sticky

体现包裹性的css样式有：

float

display:table/table-cell、inline-block

position:absolute/fixed/sticky

Overflow:hidden/scroll

清浮动：由于浮动有坍塌性，父级包裹不住子级（只能用在浮动元素的父级上。不必过多使用）

        .clear:after{

            content: "";

            display: table;

            clear: both;

        }

        .clear{

            *zoom: 1; /*兼容IE低版本*/

        }

       5. Position:属性有哪些取值，它们的行为是什么？ （是否脱离文档流？是否改变元素特性？怎么定位？）

取值有：static / relative / absolute / fixed / inherit

static: 默认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）。

relative: 1.不使元素脱离文档流；

2. 不影响元素本身的特性； 块元素还是块元素，内嵌还是内嵌;

3. 如果没有定位偏移量，对元素本身没有任何影响；

4. 如果有定位偏移量，则相对于其正常位置进行定位；

5. 还拥有z-index声明;

absolute:1. 使元素完全脱离文档流；（和float一样）

2. 使内嵌支持宽高；（和float一样）

3. 块属性标签内容撑开宽度(如果为设定宽高）；（和float一样，包裹性)

4. 如果没有定位偏移量，位置不变，具有跟随性；

5. 如果有定位偏移量，如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档<html>发生偏移；

(注意是定位父级，一般在需要绝对定位的父级上添加相对定位position:relative;)

6. 还拥有z-index声明;

fixed: 与绝对定位的特性基本一致，差别是始终相对屏幕窗口尺寸进行定位，（兼容性，IE6不支持，利用JS解决）

inherit:规定应该从父元素继承 position 属性的值。

设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多；

上文提到了absolute会使元素悬浮在页面之上，如果有多个悬浮元素，层级如何确定？答案是“后来者居上”

Absolute与float 兄弟关系，都具有包裹性、破坏性。

             5.2 无依赖绝对定位的原理？

无依赖绝对定位，不用在父级添加relative，利用绝对定位的跟随特性，如果没有偏移量则元素位置不变，

从而利用margin值进行定位（不过在移动端使用负margin会出现问题）

无依赖绝对定位为页面布局与重构提供了更加广阔的选型新思路，详情查看张鑫旭的CSS深入理解之absolute。

       6. Display：常见属性值有哪些取值？

值 描述

none

此元素不会被显示。

block

此元素将显示为块级元素，此元素前后会带有换行符。

inline

默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block

行内块元素。（CSS2.1 新增的值）

list-item

此元素会作为列表显示。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

       7. 对BFC规范的理解？

       W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。

CSS布局定位基础-盒模型和定位机制的更多相关文章

  1. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  2. CSS基础知识---浮动，定位和盒模型

    转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...

  3. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  4. 笔记《精通css》第3章 盒模型，定位，浮动，清理

    第3章    盒模型,定位,浮动,清理 1.盒模型用到的属性width,height,padding,border,margin 普通文档流的上下垂直margin会叠加 2.块级框 与 行内框, 利用 ...

  5. css文档之盒模型阅读笔记

    前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...

  6. ch3 盒模型、定位

    标准盒模型.怪异盒模型 外边距叠加 当两个或者争夺垂直外边距相遇时,他们将形成一个外边距,这个外边距的高度等于两个发生叠加的外边距的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底外 ...

  7. CSS（2）盒子模型、定位浮动

    盒子模型 盒子模型:一个盒子中主要的属性就5个.width与height.padding.border.margin.盒子模型标准有两种为标准盒模型和IE盒模型.学习上以标准盒子模型为主 width和 ...

  8. css（四）-- 盒子模型和定位

    盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离. 盒子模型主要是用于操作内边距(padding)与外边距(mar ...

  9. CSS 常用语法与盒模型分析

    CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...

随机推荐

  1. hgoi#20190628

    更好的阅读体验 来我的博客观看 T1-打印收费 CZYZ 校园内有一家打印店,收费有着奇葩的规则,对于打印的量不同的情况会收取不同的费用.例如打印少于 100 张的时候,收取 20 分每张,但是打印不 ...

  2. 系列教程 之 Android开发之旅

    工作室持续推出Android开发系列教程与案例,供广大朋友分享交流技术经验,帮助喜欢Android的朋友们学习进步: 1. Android开发之旅(1) 之 Android 开发环境搭建 代码之间工作 ...

  3. 高并发 Nginx+Lua OpenResty系列（2）——Nginx Lua API

    Nginx Lua API 和一般的Web Server类似,我们需要接收请求.处理并输出响应.而对于请求我们需要获取如请求参数.请求头.Body体等信息:而对于处理就是调用相应的Lua代码即可:输出 ...

  4. 如何有效预防XSS？这几招管用!!!

    原文链接 预防XSS,这几招管用 最近重温了一下「黑客帝国」系列电影,一攻一防实属精彩,生活中我们可能很少有机会触及那么深入的网络安全问题,但工作中请别忽略你身边的精彩 大家应该都听过 XSS (Cr ...

  5. 使用Visual Studio Code进行MicroPython编程

    转载请注明文章来源,更多教程可自助参考docs.tpyboard.com,QQ技术交流群:157816561,公众号:MicroPython玩家汇 Visual Studio Code(以下简称VSC ...

  6. Python调试器-pdb的使用

    [简介] pdb是python自带的一个包,为python程序提供了一种交互的源代码调试功能. [使用方法] 1. 使用命令: python -m pdb xxx.py #可以直接进入单步执行模式 2 ...

  7. tar 命令参数解释

    tar 命令 tar [-cxtzjvfpPN]文件与目录参数说明:-c :建立一个打包文件:-x :解开一个打包文件:-t :查看 tar包里面的文件:(特别注意,在选择参数时,c/x/t仅能存在一 ...

  8. Linux上安装Nginx依赖环境和库、Nginx安装，Nginx服务命令

    安装Nginx依赖环境和库.Nginx安装,Nginx服务命令 因为Nginx官方提供的是C源码,要自己进行编译,所以需要自己拥有编译所依赖的环境和库才可正常编译 安装gcc yum -y insta ...

  9. code forces 1173 C. Nauuo and Cards

    本文链接:https://www.cnblogs.com/blowhail/p/10990833.html Nauuo and Cards 原题链接:http://codeforces.com/con ...

  10. 【Mysql】索引简介

    本文口味:番茄炒蛋,预计阅读:10分钟. 博客又停更了两个月,在这期间,对人生和世界多了许多思考.在人生的不同阶段,会对生活和世界有着不一样的认知,而认知的改变也会直接反应在行为模式之中. 对于生活的 ...