1、盒子中的区域

一个盒子中主要的属性有5个：width、height、padding、border、margin。

width：宽度。CSS中width指的是内容的宽度，而不是盒子的宽度。

height：高度。CSS中height指的是盒子的高度，而不是内容的高度。

padding：内边距。（盒子与盒子内部的文本之间）

border：边框。

margin：外边距。（盒子与盒子之间）

图1

2、认识width、height

丈量稿纸，前端工程师就只会丈量内容宽度：

图2

3、认识padding

padding就是内边距。padding的区域有背景颜色，并且背景颜色一定和内容区域相同。也就是说，background将填充所有border以内的区域。

padding有四个方向，所以能够分别描述4个方向的padding。方法有两种，第一种是写小属性；第二种是写综合属性，中间用空格隔开。

·小属性：

上：padding-top：30px；

右：padding-right：30px；

下：padding-bottom：30px；

左：padding-left：30px；

这种属性就是复合属性，比如不写padding-left那么就是没有左内边距。

快捷键：pdt、pdr、pdb、pdl然后按下tab键。

·综合属性

如果写了四个值：

padding：10px 30px 40px 20px;（中间用空格隔开）

则分别表示上、右、下、左。

如果只写了三个值：

padding：10px 30px 20px；（中间用空格隔开）

则依次表示上、右、下，左和右一样。

如果只写了两个值：

padding：10px、20px；

则依次表示上、右，下和上一样，左和右一样。

·小属性层叠大属性：

例如：padding：20px;

           padding-left:30px;

则实际情况如图3：

图3

注：不能把小属性写在大属性前面。

一些元素是默认带有padding的：

比如：ul标签。

为了便于控制，一般会选择清除这个默认的padding。

*{

margin: 0;

padding: 0;

}

*的效率不高，一般采用并集选择器，罗列所有的标签

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

margin:0;

padding:0

}

4、border

border就是边框，有三个要素：粗细、线型、颜色。

颜色如果不写，则默认为黑色。另外领个属性不写，则显示不出边框。

格式：border：1px solid red；

所有线型如图4：

图4

点画线：dotted；

虚线：dashed;

实线：solid；

双实线：double；

border属性是一个大综合属性：（一个border由三个小属性综合而成）

border：1px solid red；

就是把4个方向的边框都设置成1px宽度、线型为实线、红色的。

border有两种拆开方式：

1）按3要素：border-width、border-style、border-color

2）按方向：border-top、border-right、border-bottom、border-left

（按方向还能再拆一层，就是把每个方向再按照3要素拆开，一共十二条语句。如：border-top-width：1px;）

如果某个小属性后面是空格隔开的多个值，那么做从上右下左规则。（同padding）

如：

border-width：10px 20px；（上右下左的线宽）

border-style：solid dashed dotted；（上右下左的线型）

border-color：red pink skyblue；（上右下左的颜色）

在工作中的写法：怎样简单怎样写。border可以没有。

如：border：none；

border某一条边框没有：border-left：none；

或者写成宽度为0

5、标准文档流

宏观来讲，我们的web页面和Photoshop等设计软件有本质区别：web页面的制作是个“流”，必须从上而下。

标准“流”的微观现象：

1）空白折叠现象：

比如，要让img标签之间没有空隙，必须紧密相连：

<img src="images/0.jpg"/><img src="images/1.jpg"/><img src="images/2.jpg"/>

2)高矮不齐，底边对齐：

3）自行换行，一行不满，换行写。

5.1 块级元素和行内元素

标准文档流等级森严。标签分为两种等级：

1）块级元素：

a.霸占一行，不能与其他任何元素并列；

b.能接受宽、高；

c.如果不设置宽度，那么宽度将默认为父亲的100％。

2）行内元素：

a.与其他行内元素并排；

b.不能设置宽、高。默认的宽度，就是文字的宽度。

HTML中将标签分为两类：文本级、容器级。

文本级：p、span、a、b、i、u、em

容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样：

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

所有的容器级标签都是块级元素。

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

块级元素可以设置成行内元素

行内元素可以设置成块级元素

display：display是“显示模式”的意思，用来改变元素的行内、块级性质。

inline：行内；

display：inline；（将div设置成行内元素）

此时这个div不能设置宽度、高度；同时这个div可以和其他标签并排了。

block：块；

display：block；（将span设置成块级元素）

此时这个span能够设置宽高；而且这个span必须独占一行；如果不设置宽度，将占满父亲。

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

1）浮动

2）绝对定位

3）固定定位

6、浮动（float）

浮动的三个性质：浮动的元素脱标、浮动的元素互相贴靠、浮动的元素有“字围”效果。

6.1 浮动的元素脱标

证明1：

图5

证明2：

一个span标签有了float属性后，不需要转化成块级元素，就能够设置宽高了。也就是说设置了float属性后就不再区分行内、块了。

也就是说，一旦一个元素浮动了，那么就能够并排了，并且能够设置宽高，无论它原来是div还是span。

6.2 浮动的元素互相贴靠

如果有足够空间，那么就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。

如果没有足够的空间靠着1号大哥，自己去贴左墙。

图6

6.3 浮动的元素有“字围”效果

HTML：

<div>

<img src="images/1.jepg"/>

</div>

<p>作为一个语文老师，………………………………（很多文字，如图7）我从《我是范雨素》中所看</p>

让div浮动，p不浮动：

CSS：

