一、网页布局的几种情况
今天让我们总结一下在css布局的各种情况做一个总结，为我们以后布局网页时做一个参考。
先看一张图，这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的：
如图所示，css布局可以分为以下几大块：
- 盒子内部的布局
- 文本的布局
- 盒模型本身的布局
- 盒子之间的布局visual formatting
- 脱离正常流normal flow的盒子的布局
- absolute布局上下文下的布局
- float布局上下文下的布局
- 正常流normal flow下的盒子的布局
- BFC布局上下文下的布局
- IFC布局上下文下的布局
- FFC布局上下文下的布局
- table布局上下文下的布局
- css grid布局上下文下的布局
- 脱离正常流normal flow的盒子的布局
二、盒模型（Box moudle）
1、基本框
css假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心都有一个内容区(content area)。这个内容区周围有可选的内边距（padding）、边框（border）、外边距（margin）。这就是css中的盒模型。
2、包含块
每个元素都相对于其包含块摆放，可以这么说，包含块就是一个元素的“布局上下文”。
包含块由最近的块级祖先元素、表单元格或行内块祖先元素的内容边界（content edge）构成。考虑下面的代码：
<body>
<div class="father">
<p class="son">This is paragraph</p>
</div>
</body>
在这个例子中p的包含块是div元素，因为div是p元素最近的块级祖先元素，类似的，div的包含块是body。所以，p的布局依赖div的布局，而div的布局依赖body的布局。
三、块级元素与行级元素的对比
块级元素的解析
块级元素特点
默认情况下，块级元素会在其框前和框后产生“换行”，并尽可能的充满整个容器。
元素的水平格式化
水平格式化的7大属性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。
这7个属性值加起来往往是包含块width值。
负外边距
在盒模型中，内边距、边框、和内容宽度（及高度）不能为负值，只有外边距可以为负值。利用定位以及负margin可以设置盒子在页面中的居中。
<div class="box" style="width: 100px; height: 100px; position: absolute; left: 50%; top: 50%;
margin-left: -50px; margin-top:-50px;background:red;" ></div>
元素的垂直格式化
类似于水平格式化，垂直格式化的7个相关属性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，这7个属性的总和必须等于父级元素的height属性。
其中margin-top，margin-bottom和height可以设置成auto;
一个正常流中的块元素的margin-top和margin-bottom设置为auto后，会被设置为0，即不能将元素垂直居中，实际上元素没有外边距。定位元素如果设置成auto有不同的处理结果。
如果正常流元素的height设置为auto，则其高度将会被设置为其内容元素的高度总和
垂直外边距合并
垂直外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
css代码：
div{
width: 200px; height: 200px; background: red; }
.box1{
margin-bottom: 100px;
}
.box2{
margin-top:50px;
}
html代码
设置值为auto
其中margin-left，width，margin-right可以设置为auto。当设置margin-left与margin-right的值为auto而width的值为特定值时，会使盒子水平居中。
当设置三个值都为auto时，浏览器会将margin-left与margin-right设置为0，而将width会尽可能的宽。而当设置三个值为固定值时，按css术语来讲，这些格式化属性过分受限，此时总会把margin-right强制为auto；
行级元素的解析
行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间，只能包含数据和其他行内元素。行级元素不能设置宽高，不能设置上下margin、和padding
行内元素会生成一个内容区，类似于块级元素的content部分，内容区的大小与字体的大小相等。内容区加上文字的上下边距就等于行内框的高度，可以通过设置line-height的高度控制行内框的高度。行框是包含该行中行内框最高点和最低点的最小框。如下图
替换元素
在行级元素中替换元素是一个例外，他既可以设置宽高，也可以设置margin和padding,它类似于inline-block。
行级元素与块级元素的嵌套关系
- 行级元素嵌套行级元素
- 块级元素嵌套块级元素，块级元素内嵌套行级元素。
- 少数块级级元素不能嵌套块级元素例如：p不能嵌套div标签,标题标签中最好不要嵌套div。
css布局详解（一）——盒模型的更多相关文章
-
css布局详解（二）——标准流布局（Nomal flow）
css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在 ...
-
弹性盒布局详解(display: flex;)
弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...
-
【转载】图说C++对象模型：对象内存布局详解
原文: 图说C++对象模型:对象内存布局详解 正文 回到顶部 0.前言 文章较长,而且内容相对来说比较枯燥,希望对C++对象的内存布局.虚表指针.虚基类指针等有深入了解的朋友可以慢慢看.本文的结论都在 ...
-
Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
-
Android开发重点难点1：RelativeLayout(相对布局)详解
前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出“重点难点”系列, ...
-
【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序（进程的虚拟存储器映像布局详解）
[翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .
-
Android布局详解之一：FrameLayout
原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...
-
CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
-
css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
随机推荐
-
iis中MIME类型的介绍与使用
今天在服务器上碰到由.mp3格式转化生成的.m4r格式不能被浏览器访问(MP3与m4r在同个域名目录下eg:www.abc.com/1.m4r) 解决办法: 1.选中文件所在的站点: 2.找到MIME ...
-
python2编码总结（转）
以下依次列出python2常遇到的几个问题及讲解. # -*- coding:utf-8 -*- python2默认以ASCII编码,但是在实际编码过程中,我们会用到很多中文,为了不使包含中文的程序报 ...
-
JS排序算法
1.冒泡排序 冒泡算法是比较相邻的两项,如果前者比后者大,就交换他们. 假设一共有n项,那么一共需要n-1趟,第一趟需要交换n-1次,但是第一趟结束后,最后一项基本确定就是最大项了,所以第二次需要交换 ...
-
Treap-平衡树学习笔记
平衡树-Treap学习笔记 最近刚学了Treap 发现这种数据结构真的是--妙啊妙啊~~ 咳咳.... 所以发一发博客,也是为了加深蒟蒻自己的理解 顺便帮助一下各位小伙伴们 切入正题 Treap的结构 ...
-
css3新特性合集
转自:https://www.cnblogs.com/xiaoxie2016/p/5964694.html (若原作者对此转载有疑问,联系删除,谢谢!) animation IE10 anima ...
-
react children
children react 中,属性名是一一对应的,除了children. 对于一个组件来说,其this.props.children拿到的是什么呢???举个
-
java学习之路--面试之多线程基础
Java多线程面试问题1. 进程和线程之间有什么不同?一个进程是一个独立(self contained)的运行环境,它可以被看作一个程序或者一个应用.而线程是在进程中执行的一个任务.Java运行环境是 ...
-
Porsche PIWIS III with V37.250.020 Piwis 3 Software Update New Feature
Porsche Piwis tester 3 PT3G VCI with V37.250.020 Piwis 3 Software unlimited license installed on Ful ...
-
Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) B. Code obfuscation 水题
B. Code obfuscation 题目连接: http://codeforces.com/contest/765/problem/B Description Kostya likes Codef ...
-
P1710 地铁涨价
题目背景 本题开O2优化,请注意常数 题目描述 博艾市除了有海底高铁连接*.*与日本,市区里也有很成熟的轨道交通系统.我们可以认为博艾地铁系统是一个无向连通图.博艾有N个地铁站,同时有M小段地 ...