前端入门（CSS下半部分）

块状元素有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<table>、<address>、<blockquote> 、<form>，每个块状元素都从新的一行开始，并且其后的元素也另起一行，其高度、宽度、行高以及顶和底边距都可设置，默认宽度为它本身父容器的100%，设置display:block就是将元素显示为块状元素

行内元素有<a>、<span>、<br>、<em>、<strong>、<label>、<q>、<code>，每个行内元素都和其他元素都在一行上，其高度、宽度及顶部和底部边距不可设置，其宽度就是它包含的文字或图片的宽度，不可改变，设置display:inline就是将元素显示为内联元素

内联块状元素<img>、<input>，每个内联块状元素都和其他元素都在一行上，其高度、宽度、行高以及顶和底边距都可设置，设置display:inline-block就是将元素显示为内联块状元素

盒子模型：边框border可设置属性粗细border-width，样式border-style，颜色border-color，允许只为一个方向的边框进行设置，使用top，right，bottom，left

盒子的宽度为margin+border+padding+width

 

CSS布局模型有流动模型（Flow）、浮动模型 (Float)、层模型（Layer）

Flow是默认的网页布局模式，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%，内联元素都会在所处的包含元素内从左到右水平分布显示

在CSS中设置Float属性就可以使元素浮动

层模型有三种形式，即绝对定位(position: absolute)、相对定位(position: relative)和固定定位(position: fixed)

绝对定位将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位

相对定位过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，偏移前的位置保留不动

固定定位与绝对定位类型类似，但它的相对与视图（屏幕内的网页窗口）本身进行定位，不会随浏览器窗口的滚动条滚动而变化

relative与absolute组合使用可以相对于其它元素进行定位，规范是1-参照定位的元素必须是相对定位元素的前辈元素，参照定位的元素必须加入position:relative，定位元素加入position:absolute

颜色值有英文命令颜色color:red、RGB颜色color:rgb(133,45,200)、十六进制颜色color:#00ffff

长度值有像素、em即给定字体的font-size值、百分比

 

行内元素水平居中通过父元素设置text-align:center

定宽块状元素水平居中通过设置左右margin值为auto

不定宽块状元素水平居中有三种方法，1-加入table标签，利用table标签的长度自适应性，然后再利用定宽块状居中设置margin的方法，2-改变元素的display为inline类型，然后使用 text-align:center来实现居中效果，3-通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中

父元素高度确定的单行文本垂直居中，通过设置父元素的height和line-height高度一致来实现

父元素高度确定的多行文本垂直居中有两种方法，1-加入table标签，设置 vertical-align:middle，td标签默认情况已经这样设置，2-在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性

当为元素设置position:absolute或float:left或float:right时元素的display显示类型就会自动变为display:inline-block，