网页制作之css盒模型基础

一、盒模型概述

在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。

盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。

属性我们可以把它转移到我们日常生活中的盒子（箱子）来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。

二、标准盒模型结构图

三、盒模型属性

border （边框）元素边框

margin （外边距）用于定义页面中元素与元素之间的距离

padding （内边距）用于定义内容与边框之间的距离

content （内容）可以是文字或图片

1、内容区

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。

内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区而言，并不包括padding部分。

当内容信息太多时，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。对于overflow这个属性，我们在后面会详细讲解到。

2、内边距

内边距，指的是内容区和边框之间的空间，可以被看做是内容区的背景区域。

关于内边距的属性有4种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。

3、边框

在CSS盒子模型中，边框跟我们之前学过的边框是一样的。

边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。

其中border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。

“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。

4、外边距

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。

外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。

外边距的属性也有4种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。

5.属性的简写形式：

方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：

* 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性，如padding:20px 30px;/*上下、左右*/；

*如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性，如padding:30px 20px 10px;/*上、左右、下*/；

*如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序，如padding:30px 20px 10px 40px;/*上、右、下、左*/。

课后练习：

Web前端开发-CSS入门干货01 和Web前端开发-CSS入门干货02介绍了CSS重要基础概念选择器和字体系列、文本系列、背景系列样式。

其中字体、文本、背景等样式的设置可以看作是对元素内容的修饰；而网页的布局是对元素和元素之间关系的修饰，其中重要的手段便是距离，从而引出单个元素的盒子模型，以及元素之间的浮动、定位方式。

1.盒子模型

HTML中所有元素都可以看成一个盒子，从内到外包括实际内容（如100x50占据的空间）、内边距（padding）、边框（border）、外边距（margin）四部分，这些盒子的组成都是元素的样式。

内边距是指实际内容到边框的距离（分为上下左右四个分量），外边距是指元素的边框到另一个元素的边框的距离（也分为上下左右四个分量），边框是线（线也是有宽度的）。

（1）盒子模型对于所有浏览器都是通用的吗？

并不是，实际上CSS中的盒子模型（Box model）分为两种：W3C标准盒子模型和IE标准盒子模型。

大多数的浏览器都采用W3C标准盒子模型，然而IE5.5及更早的版本使用的是IE盒模型，IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准，所以如果浏览器使用IE内核但不是兼容模式下的话，该浏览器采用的还有可能是IE标准盒子模型。

（2）W3C标准盒子模型和IE标准盒子模型的区别

W3C标准盒子模型：元素宽度 = width+padding(内边距)+border(边框)+margin(外边距)；

IE标准盒子模型：元素宽度 = width+margin(外边距)，即width=实际内容宽度+padding(内边距)+border(边框)

（3）如何查看当前浏览器采用的是哪种盒子模型呢？

直接新建一个html文件，在body中新建一个div标签，然后设置其样式如下，通过浏览器查看盒子模型参数，便可以确定在该html文档中采用的盒子模型。

div {
      background-color: chocolate;
      width: 100px;
      height: 100px;
      padding: 10px;
       border: 2px solid red;
 }

（4）如何通过设置样式更改盒子模型呢？

在CSS3中提供了box-sizing样式，

1）box-sizing:content-box; 将采用W3C标准的盒子模型

2）box-sizing:border-box; 将采用IE标准的盒子模型

3）box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

（5）对于块级元素和行内元素，盒子模型是否有区别？

对于块级元素盒子模型各项设置都有效，对于行内元素

1）行内元素可以设置padding，但是垂直方向padding无效

2）行内元素可以设置border，但是垂直方向的border无效

3）行内元素可以设置margin，但是垂直方向的margin无效

2.盒子模型中各项样式

（1）内边距（padding）

1）包括四个属性：左内边距、右内边距、上内边距、下内边距；padding-left、padding-right、padding-top、padding-bottom。

2）内边距样式复合式写法

（2）边框（border）

1）包括三个属性：边框宽度、边框样式、边框颜色；border-width、border-style、border-color。

2）边框样式复合式写法，三个属性没有顺序：

border: 1px  solid   red；

3）边框的四条边单独设置样式

上边框（border-top）、下边框（border-bottom）、左边框（border-left）、右边框（border-right）

4）应用例子

在表格边框中，为避免相邻单元格的边框叠加变粗，与整体样式不符，可以利用border-collasps:collasps样式；其可以将单元格相邻边框进行合并，而只显示一个边框的宽度。

（3）外边距（margin）

1）包括四个属性：左外边距、右外边距、上外边距、下外边距；margin-left、margin-right、margin-top、margin-bottom。

2）外边距样式复合式写法同内边距样式复合式写法

3）典型应用

