一、网页布局的几种情况

今天让我们总结一下在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. js 全国城市3级联动

    js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ ...

  2. C#操作iframe

    <iframe id="cl" name="clf" src="xianshi.aspx" runat="server&qu ...

  3. HTML&CSS基础学习笔记1.9-添加图片

    <img>标签是用来添加图片的~ <img>标签的使用方法:<img src="图片的地址"> 先来看段实例代码: <!DOCTYPE h ...

  4. 读取Excel文件内容在Web上显示

    点击事件代码.cs protected void Button1_Click(object sender, EventArgs e) { string strPath = "d:/test. ...

  5. C语言---return(我的工程笔记本)

    迷惑了一天  函数就是输出有问题,进入函数设置密码的时候,当我保存密码准备返回,问题就在此时诞生了,界面是主界面,但功能函数还是没反应,设置序列号初始值的原来按键却还是有反应,莫名其妙,莫名其妙... ...

  6. JavaWeb学习笔记--跳转方法小结

    服务端跳转:1. RequestDispatcher.forward()  public void doGet(HttpServletRequest request, HttpServletRespo ...

  7. 数据挖掘-Python基本模块

    1.numpy:基础模块,高效处理数据.提供数组支持 2.pandas:数据探索和数据分析 3.matplotlib:数据成图模块,解决数据可视化 4.scipy:支持数值计算,支持矩阵运算,提供高等 ...

  8. 减少芯片失效:芯片焊接(die Attach)工艺优化

    在器件的生产过程中,芯片焊接是封装过程中的重点控制工序.此工艺的目的是将芯片通过融化的合金焊料粘结在引线框架上,使芯片的集电极与引线框架的散热片形成良好的欧姆接触和散热通路.由于固体表面的复杂性和粘结 ...

  9. WCF的基本知识-仅Http绑定的认知

    有关WCF,这3个字母代表的含义,鄙人不会在此细说.喜欢或者不喜欢的,大家勿喷. 入正题,微软从设计.net框架开始,就一直着力于解决程序间的互通信问题.从古老的套接字(Socket)通信到后来的Re ...

  10. windows CMD.exe下写路径太长的解决方案

    1.直接找到文件拖进cmd里,路径就出来了. 2.在文件目录的空白处,按住shift键,再点击右键,就出来再此处打开命令行窗口了. 相关CMD.exe的加强项目: https://github.com ...