一、网页布局的几种情况

今天让我们总结一下在css布局的各种情况做一个总结,为我们以后布局网页时做一个参考。

先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的:

如图所示,css布局可以分为以下几大块:

  • 盒子内部的布局

    • 文本的布局
    • 盒模型本身的布局
  • 盒子之间的布局visual formatting
    • 脱离正常流normal flow的盒子的布局

      • absolute布局上下文下的布局
      • float布局上下文下的布局
    • 正常流normal flow下的盒子的布局
      • BFC布局上下文下的布局
      • IFC布局上下文下的布局
      • FFC布局上下文下的布局
      • table布局上下文下的布局
      • css grid布局上下文下的布局

二、盒模型(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-topborder-toppadding-topheightpadding-bottomborder-bottommargin-bottom,这7个属性的总和必须等于父级元素的height属性。

其中margin-topmargin-bottomheight可以设置成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的高度控制行内框的高度。行框是包含该行中行内框最高点和最低点的最小框。如下图

替换元素

在行级元素中替换元素是一个例外,他既可以设置宽高,也可以设置marginpadding,它类似于inline-block

行级元素与块级元素的嵌套关系

  • 行级元素嵌套行级元素
  • 块级元素嵌套块级元素,块级元素内嵌套行级元素。
  • 少数块级级元素不能嵌套块级元素例如:p不能嵌套div标签,标题标签中最好不要嵌套div。

css布局详解(一)——盒模型的更多相关文章

  1. css布局详解(二)——标准流布局(Nomal flow)

    css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在 ...

  2. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

  3. 【转载】图说C++对象模型:对象内存布局详解

    原文: 图说C++对象模型:对象内存布局详解 正文 回到顶部 0.前言 文章较长,而且内容相对来说比较枯燥,希望对C++对象的内存布局.虚表指针.虚基类指针等有深入了解的朋友可以慢慢看.本文的结论都在 ...

  4. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  5. Android开发重点难点1:RelativeLayout(相对布局)详解

    前言 啦啦啦~博主又推出了一个新的系列啦~ 之前的Android开发系列主要以完成实验的过程为主,经常会综合许多知识来写,所以难免会有知识点的交杂,给人一种混乱的感觉. 所以博主推出“重点难点”系列, ...

  6. 【翻译】Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解)

    [翻译]Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解) . . .

  7. Android布局详解之一:FrameLayout

      原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6702273 FrameLayout是最简单的布局了.所有放在布局里的 ...

  8. CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  9. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

随机推荐

  1. (转)Newtonsoft.Json序列化和反序列

    这里下载:http://www.newtonsoft.com/products/json/安装:   1.解压下载文件,得到Newtonsoft.Json.dll   2.在项目中添加引用.. 序列化 ...

  2. RDD 重新分区,排序 repartitionAndSortWithinPartitions

    需求:将rdd数据中相同班级的学生分到一个partition中,并根据分数降序排序. 此实例用到的repartitionAndSortWithinPartitions是Spark官网推荐的一个算子,官 ...

  3. C#多线程实践——锁和线程安全

    锁实现互斥的访问,用于确保在同一时刻只有一个线程可以进入特殊的代码片段,考虑下面的类: class ThreadUnsafe { static int val1, val2; static void ...

  4. C#System.Net.Mail采用简单邮件传输协议发送邮件

    引用: using System.Net.Mail; public class EmailHelper { public static bool SendEmail(string title, str ...

  5. 在Silverlight中打开网页的几种方法

    HtmlPage.PopupWindow HtmlPopupWindowOptions option = new HtmlPopupWindowOptions(); option.Directorie ...

  6. polya定理小结

    polya的精髓就在与对循环节的寻找,其中常遇到的问题就是项链染色类问题. 当项链旋转时有n种置换,循环节的个数分别是gcd(n, i); 当项链翻转时有n种置换,其中当项链珠子数位奇数时,循环节的个 ...

  7. Centos6.5使用yum安装MariaDB

    系统版本:Linux localhost.localdomain 2.6.32-431.el6.x86_64 #1 SMP Fri Nov 22 03:15:09 UTC 2013 x86_64 x8 ...

  8. 关于升级到win10后的网络问题

    最近我的alienware电脑从win7升级到win10,看到很多网友都有一个问题,那就是网络受限了, 基本看了很多百度到的,方法基本都不是很有用,我看到了一个网友的办法完美解决了我机器上的网络问题, ...

  9. Jquery 网站保存信息提示消息实现,提示后自动消失

    现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用alert提示消息,采用jQuery提示完消息,自动消失 css <style> #tip_message { z-in ...

  10. Apache配置rewrite

    最近将代码做了迁移,更换了web服务器,从原来的Nginx,换成使用Apache,多少有些区别.这里整理一下在apache下实现rewrite功能. 第一部分:修改apache配置文件支持rewrit ...