外边距可以让块级元素水平居中，需要满足两个条件：

a）块级元素需要指定宽度；

b）块级元素左右的外边距都设置为auto，其写法：

margin-left:auto;margin-right:auto;或者margin:auto;或者margin: 0 auto;

对于行内元素或者行内块元素，可以为其父元素设置text-align:center样式。

（4）CSS3中新增的样式

以下在IE9及以上版本中有效

1）圆角边框

语法：border-radius:length;

2）盒子阴影

语法：box-shadow:h-shadow v-shadow blur spread color inset;

3）文字阴影

语法：text-shadow:h-shadow v-shadow blur color

要注意的是html所有元素都可以看作盒子，可以用盒子模型进行理解。

#学问分亨官##闪光时刻二期##闪光时刻第二期主题征文#

先开篇之前先提个问题：

为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？

先不要急着往下翻，大家先思考一下。

这个问题的答案，鱼头会在文章中给出，欢迎大家带着这个问题往下翻阅，如果已经知道答案，也可以看看跟大家所知道的答案是否一致。

CSS的逻辑属性

2017年5月18日，W3C的 CSS工作组(CSS Working Group) 发布了 CSS逻辑属性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的书写模式(writing mode)中，可以抽取出共性的抽象概念(如开始位置，或行)，这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式(而不是基于物理坐标、书写方向和维映射等)控制布局的逻辑属性和取值(logical properties and values)。这个模块来源于CSS21中关于逻辑属性和值的特性。

对于前端来说，我们一直习惯于使用top 、 right 、 bottom、 left来定义我们的HTML元素，这跟我们物理上的概念是一致的。但是对于CSS这个原本是为了服务于图文展示才诞生的语言来说，其实是不匹配的，为什么这么说？

writing-mode

writing-mode：定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

writing-mode一共有以下5个改变HTML文本书写规则的值(还有几个是用在SVG上的，本文不予讨论)：

writing-mode: horizontal-tb;

writing-mode: horizontal-tb 定义了内容从左到右水平流动，从上到下垂直流动。下一条水平线位于上一条线下方。

writing-mode: vertical-rl;

writing-mode: vertical-rl 定义了内容从上到下垂直流动，从右到左水平流动。下一条垂直线位于上一行的左侧。

writing-mode: vertical-lr;

writing-mode: vertical-lr定义了内容从上到下垂直流动，从左到右水平流动。下一条垂直线位于上一行的右侧。

writing-mode: sideways-rl; (仅Firefox41+实现)

writing-mode: sideways-rl定义了内容从上到下垂直流动，所有字形，甚至是垂直脚本中的字形，都设置在右侧。

writing-mode: sideways-lr;(仅Firefox41+实现)

writing-mode: sideways-lr内容从上到下垂直流动，所有字形，甚至是垂直脚本中的字形，都设置在左侧。

源码如下：

.wm-htb {
    writing-mode: horizontal-tb;
}
.wm-vrl {
    writing-mode: vertical-rl;
}
.wm-vlr {
    writing-mode: vertical-lr;
}
.wm-srl {
    writing-mode: sideways-rl;
}
.wm-slr {
    writing-mode: sideways-lr;
}
.text-content {
    width: 200px;
    padding: 20px;
    border: 1px solid;
    display: inline-block;
    vertical-align: top;
    padding-right: 100px;
}

<div class="text-content wm-htb">writing-mode: horizontal-tb;</div>
<div class="text-content wm-vrl">writing-mode: vertical-rl;</div>
<div class="text-content wm-vlr">writing-mode: vertical-lr;</div>
<div class="text-content wm-srl">writing-mode: sideways-rl;</div>
<div class="text-content wm-slr">writing-mode: sideways-lr;</div>

图示如下：

从上图可以发现，当我们设置了padding-right: 100px;的时候，不同的书写规则，展示效果是不一样的。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

在最开始的时候，HTML与CSS只服务于英语国家，但是随着互联网的发展，逐渐各个不同书写规则的国家也开始流行了起来。

我们原来的CSS逻辑属性是按照物理逻辑，从上(top)、右(right)、下(bottom)、左(left)划分的。

那么按着这个规则去修改文本属性时，就会出现上述这种不符合语法规则的状态。

大概也是基于这个原因，所以W3C发布了新的逻辑属性与值。

新旧逻辑属性对比

CSS新旧逻辑属性是完全不同的两种模型。

我们首先来看看新旧有的逻辑属性的对比图示：

左旧右新

通过上图可以得知新旧逻辑属性对应关系如下：

旧的逻辑属性新的逻辑属性 margin-top margin-block-start margin-right margin-inline-end margin-bottom margin-block-end margin-left margin-inline-start border-top border-block-start border-right border-inline-end border-bottom border-block-end border-left border-inline-start padding-top padding-block-start padding-right padding-inline-end padding-bottom padding-block-end padding-left padding-inline-start width inline-size height block-size

