盒模型

在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。

盒模型示意图

盒模型的属性

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

 

如果让你做一个宽高402*402的盒子，您如何来设计呢？

答案有上万种。

盒模型的计算

如果一个盒子设置了padding，border，width，height，margin(咱们先不要设置margin，margin有坑，后面课程会讲解)

 

盒子的真实宽度=width+2*padding+2*border

盒子的真实宽度=height+2*padding+2*border

 

那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。

另外如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。

Padding

padding：就是内边距的意思，它是边框到内容之间的距离

另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域

Padding的设置

padding有四个方向，分别描述4个方向的padding。

描述的方法有两种

1、写小属性,分别设置不同方向的padding

padding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px;

2、写综合属性，用空格隔开

/*上 右 下 左*/padding: 20px 30px 40px 50px ;/*上 左右  下*/padding: 20px 30px 40px;/* 上下 左右*/padding: 20px 30px;            /*上下左右*/padding: 20px;

 

一些标签默认有padding

比如ul标签，有默认的padding-left值。

那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{  padding:0;  margin:0;    }

But，这种方法效率不高。

所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）

border

border:边框的意思，描述盒子的边框

边框有三个要素： 粗细 线性样式 颜色

border: solid

如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

按照3要素来写border

border-width: 3px;border-style: solid;border-color: red;/*border-width: 5px 10px;border-style: solid dotted double dashed;border-color: red green yellow;*/

按照方向划分

border-top-width: 10px;border-top-color: red;border-top-style: solid;border-right-width: 10px;border-right-color: red;border-right-style: solid;border-bottom-width: 10px;border-bottom-color: red;border-bottom-style: solid;border-left-width: 10px;border-left-color: red;border-left-style:solid;

上面12条语句，相当于 bordr: 10px solid red;

另外还可以这样：

border-top: 10px solid red;border-right: 10px solid red;border-bottom: 10px solid red;border-left: 10pxb solid red;

 

border:none；

border：0；

表示border没有设置样式。

 

使用border制作小三角

/*小三角 箭头指向下方*/        div{            width: 0;            height: 0;            border-bottom: 20px solid red;            border-left: 20px solid transparent;            border-right: 20px solid transparent;        }

 

margin

margin：外边距的意思。表示边框到最近盒子的距离。

/*表示四个方向的外边距离为20px*/margin: 20px;/*表示盒子向下移动了30px*/margin-top: 30px;/*表示盒子向右移动了50px*/margin-left: 50px;margin-bottom: 100px;

margin塌陷问题

我们来看一个例子：

html结构：

css样式:

*{            padding: 0;            margin: 0;        }        .father{            width: 400px;            overflow: hidden;            border: 1px solid gray;        }        .box1{            width: 300px;            height: 200px;            background-color: red;            margin-bottom: 20px;}        .box2{            width: 400px;            height: 300px;            background-color: green;            margin-top: 50px;        }

当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。

当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。

margin：0 auto

div{            width: 780px;            height: 50px;            background-color: red;            /*水平居中盒子*/            margin: 0px auto;                        /*水平居中文字*/            text-align: center;        }

当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？

设置margin-left:auto；我们发现盒子尽可能大的右边有很大的距离，没有什么意义。当设置margin-right:auto；我们发现盒子尽可能大的左边有很大的距离。当两条语句并存的时候，我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。

 

另外如何给盒子设置浮动，那么margin:0 auto失效。

 

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子 才能使用margin:0 auto; 

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

 

另外大家一定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系

善于使用父亲的padding，而不是margin

如果让大家实现如图的效果，应该有不少的同学做不出来。

那么我们来看看这个案例，它的坑在哪里？

下面这个代码应该是大家都会去写的代码。

*{            padding: 0;            margin: 0;        }        .father{            width: 300px;            height: 300px;            background-color: blue;        }        .xiongda{            width: 100px;            height: 100px;            background-color: orange;                        margin-top: 30px;        }

 

 

因为父亲没有border，那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了，一旦给父亲一个border发现就好了。

那么问题来了，我们不可能在页面中无缘无故的去给盒子加一个border，所以此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。

 

标准文档流

什么是标准文档流

宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画

标准文档流下 有哪些微观现象？

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

2.高矮不齐,底边对齐

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

3.自动换行,一行写不满,换行写

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

 

 块级元素和行内元素

学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：

• 行内元素
• 块级元素

行内元素和块级元素的区别：（非常重要）

行内元素：

• 与其他行内元素并排；
• 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

• 霸占一行，不能与其他任何元素并列；
• 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

块级元素和行内元素的分类：

在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。

从HTML的角度来讲，标签分为：

• 文本级标签：p、span、a、b、i、u、em。
• 容器级标签：div、h系列、li、dt、dd。

　　PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

 

现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

• 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。

• 块级元素：所有的容器级标签都是块级元素，还有p标签。

块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

• 此时这个div不能设置宽度、高度；
• 此时这个div可以和别人并排了

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

• 此时这个span能够设置宽度、高度
• 此时这个span必须霸占一行了，别人无法和他并排
• 如果不设置宽度，将撑满父亲

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

• （1）浮动
• （2）绝对定位
• （3）固定定位