行和块分类
行内标签（行内元素）[span、label、i、a等]一般用于组织文本内容
特点：共享一行，不支持宽高，宽高由内容决定。
块级标签（块级元素）[div、p、h、table、tr、ul、ol、li]
一般用于组织布局
特点：独占一行，不能和其他标签在一行显示，支持宽高。
行内块级标签（行内块级元素）[id、img、input、selec、button]
特点：元素可以同行显示，支持宽高。
相互转化
通过display属性进行相互转化
display:block //转为块标签
display:inline-block //转为行内块级元素
display:inline //转为行内元素
display:none //隐藏元素，元素会从页面中消失，页面重绘
设置行级元素垂直方向的对齐方式（middle 中线对齐）
vartical-align:middle;
取消无序列表小圆点
list-style:none;
calc函数，可以在css中进行数学运算，注意，运算符前后必须有空格
background-position:calc( 50% - 250px ) 0px;
字体使用
设置字体的样式（设置多种字体样式，中间使用逗号隔开）font-family:"宋体";
设置字体大小、字号；数字越大，字号越大
font-size:14px;
设置字体粗细（取值100~900 数字越大，加粗效果越好；bold加粗，bolder更粗；lighter更细；normal正常）
font-weight:bolder;
设置字体风格（italic斜体，oblique倾斜）
font-style:oblique;
字体引用
@font-face可以引入字体文件，一个@font-face只能引入一种字体文件。@font-face {
//给字体文件取名
font-family:xxx;
//连接字体文件路径
src:url(font/xxx.ttf1);
}
字体图标
字体是以图标形式显示，设计师在设计字体时，字体形状就是图标。字体的相关样式都可作用在字体图标。
页面中引入字体图标的css文件，通过不同的class名作用不同的图标或样式。
超链接(给a标签添加样式)
向未被访问过的连接添加样式a:link { }
向访问过的超链接添加样式
a:visited { }
鼠标移入超链接时添加的样式
a:hover { }
:hover必须放在:link和:visited之后
鼠标点击不放时添加的样式
a:active { }
:active必须放在:hover之后
顺序口诀：L-V-H-A
列表样式
设置列表项标志类型（none无）可进行无序、有序的自动转换
li {
list-style-type:upper-roman;
}
设置列表项标志的显示位置（outside默认值，标志在li外面；inside在li内容里面；）
list-style-position:inside;
设置列表项标志图像（不常用，图片的尺寸css代码无法控制，只能更改图片大小）
list-style-image:url(...);
表格样式
更改表格的样式border-spacing:设置单元格之间的间距；
border-collapse:设置表格的边框合并为一;
link和@import
这两种方式都可以引入css文件，本质上link为整个网页服务，@import是css服务。link引入
<link rel="stylesheeet" href="css/style.css">
@import引入
@import url(css/style.css);
link和@import的区别
(1)link是一种标签，@import是一种语法;
(2)link不仅仅可以引入css文件，还可以引入其他文件格式；@import只能引入css样式；
(3)加载时间：link是随着页面的加载而加载；@import等页面加载完成之后再加载；
(4)兼容问题：link的兼容性比@import好；
(5)link可以被js控制，@import不能被js控制
标准盒模型
构成：(1)content：代表内容区域，存放内容，文本或者里面图片等等；
(2)padding：内边距，盒子内部的空间，内容与边框之间的间距，相当于快递中的泡沫；
(3)border：盒子的边框，四周边框可以分别设置；
(4)margin：代表外边距，盒子和盒子之间的间距。（父子关系、兄弟关系）
边框border
设置边框，必须设置两个值：宽度和类型，默认显示黑色设置边框的宽度
border-方位-width:10px;
设置边框的类型（solid实线，dotted点线，double双边线，dashed虚线）
border-方位-style:solid;
设置一条边边框的样式（宽度、类型、颜色）
border-方位:10px dotted red;
复合属性：同时设置四条边的样式：宽度、类型、颜色
注意：
(1)边框必须设置两个值：宽度和类型，默认黑色；
(2)边框可以撑大盒子;
(3)边框渲染原理：只设置一条边框时，显示为矩形，如果设置相邻的边，相接部分会沿对角线均分。
(4)通过边框可绘制三角形，设置三边透明，一边不透明;
transparent：设置透明的颜色
步骤：设置一个width:0px的盒子;
分别设置三边透明，一边不透明。
内边距padding
设置盒子中内容到边框的距离分别设置四周的内边距
padding-left：30px；
padding-right：30px；
padding-top：30px；
padding-bottom：30px；
复合属性（设置一个值：代表四周同时设置内边距；设置两个值：代表上下或左右；设置三个值：代表上、左右、下；设置四个值：代表上、右、下、左）
padding:30px;
padding会撑大盒子，背景颜色会铺设padding区域
应用场景：可作为导航左右间距。
外边距margin
盒子与盒子之间的距离，外边距margin重叠性
盒子和盒子之间是兄弟关系，再垂直方向会发生重叠，以其中最大值为准。
注意：margin在水平方向是叠加的。
margin-top传递性
盒子和盒子之间是父子关系，子元素设置margin-top会传递给父元素。
原因：子元素设置margin-top后找不到父元素的边界就传递给了父元素。
解决方案：
(1)给父元素设置border：1px solid transparent；会更改盒子的大小。
(2)给父元素设置padding，也会改变盒子大小；
(3)给父元素设置overflow：hidden；借助BFC容器的特点，容器里的元素如何排列不会影响容器外的元素。
标准盒子的大小的计算
标准盒子真正大小的计算
css中设置的width和height分别代表内容区域（content）的大小。宽度=content（width）+ padding * 2（左右）+ border * 2 （左右）
高度=content（height）+ padding * 2 （上下）+ border * 2 （上下）
标准盒子所占空间的大小计算：
宽度=content（width）+ padding * 2（左右）+ border * 2 （左右）+ margin * 2 （左右）
高度=content（height）+ padding * 2 （上下）+ border * 2 （上下）+ margin * 2 （上下）
怪异盒子（IE盒模型）
width和height包含了content和padding和border，目前主流浏览器默认都是标准盒子模型。可以通过box-sizing来转换盒模型。
content-box:标准盒模型
border-box:怪异盒模型
IE盒真正的大小计算
宽度=width（包含了content+padding+border）高度=height（包含了content+padding+border）
IE盒所占空间的大小计算
宽度=width（包含了content+padding+border）+ margin * 2 （左右）高度=height（包含了content+padding+border）+ margin * 2 （上下）
IE盒拓展
width设置百分比和不设置设置百分比：参考父元素的宽度，设置content内容区域的宽度，添加border+padding会更改盒子的大小，添加margin会改变盒子所占空间的大小。
默认不设置：相当于auto，代表动态获取到父元素内容区域宽度，包含了border+padding+margin。
margin:0 auto;
上下外边距为0；左右为auto，代表自适应，将剩余空间均分左右两侧，可以设置盒子水平居中。