由上表可以得知，把Y轴方向的属性都改为了block，X轴方向的属性都改为了inline。

对于不同语系的国家，书写顺序会可能有很大的差异，意思就是block跟inline的方向不同。例如：

在英语国家 padding-inline-start = padding-left
在阿拉伯padding-inline-start = padding-right
在日本 padding-inline-start = padding-top

这就意味着旧的逻辑属性，在某些国家里会变得不合常理。

CSS定位

CSS的定位属性变化如下：

旧的逻辑属性新的逻辑属性 top inset-block-start bottom inset-block-end left inset-inline-start right inset-inline-end

例子如下：

/* 旧的逻辑属性 */
.popup{
  position:fixed;  
  top:0;
  bottom:0;
  left:0;
  right:0;
}
/* 新的逻辑属性 */
.popup{
   position:fixed;
   inset-block-start:0;  /*top - in English*/
   inset-block-end:0;    /*bottom - in English*/
   inset-inline-start:0; /*left - in English*/
   inset-inline-end:0;   /*right - in English*/
}
/* 新的逻辑属性支持简写 */
.popup{
   position:fixed;
   inset:0 0 0 0;   /*top, right, bottom, left - in English*/
}

CSS浮动

浮动float的属性也改了。

旧的逻辑属性新的逻辑属性 float: left float: inline-start float: right float: inline-end

text-align

文本text-align的属性也改了。

旧的逻辑属性新的逻辑属性 text-align: left text-align: start text-align: right text-align: end

direction

除了writing-mode，还有一个排版属性就是direction，跟writing-mode类似，不一样的是writing-mode是控住网页布局方向的，而direction是控制文本对齐方向的。属性如下：

direction: ltr;

默认值，让文本和其他元素从左到右显示。

direction: rtl;

让文本和其他元素从右到左显示。

吐槽一下，看到这里的切图仔们，抓紧跑路重构吧，等哪天此属性正式被启用，就真的GG了。不过我想应该会立个属性来选择性开启物理属性还是逻辑属性，不然这对前端来说将会是一场灾难！

CSS的盒子模型

基础盒模型(CSS basic box model)

当浏览器对一个render tree进行渲染时，浏览器的渲染引擎就会根据基础盒模型(CSS basic box model)，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由CSS来决定。

我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来包裹的，这些就是盒子

$$('*').forEach(e => {
  e.style.border = '1px solid';
})

图示如下：

每个盒子都由四个部分组成：

内容(content)

盒子(box) 的内容，显示标签内一切的文本，图案或者别的内容。

内边距(padding)

盒子(box) 内的填充物，样式为透明，主要负责扩展盒子内区域大小。

外边距(margin)

盒子(box) 外部的区域，样式为透明，负责隔离相邻的元素。

边框(border)

盒子(box) 的边界，负责隔离外边距以及内边距。

盒子模型的值

盒子模型一共有三个值：

content-box

content-box为标准的盒子模型。盒子的width跟height只包括盒子本身的width与height属性。

计算法则：

width = width

height = height

border-box

border-box为盒子模型可选的属性之一。盒子的width跟height包括content、padding跟border。这也是当文档处于 Quirks模式时Internet Explorer使用的盒模型。

计算法则：

width = width + border + padding

height = height + border + padding

padding-box

padding-box为非标准属性，曾经在Firefox中实现过，但是在Firefox 50中被删除。padding-box的width和height 属性包括内容和内边距，但是不包括边框和外边距。

图示：

这里吐槽一下，不知道为何没有margin-box，虽然并没有太大意义，当真实现了效果估计也很诡异，但是作为一个强迫症患者晚期，少了一个属性总感觉好不舒服。

视觉格式化模型(visual formatting model)

CSS的视觉格式化模型(visual formatting model) 是根据 基础盒模型(CSS basic box model) 将 文档(doucment) 中的元素转换一个个盒子的实际算法。
官方说法就是：它规定了用户端在媒介中如何处理文档树( document tree )。

每个盒子的布局由以下因素决定：

盒子的尺寸
盒子的类型：行内盒子 (inline)、行内级盒子 (inline-level)、原子行内级盒子 (atomic inline-level)、块盒子 (block)
定位：普通流、浮动、绝对定位
文档树中当前盒子的子元素 或 兄弟元素
视口(viewport) 的尺寸和位置
盒子内部图片的尺寸
其他某些外部因素

视觉格式化模型(visual formatting model) 的计算，都取决于一个矩形的边界，这个矩形，被称作是 包含块( containing block ) 。一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。