盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。
width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距”
这个盒子width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
宽度和真实占有宽度，不是一个概念！
认识width、height
下面这两个盒子，真实占有宽高，完全相同，都是302*302：
1.box1{
2 width: 100px;
3 height: 100px;
4 padding: 100px;
5 border: 1px solid red;
6 }
7
8 .box2{
9 width: 250px;
10 height: 250px;
11 padding: 25px;
12 border:1px solid red;
}
真实占有宽度= 左border + 左padding + width + 右padding + 右border
加padding 需要减width
认识padding
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。
也就是说，background-color将填充所有boder以内的区域。
padding是4个方向的，所以我们能够分别描述4个方向的padding。
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
小属性：
1padding-top: 30px;
2padding-right: 20px;
3padding-bottom: 40px;
4padding-left: 100px;
top上、right右、bottom下、left左。
这种属性，就是复合属性。比如不写padding-left那么就是没有左内边距。
快捷键就是pdt、pdr、pdb、pdl 然后按tab。
综合属性：
如果写了4个值：
1padding:30px 20px 40px 100px;
上、右、下、左
如果只写3个值：
1padding: 20px 30px 40px;
上、右、下、??和右一样
如果只写2个值：
1padding: 30px 40px;
也就是说，
1padding: 30px 40px;
等价于：
1padding-top: 30px;
2padding-bottom: 30px;
3padding-left: 40px;
4padding-right: 40px;
要懂得，用小属性层叠大属性：
1padding: 20px;
2padding-left: 30px;
下面的写法错误：
1padding-left: 30px;
2padding: 20px;
不能把小属性，写在大属性前面。
一些元素，默认带有padding，比如ul标签。
所以，我们为了做站的时候，便于控制，总是喜欢清除这个默认的padding：
1*{
2 margin: 0;
3 padding: 0;
}
*的效率不高，所以我们使用并集选择器，罗列所有的标签：
1body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
2 margin:0;
3 padding:0
}
border
就是边框。边框有三个要素：粗细、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
border: 1px dashed red;
所有的线型：
比如，border:10px ridge red; 在chrome和firefox、IE中有细微差别：
果公司里面的设计师，处女座的，追求极高的页面还原度，那么不能使用css来制作边框。
就要用到图片，就要切图了。所以，比较稳定的就几个：solid、dashed、dotted
border是一个大综合属性，
border:1px solid red;
就是把4个边框，都设置为1px宽度、线型实线、red颜色。
border属性能够被拆开，有两大种拆开的方式：
1） 按3要素:border-width、border-style、border-color
2） 按方向：border-top、border-right、border-bottom、border-left
按3要素拆开：
1border-width:10px; → 边框宽度
2border-style:solid; → 线型
border-color:red; → 颜色。
等价于：
border:10px solid red;
现在心里要明白，原来一个border是由三个小属性综合而成：
border-width border-style border-color。
如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：
1border-width:10px 20px;
2border-style:solid dashed dotted;
border-color:red green blue yellow;
按方向来拆
1border-top:10px solid red;
2border-right:10px solid red;
3border-bottom:10px solid red;
border-left:10px solid red;
等价于
border:10px solid red;
按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：
1border-top-width:10px;
2border-top-style:solid;
3border-top-color:red;
4border-right-width:10px;
5border-right-style:solid;
6border-right-color:red;
7border-bottom-width:10px;
8border-bottom-style:solid;
9border-bottom-color:red;
10border-left-width:10px;
11border-left-style:solid;
12border-left-color:red;
等价于
···
border:10px solid red;
···
标准文档流
宏观的讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
我们要看看标准流有哪些微观现象：
1） 空白折叠现象：
比如，如果我们想让img标签之间没有空隙，必须紧密连接：
2） 高矮不齐，底边对齐：
3） 自动换行，一行写不满，换行写。
块级元素和行内元素
学习的初期，你就要知道，标准文档流等级森严。标签分为两种等级：
1） 块级元素
● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度，那么宽度将默认变为父亲的100%。
2） 行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。
在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
CSS的分类和上面的很像，就p不一样：
所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。
块级元素和行内元素的相互转换
块级元素可以设置为行内元素
行内元素可以设置为块级元素
1 div{
2 display: inline;
3 background-color: pink;
4 width: 500px;
5 height: 500px;
}
display是“显示模式”的意思，用来改变元素的行内、块级性质
inline就是“行内”。
一旦，给一个标签设置
display: inline;
那么，这个标签将立即变为行内元素。此时它和一个span无异：
● 此时这个div不能设置宽度、高度；
● 此时这个div可以和别人并排了
同样的道理，
1 span{
2 display: block;
3 width: 200px;
4 height: 200px;
5 background-color: pink;
}
“block”是“块”的意思
让标签变为块级元素。此时这个标签，和一个div无异：
● 此时这个span能够设置宽度、高度
● 此时这个span必须霸占一行了，别人无法和他并排
● 如果不设置宽度，将撑满父亲
标准流里面限制非常多，标签的性质恶心。比如，我们现在就要并排、并且就要设置宽高。
所以，移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
1） 浮动
2） 绝对定位
3） 固定定位
浮动
浮动是css里面布局用的最多的属性。
1 .box1{
2 float: left;
3 width: 300px;
4 height: 400px;
5 background-color: yellowgreen;
6 }
7 .box2{
8 float: left;
9 width: 400px;
10 height: 400px;
11 background-color: skyblue;
}
两个元素并排了，并且两个元素都能够设置宽度、高度了（这在刚才的标准流中，不能实现）。
浮动想学好，一定要知道三个性质。
浮动的元素脱标
证明1：
证明2：
一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
1 span{
2 float: left;
3 width: 200px;
4 height: 200px;
5 background-color: orange;
}
浮动的元素互相贴靠
如果有足够空间，那么就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。
如果没有足够的空间靠着1号大哥，自己去贴左墙。
右浮动： float:right;
浮动的元素有“字围”效果
HTML：
1<div>
2 
3 </div>
4 <p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>
让div浮动，p不浮动：
div挡住了p，但是p中的文字不会被挡住，形成“字围”效果。
关于浮动我们要强调一点，浮动这个东西，我们在初期一定要遵循一个原则：
永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。
浮动的性质
浮动的性质：脱标、贴边、字围、收缩。
1 <style type="text/css">
2 div{
3 float: left;
4 background-color: gold;
5 }
</style>
这个div浮动了，且没有设置宽度，那么将自动缩紧为内容的宽度：
整个网页，就是通过浮动，来实现并排的。
浮动的清除
来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。
1 <div>
2 <ul>
3 <li>HTML</li>
4 <li>CSS</li>
5 <li>JS</li>
6 <li>HTML5</li>
7 <li>设计模式</li>
8 </ul>
9 </div>
10
11 <div>
12 <ul>
13 <li>学习方法</li>
14 <li>英语水平</li>
15 <li>面试技巧</li>
16 </ul>
</div>
我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。
第二个div中的li，去贴第一个div中最后一个li的边了。
原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。
清除浮动方法1：给浮动的元素的祖先元素加高度。
如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
清除浮动方法2：clear:both;
网页制作中，高度height很少出现。为什么？因为能被内容撑高！那也就是说，刚才我们讲解的方法1，工作中用的很少。
脑弄大开：能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？
1 <div>
2 <ul>
3 <li>HTML</li>
4 <li>CSS</li>
5 <li>JS</li>
6 <li>HTML5</li>
7 <li>设计模式</li>
8 </ul>
9 </div>
10
11 <div class="box2"> → 这个div写一个clear:both;属性
12 <ul>
13 <li>学习方法</li>
14 <li>英语水平</li>
15 <li>面试技巧</li>
16 </ul>
</div>
clear:both;
clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。
这种方法有一个非常大的、致命的问题，margin失效了。
清除浮动方法3：隔墙法
1<div class="box1">
2 <ul>
3 <li>HTML</li>
4 <li>CSS</li>
5 <li>JS</li>
6 <li>HTML5</li>
7 <li>设计模式</li>
8 </ul>
9 </div>
10
11 <div class="cl h16"></div>
12
13 <div class="box2">
14 <ul>
15 <li>学习方法</li>
16 <li>英语水平</li>
17 <li>面试技巧</li>
18 </ul>
</div>
1.cl{
2 clear: both;
3}
4.h16{
5 height: 16px;
}
近些年，有演化出了“内墙法”：
清除浮动方法4：overflow:hidden;
overflow就是“溢出”的意思， hidden就是“隐藏”的意思。
overflow:hidden;
表示“溢出隐藏”。所有溢出边框的内容，都要隐藏掉。
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。
1 div{
2 width: 400px;
3 border: 10px solid black;
4 overflow: hidden;
}
总结
总结一下：
1） 加高法：
浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。
1<div> → 设置height
2 <p></p>
3 <p></p>
4 <p></p>
5</div>
6
7<div> → 设置height
8 <p></p>
9 <p></p>
10 <p></p>
</div>
- clear:both;法
最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。
1<div>
2 <p></p>
3 <p></p>
4 <p></p>
5</div>
6
7<div> → clear:both;
8 <p></p>
9 <p></p>
10 <p></p>
</div>
浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。
3）隔墙法：
在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
墙用自己的身体当做了间隙。
1<div>
2 <p></p>
3 <p></p>
4 <p></p>
5</div>
6
7<div class="cl h10"></div>
8
9<div>
10 <p></p>
11 <p></p>
12 <p></p>
</div>
我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动的根据自己的儿子，撑出高度，我们就要想一些“小伎俩”，“奇淫技巧”。
内墙法：
1<div>
2 <p></p>
3 <p></p>
4 <p></p>
5 <div class="cl h10"></div>
6</div>
7
8<div>
9 <p></p>
10 <p></p>
11 <p></p>
</div>
内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
4）overflow:hidden;
这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。
并且,overflow:hidden;能够让margin生效。
欢迎关注公共号
网友评论