最近根据项目需要，由游戏前端转成了web前端，特别的学习了一下前端的知识，整理了一下CSS基础知识，希望能帮助更多程序员入门。
文字排版
字体设置：font-family
字体颜色：color
字体字号：font-size
粗 体：font-weight:bold
斜 体：font-style:italic
下 划 线：text-decoration:underline
删 除 线：text-decoration:line-through
段落排版
文字缩进：text-indent
行间距（行高）：line-height
中文字间隔、字母间隔：letter-spacing
单词间隔：word-spacing
对 齐：text-align
元素分类
在CSS中，HTML的标签元素大致分为三种类型：
块状元素：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
可以使用（display:inline使其具有内联元素特点）
可以使用（display:inline-block使其具有内联块状元素特点）
特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素（又叫行内元素）：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
可以使用（display:block使其具有块状元素特点）
可以使用（display:inline-block使其具有内联块状元素特点）
特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素：
<img>、<input>
特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型
边框粗细：border-width
边框样式：border-style
（样式：dashed 虚线|dotted 点线|solid 实线）
边框颜色：border-color
布局模型
1.流动模型（Flow）
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
2.浮动模型（Float）
3.层模型（Layer）
1)绝对定位（position:absolute）
2)相对定位（position:relative）
3)固定定位（position:fixed）
CSS样式设置
水平居中设置
行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。
定宽块状元素
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
不定宽块状元素
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
方法一：加入table标签
说明：利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
方法二：设置display: inline方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
方法三：设置position:relative和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
垂直居中设置
父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
父元素高度确定的多行文本、图片
方法一：使用插入table(包括tbody、tr、td)标签，同时设置vertical-align：middle。
方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
网友评论