CSS分类：
CSS代码插入的形式可以分为三种：分别是内联式，嵌入式，外部式。
<p style="color:red">直接写入标签内部，就做内联式
span{
color:red;
}
</style>````
把代码写在head里的style标签里面，就叫做嵌入式
`<link href="base.css" rel="stylesheet" type="text/css" />
`这种方式叫做外联式，也叫外部式
选择器
选择器的种类有有：标签选择器，类选择器，ID选择器，子选择器，包含选择器，通用选择器，伪类选择符，分组选择符。
其中比较值得注意的是子选择器和包含选择器的区别
子选择器的作用：用于选择指定标签元素的第一代子元素 .food>li
包含选择器的作用： 用于选择指定标签元素下的后辈元素 .food li
通用选择器 *
伪类选择器 a:hover{color:red;}
分组选择器 h1,span{color:red;}
CSS权重
当同一个标签设置了多个不同样式的时候，要看那个样式生效，这个时候是通过权值来判断的。如果权值一样，那么是通过顺序来判断，处于最后面的css样式会被应用。另外!important的权重是最高的，一般要写在分号前面。
CSS设置字体
CSS设置的字体一般要为比较常用的字体，因为用户看到字体的样式取决于用户本地电脑是否安装了你设置的字体
body{font-family:"Microsoft Yahei";} 或者
body{font-family:"微软雅黑";}
但是第一种比第二种的兼容性更好一些。
实现粗体，很多人为了实现粗体样式都会使用h1-h6或strong标签，这样是不好的，CSS有单独实现粗体的方式。
p span{font-weight:bold;}
缩进样式
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
p{text-indent:2em;}
段落排版--中文字间距、字母间距
letter-spacing:50px; 字母间距
word-spacing:50px; 单词间距
段落排版--对齐
text-align 这个只能对块状元素使用
text-align:center;
元素分类:
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素.
常用的块状元素有：
`<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>`
常用的内联元素有：
`<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>`
常用的内联块状元素有：
`<img>、<input>`
使内联元素转化为块状元素的方法：
a{display:block;}
使块状元素转化为内联元素的方法：
div{display:inline;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变
内联块状元素：
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型：
内边距:padding
外边距:margin
边框:border
块状标签都具备盒子模型的特征
CSS布局模型
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
流动布局两句话概括：块状元素从上到下分布，内联元素从左到右分布
浮动模型（Float）
设置浮动后可以是块状元素水平排列
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
层模型--绝对定位(position: absolute)
对于其最接近的一个具有定位属性的父元素进行绝对定位。如果没有这样的父属性，就居于body来绝对定位。
层模型--相对定位(position: relative)
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动。
> 需要注意的点: 虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。简单来说，就是相对定位之后，不会影响其他元素的排列。如下图显示：
层模型--固定定位(position: fixed)
表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身
Relative与Absolute组合使用
这个方法才是最常用的方法，将父盒子设置为(position: relative)，需要定位的盒子设置为(position: absolute)，可以实现相对于父盒子的绝对定位
1、如果top、right、bottom、left的值相同，可简写为下面代码：
margin:10px;
2、如果top和bottom值相同、left和 right的值相同，可简写为下面代码：
margin:10px 20px;
3、如果left和right的值相同，可简写为下面代码：
margin:10px 20px 30px;
>需要注意的点：
top和bottom的值相同,left和right的值不相同，这种方式是没有简写的。
颜色值缩写：
p{color:#000000;}缩写为p{color: #000;}
p{color: #336699;}缩写为p{color: #369;}
字体缩写：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
缩写为
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
CSS中的长度值：
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;} 可以实现段落首行缩进 24px，也就是2个字体大小。
>值得注意的点是：当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
水平居中显示：
1.如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的
2.当被设置元素为块状元素
当被设置元素为块状元素时，用text-align：center就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
如果是宽度固定的块状元素，用以下代码可以实现水平居中：
width: xpx; margin:xpx auto;
如果不定宽块状元素方法，比如分页，分页是不确定的，所以不能设置宽度。这种情况有三种方式解决：
1.加入 table 标签
2.设置 display;inline 方法
3.设置 position:relative 和 left:50%;
第一种方法如下：
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）
第二种方法如下（个人比较喜欢这种方式）：
改变块级元素的 display 为 inline 类型，然后对其父元素使用 text-align:center 来实现居中效果
第三种方法如下：
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
垂直居中：
父元素高度确定的单行文本的垂直居中的方法是通过设置父元素的height和line-height高度一致来实现。
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。
css代码：
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
>当行内元素设置了以下2个属性元素，元素就会从行内元素变为内联块状元素display:inline-block
position : absolute
float : left 或 float:right
比如a标签，设置了上面2个属性中的任何一个，就隐形变成内联块状元素了，也就可以设置宽度了。
网友评论