div{

float:left;

width:800px;

height:530px;

background:pink;

}

p{

background-color:snow;

}

图7

div挡住了p，但是p中的文字不会被挡住，形成“字围”效果。

浮动的性质：脱标、贴边、字围、收缩。

收缩：一个浮动的元素，如果没有设置宽高，name将自动收缩为文字的宽度（这点非常像行内元素）。

比如：

<style type="text/css">

div{

float:left;

background-color:gold;

</style>

显示结果：

图8

整个网页，都是通过浮动来实现并排的。

7、清除浮动

实验：现在有两个div，div身上没有任何的属性。每个div中都有li，这些li是浮动的：

HTML：

图9

CSS：

<style type="text/css">

li{

float:left;

width:100px;

height:50px;

background:aqua;

}

</style>

效果：

图10

我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。原因就是因为li的祖先div没有高度。

如果一个元素要浮动，那么他的父亲一定要有高度

7.1 给浮动的祖先元素加高度

如果一个元素要浮动那么它的祖先一定要有高度。有高度的盒子，才能关住浮动。

如果浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。

HTML：（如图9）

CSS：

div{

height:50px;

}

li{

float:left;

width:100px;

background:aqua;

margin-right:10px;

}

效果：

图10

7.2 清楚浮动方法2：clear：both

网页制作中，高度height很少出现，因为能被内容撑高，也就是说，清除浮动的方法1很少用在工作中。

HTML：

图11

css：

*{

margin:0;

padding:0;

}

li{

float:left;

background:aqua;

width:100px;

}

.box2{

clear:both;

}

效果：

图12

clear：both；

clear就是清除，both指的是左右浮动都要清除。意思就是：清除别人对我的影响。

clear：both；会导致margin失效。

7.3 清除浮动方法3：隔墙法；

图13

也就是在两个div中间加一个div，并设置一定高度，清除第一个div的浮动。

HTML：

图14

CSS：

li{

float:left;

width:120px;

height:40px;

text-align:center;

background-color:orange;

}

.c1{

clear:both;

}

.h10{

height:10px;

}

效果：

图15

一个父亲，是不能被浮动的元素撑出高的。

“内墙法”：

在第一个div里面加两个p标签，并且让两个p标签都浮动，表面上div不能被撑出高。而是在家里修一堵墙。隔开两个div。

7.4 清除浮动方法4：overflow：hidden；

overflow是“溢出”的意思，hidden是“隐藏”的意思。

1、overflow：hidden表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。

图16

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden;那么，父亲就能被儿子撑出高了。这是一个偏方。

div{

width: 400px;

border: 10px solid black;

overflow: hidden;

}

图17

注：应用隔墙法同样可以实现这个效果，让高度随文本变化。

7.5 清除浮动总结与案列

1、加高法：

浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，而且这个盒子有高度，name浮动不会相互影响。但是这个方法要给每个盒子设置高度在工作中太麻烦，而且不能适应页面的快速变化。

图18

2、clear：both；

最简单的清除浮动方法，就是给盒子增加clear：both；表示自己内部的元素不受其他盒子浮动的影响。

这个方法较为简单，但是如果在设置了clear：both；属性的盒子里设置margin将会起不到作用，不能讲两个盒子用间隙隔开。

图19

3、隔墙法

在两个浮动元素之间建一个“墙”（加一个div，并给这个div作clear：both处理再设置高度）隔开两部分，让后面的浮动元素不去追前面的浮动元素。

隔墙法好用，但是第一个div还是没有高度。第一个div不能根据自己里面的内容撑出高度。

图20

内墙法：（如图21）

图21

内墙法的优点是不仅仅能让两个浮动元素之间互不干扰，还能给第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

4、overflow：hidden；

这个属性的本意就是将所有溢出来的内容隐藏起来。

但是，我们发现这个东西能够用于浮动的清除。

我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。

7.6 浏览器兼容问题

上述知识点遇见的浏览器兼容问题

第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大

解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。

height：4px；

-font-size：0px；

我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。

IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。

比如：

-background-color：green；

解决微型盒子，正确写法：

height：10px；

-font-size：0；

第二，IE6不支持用overflow:hidden;来清除浮动的

解决办法，以毒攻毒。追加一条

_zoom:1;

完整写法：

overflow: hidden;

zoom:1;

实际上，_zoom:1;能够触发浏览器hasLayout机制（只有IE6有）。

强调一点，overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。

8、CSS--margin（外边距）

8.1 margin的塌陷现象

标准文本流中，竖直方向的margin不叠加，以较大的为准。

图8-1

如果不在标准本文流中，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：

图8-2

8.2 盒子居中margin：0 auto；

margin的值可以是auto，表示自动。当left、right两个方向都是auto的时候，盒子就居中了：

margin-left：auto；

margin-right：auto；

简写为：margin：0 auto；

这里的0表示margin-top和margin-bottom。

注意：

1）使用margin：0 auto的盒子必须有明确的width；

2）只有标准流的盒子，才能使用margin：0 auto；居中。

3）margin：0 auto；剧中的是盒子，而不是文本。

（文本居中：text-align：center）

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

如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是“行”。所以，父亲整体也掉下来了。

margin这个属性，本质上描述的是兄弟与兄弟之间的距离；最好不要用来表达父子之间的距离。

8.4 关于margin的IE6 兼容性

IE6双倍margin bug

当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。

解决方案：

1）使浮动的方向和margin的方向，相反。

所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。