9.盒子模型：
它讲了这样一个事实：在HTML里，在浏览器渲染页面时，所有的元素都是要占据一定空间的，而且这个空间一定是一个矩形的。在我们的浏览器中绝对不出现占据圆形、不规则图形这样空间的元素存在。
简单的来说，我们可以把页面上的所有元素都当做一个盒子看。
盒子由边框（border）、内边距（padding）、内容区（cotent）、外边距（mrgin）
内边距会影响盒子所占的实际空间大小
盒子在浏览器中所占空间大小是由：border、padding、width、height共同作用的。
（1）边框 border 属性
-
border 属性是由3个子属性构成，缺一不可。缺少任何一个子属性，都不能正常显示出边框
-
border 属性的3个子属性 ：style、width、color
-
各个浏览器。对于border-style 的值，渲染出来的样子不是100%相同的。能100%相同的有：solid，double，dashed 如果说有特殊样式的边框，还要求必须100%的呈现效果一致，只能使用图片
-
在同一个盒子里，后出现的边框样式会覆盖先出现的边框样式。我们往往都先写一个合写的总的样式，然后再单独写某个方向上的边框样式，来达到某个方向上特殊的边框样式
-
边框的各个子属性可以给1个值，表示4个方向上的样式都一样
-
给2个值，分别代表的是（上下、左右）
-
给3个值，代表的是（上、左右、下）
-
给4个值，代表的是（上、右、下、左）
-
简单的说就是从上方向开始，顺时针转
（2）内边距 padding 属性
padding 也分着上、右、下、左四个方向
如果给盒子添加背景色，这个背景色会作用于整个盒子，包括padding 部分和 border部分
padding 只有 width 这1个属性，没有style、也没有color
（3）盒子的实际占用空间的大小是由3个属性决定的：border、padding、width
盒子的实际大小=border-width*2+padding*2+width
10.标准文档流：
标准文档流的概念：它不是一个东西，也不是一个物件，它其实是浏览器渲染页面的一个规则：所有的页面元素 ，都要按照它下Html文档中出现的先后次序，依次在浏览器中从左上角开始，从上到下，从左到右的顺序依次显示
标准文档流的几个性质
（1）空白折叠
（2）高低不齐，底端对齐
标准文档流把页面上的元素分为两大类：
（1）块级元素
1.单独的占一行
2.可以设置宽高
3.如果不设置宽度，那么它将默认占满父盒子的宽度
（2）行内元素
1.与其他元素自动并排在一行上
2.不能设置它的宽和高，它的宽和高就是自己内容的宽和高
（3）哪些是块级元素哪些是行内元素？
1.可以自动换行的是块级元素，不能自动换行的是行内元素
2.p标签 块级元素
块级元素都是容器级标签，文本级标签都是行内元素，p标签是个特列，它是文本级标签，但是它是个块级元素
（4）块级元素与行内元素是能够相互转换的
display:block（块）/inline（行内）
现在无法实现即能设置宽高又能让不同的块并排在同一行，原因是标准文档流的性质不允许这么做。
所以，现在如果我们必须把网页的内容以这个形式来显示，就必须打破标准文档流的限制。
打破标准文档流的限制有3种方法：浮动、相对定位、绝对定位
11.浮动float
浮动分为左浮动和右浮动
float:left/right;
浮动带来的特性：
（1）浮动的元素会脱离标准文档流
脱离了标准文档流的元素，就可以设置宽和高，而不用理会它是不是块级元素还是行内元素
（2）浮动的元素会相互贴靠
（3）文字围绕现象
（4）收缩现象
写选择器的时候，我们一般都把这个嵌套关系写足
12.清除浮动
（1）给父盒子添加高度属性（height）
父盒子不能被浮动的子元素撑开高度
添加高度虽然能够清除浮动带来的影响，但是它会对我们的页面产生不好的限制，也就是父盒子下不能自适应内容的多少，所以我们需要找到一种不用添加高，也能清除浮动的方法
（2）给第2个盒子添加属性clear：both；
clear就是清除浮动的意思，clear的值有3个：left,right,both.
这个方法有个后遗症，就是垂直方向上的margin 失效了，原因还是因为父盒子没高度
（3）隔墙法
<1>外墙法
就是在2个互相影响的盒子中间，添加1个div，给它添加样式clear:both:height: 10px;
隔墙法隔开的两个盒子，仍然是没有height的。
<2>内墙法
把墙修在第一个盒子的内部，必须放在最后1个元素
（4）overflow
给内部有浮动的元素的父盒子，添加一个overflow:hidden;属性，就能够清除浮动对其他页面元素带来的影响
overflow:hidden 就是溢出隐藏
使用原子化的类
13.外边距margin
margin也分为4个方向，与padding 相同
<1>盒子居中
margin:0 auto;
使用这个语法水平居中的前提
-
盒子必须有明确的宽度
-
只有标准流中的盒子才能使用margin:0 auto 居中
-
margin:0 auto 是使被修饰的盒子在父盒子的区域内部居中，而不能使盒子内部的文本居中对齐 文本的居中对齐属性：text-align:center
<2>margin 的叠加
-
水平方向上的margin 是叠加的
-
垂直方向上的margin 不叠加：margin的塌陷现象 （就高不就低）
做盒子模型，首先横向在一条直线，纵向在一条垂直线
14.行高line-height
css里实现一个效果，往往有多种手段
盒子里内容很多，想让文字和盒子的边框有间距，有缝隙用padding ,单纯垂直集中用line-height
15.font 属性：由3个小属性组成
font-size
font-family
line-height
语法 font:字号/行高 字体；
一个盒子可以同时设置多个字体，一定要让英文的字体写前边，汉字的字体写后边。
所有的汉字字体都有个对应的英文名字：“Microsoft YaHei”<=> 微软雅黑，“SimSun”<=> 宋体做网页的时候不要用稀奇古怪的字体，所有的字体，都必须是客户端的电脑里有这样的字体才能够按你的意图来展示，所以，如果你想用奇特的字体，只能用图片。
16.背景设置
背景颜色：background-color
background-color:red;
background-color:#336699; #369 #rrggbb
background-color:rgb(225,225,255)
背景图：background-image
如果同时设置了背景图和背景颜色，那么背景颜色就会被背景图盖住
17.精确还原盒子
1.初始化
2.设置宽高
-
width
-
height
-
margin
-
border
-
font
-
padding
-
color
18.超链接样式
伪类：
：link 表示用户没点击过的样式
：visited 表示用户点击过之后的样式
：hover 表示鼠标悬停在超链接之上的样式
：active 表示鼠标点击下去但是不松手的样式
a: link,a:visited 选择器等价于 a
如果你真的要同时设置4个伪类，那么必须按照lvha的顺序来写样式表代码 特例，text-decoration 不能从父盒子继承给a标签
元素浮动以后