CSS字体和文本样式
文字样式：
| 样式代码 | 文字样式 |
|---|---|
| font-family | 文字字体 |
| font-size | 文字大小 |
| color | 文字颜色 |
| font-weight | 文字粗细 |
| font-style | 文字样式 |
注意：
1）文字字体一般设置多个，中间用逗号隔开(英文字符),若含有中文字体名，用引号括起来。当网页进行解析时，会按顺序寻找，找到哪个用哪个，找不到就用浏览器默认字体。如：font-family:字体1,字体2,字体3···
2）绝对大小
（1）不设置字体大小时，默认为浏览器的默认值，一般为16px。字体大小单位除了百分比和px，还需要记住的几个：
| 字体单位 | 含义 |
|---|---|
| in | Inch英寸，1英寸=2.54cm |
| cm | 厘米，1cm=0.394英寸 |
| mm | 毫米，1mm=0.1cm |
| pt | 磅，印刷的点数，72磅=1英寸 |
| pc | pica，1pc=12pt |
（2）相对大小
em：相对于父元素的大小进行倍数的更改。
rem：相对于网页根元素的字体大小进行倍数的更改。
3）字体颜色属性值有很多种表达方式：
color：颜色名; color:red;
color：#六位十六进制数; color:#fab123;
color：rgb(a,b,c); color:rgb(255,255,0);
color：rgba(a,b,c,d); color:rgba(255,255,3,0.7);
其中abc分别为0~255之间的数字，而rgba中的d为透明度。十六进制数中不区分大小写。
文本样式
文本对齐方式：
1、text-align:元素水平对齐方式。left，right，center，justify分别为靠左靠右靠中间以及两端对齐。
该设置方式只对块级元素起作用。
2、vertical-align：设置元素垂直方式。baseline，top，bottom，middle等分别为基线对齐，顶端对齐，底端对齐，中线对齐。
该设置方式只对行元素和单元格元素起作用。
p{width:50%;margin:0 auto;} //文字居于网页中间举例
//单行文字水平居中
<style>
.warp{height:400px;width:100%;border:1px solid red;line-height:400px;text-align:center;} //文本在本行正中间显示要将行高与本行高度设置相同，一般浏览器有默认行高，为1.2em
</style>
//多行文字水平居中
<style>
.wrap{height:400px;width:100%;border:1px solid blue;display:table;}
.content{vertical-align:middle;display:table-cell;}
</style>
<body>
<div class="wrap">
<div class="content">
<h1>Welcome to my home!</h1>
<h2>兜兜家</h2>
</div>
</div>
</body>
行级元素和块级元素
块级元素：独占一行，主要有：<p>,<div>,<h1>~<h6>,<ul>,<ol>,<li>,<dl>,<dd>,<dt>。块状元素的width，height，margin，padding都有效。text-align只对其起作用。
行内元素：又叫内联元素，在一行显示，一行填满才进入下一行，主要有：<span>,<a>,<img>,<input>。内联元素的width和height属性无效，水平方向上的margin和padding有效，垂直方向上的margin和padding无效。vertical-align只对其起作用。
display属性：
1、display:none; //隐藏元素
2、display：inline；//将元素显示为内联元素
3、display：block；//将元素显示为块元素
4、display：inline-block；//将元素显示为行内块元素，呈现为内联元素，但具有块元素的属性。
<head>
<style>
.hidden{display:none;}
a:hover .hidden{display:inline;} //当鼠标悬停在链接上时，隐藏的字体出现。
</style>
</head>
<body>
<div>
<a href="#">百度<p class="hidden">百度一下</p></a>
</div>
</body>
元素在进行行块级元素转换时，默认有间隙，可通过设置父元素font-size=0；此时，子元素文字消失，给子元素文字单独设置大小即可。
伪类：
作用：主要用于向某类选择器添加特殊的效果。
语法：选择器：伪类{添加的样式}。伪类名对大小写不敏感。
伪类的种类：
1、链接伪类：
| 伪类 | 作用 |
|---|---|
| link | 未被访问状态 |
| hover | 鼠标悬停状态 |
| active | 激活状态 |
| visited | 已访问状态 |
这四种状态最为常用，它们具有优先级顺序：
按照：link—hover—active—visited顺序才能完全执行。
例子：
//通过此链接可实现空链接的四种状态变化的呈现
<head>
<style type="text/css">
a:link{color:red;}
a:hover{color:green;}
a:active{color:blue;}
a:visited{color:yellow;}
</style>
</head>
<body>
<a href="#">空链接</a>
</body>
伪类还可以与css中的选择器结合起来：
<head>
<style type="text/css">
a.love:hover{color:red;} //当鼠标悬停在两个链接上时，只有我爱中国发生了颜色变化
</style>
</head>
<body>
<a class="love" href="#">我爱中国</a>
<a href="#">亲爱的母亲</a>
</body>
2、first-child伪类
这种伪类主要用于选择元素的第一个子元素。
这里用例子来说明：
//匹配父元素中的第一个子元素
<head>
<style>
body{font-size:16px;} //给网页中所有的文字设置大小为16px
div:first-child{font-size:30px;} //匹配第一个div中的所有元素，设置字体大小为30px；
div p:first-child{color:pink;} //匹配所有div中p中的第一个子元素，设置字体为粉红色；
div:first-child p{font-family:宋体;} //匹配第一个div中所有的p元素，设置字体为宋体
</style>
</head>
<body>
<div>
<p>从前有座山</p>
<p>山上有祖庙</p>
<p>庙里有个老和尚</p>
<span>还有一个小和尚</span>
</div>
<div>
<p>我是第二个div的第一个p</p>
<p>我是第二个div的第二个p</p>
</div>
</body>
其他还有多种伪类，这里不一一列举。
css浮动属性
float浮动属性：
其值主要有：right右浮动，left左浮动，none不操作，inherit继承。其浮动排列顺序按照代码书写顺序。
利用浮动属性可以实现文本环绕效果，给行内元素加浮动属性，默认其为块元素。浮动后元素依旧占据应占的文本空间。
塌陷问题：
当父元素在浮动的情况下，宽高属性为auto时，因为无法检测其长宽而导致父元素无法定位大小，高度消失。而其临近元素会发生异位的情况。
塌陷解决方法：
1）手动给父元素添加高度；
2）通过clear清除内部和外部浮动；clear：none/both；
3）给父元素设置overflow：hidden；属性，隐藏超出部分；
4）给父元素设置内间距。
元素定位
元素的定位主要用网页布局上。
| position属性值 | 功能 |
|---|---|
| static | 默认 |
| relative | 相对定位，属性值有：left,top,bottom,right |
| absolute | 绝对定位，属性值有：left,top,bottom,right |
| fixed | 固定定位，属性值有：left,top,bottom,right |
| inherit | 继承 ,只继承形式，不继承数据 |
相对定位是相对于网页整体的左上角而言的。
绝对定位是相对与窗口定位的与网页总高度无关，若让绝对元素相对与父元素定位，元素就会在父元素内部上下左右移动及分层。
元素分层
利用z-index可设置元素叠加顺序，但这依赖于定位属性。
z-index越大，层级越高，越会覆盖层级低的元素，若其值为auto则不参与层级比较，为负值会被普通流的元素覆盖。且z-index的子元素会继承父元素的层级关系。
盒子模型
盒子模型的结构
在这里可以借用一下老师的图：
盒子模型从外到内分别为：margin外边距，border边框，padding内边距，以及中间的元素。
中间元素
具有高和宽属性以及其他块级元素和替换元素属性。
边框
1、边框宽度：border-width：thin/medium/thick/长度值（px/em）
2、边框颜色：border-color：颜色/transparent（透明色）
3、边框样式：border-style：none无/dotted点状/dashed虚线/double双实线等。还可以通过border-left/right/bottom/top设置不同方向边框。
外边距
可以分别设置不同方向的外边距，默认情况下都有外边距，margin的值若为auto，会实现水平方向的居中显示效果。当相邻的元素都设置外边距，外边距会发生合并，合并后外边距高度取决于外边距高度最大值。
内边距
也可以分别设置不同方向的内边距。
padding：值1 值2；设置上下为值1，左右为值2
padding：值1 值2 值3；设置上为值1，左右为值2，下为值2
padding：值1, 值2 值3 值4；设置上为值1，右为值2，下为值3，左为值4；
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
