css入门系列
1，文字属性：
CSS文字属性 属性 说明 font-family 字体类型 font-size 字体大小 font-weight 字体粗细 font-style 字体斜体 color 颜色
2，段落属性：
CSS段落属性 属性 说明 text-decoration 下划线、删除线、顶划线 text-transform 文本大小写 font-varient 将英文文本转换为“小型”大写字母 text-indent 段落首行缩进 text-align 文本水平对齐方式 line-height 行高 letter-spacing 字距 word-spacing 词距
3，图片水平对齐text-align
在“文本水平对齐text-align”这一节我们详细讲解了text-align属性。
大家请记住，text-align一般只用在两个地方：
文本水平对齐和图片水平对齐。
也就是说，text-align只对文本和img标签有效，对其他标签无效。
<head>
<title>图片水平对齐</title>
<style type="text/css">
div
{
width:300px;
height:80px;
border:1px solid gray;
}
.div_img1{text-align:left;}
.div_img2{text-align:center;}
.div_img3{text-align:right;}
img{width:60px;height:60px;}
</style>
</head>
<body>
<div class="div_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
<div class="div_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
<div class="div_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
</body>
</html>
4，图片垂直对齐vertical-align属性来定义图片的垂直对齐方式。
行级元素设置和块级元素设置该属性是有差别的：
vertical-align属性取值 说明
top 顶部对齐
middle 中部对齐
baseline 基线对齐
bottom 底部对齐
4.1，在行级元素特性：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>vertical-align属性</title> <style type="text/css"> img{width:80px;height:80px;} #img_1{vertical-align:top;} #img_2{vertical-align:middle;} #img_3{vertical-align:bottom;} #img_4{vertical-align:baseline;} </style> </head> <body> 绿叶学习网<img id="img_1" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网（<strong>top</strong>） <hr/> 绿叶学习网<img id="img_2" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网（<strong>middle</strong>） <hr/> 绿叶学习网<img id="img_3" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网（<strong>bottom</strong>） <hr/> 绿叶学习网<img id="img_4" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>绿叶学习网（<strong>baseline</strong>） </body> </html>
4.2，在块级元素中（没有效果）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>vertical-align属性</title> <style type="text/css"> div { width:100px; height:80px; border:1px solid gray; } .div_img1{vertical-align:top;} .div_img2{vertical-align:middle;} .div_img3{vertical-align:bottom;} img{width:60px;height:60px;} </style> </head> <body> <div class="div_img1"> <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/> </div> <div class="div_img2"> <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/> </div> <div class="div_img3"> <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/> </div> </body> </html>
总结：
图片没有按照预期的进行垂直对齐？啊，
其实大家误解了vertical-align属性了，
vertical-align属性定义是：
vertical-align属性定义行内元素相对于该元素的垂直对齐方式。
5，文档流
正常文档流：块级元素单独占一行，行级元素尽量排一行
正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右地依次排列元素。
块级元素会自动拉长成一行。
行级元素设置width,height无效。
6，浮动float
浮动元素会生成一个块级框，而不论它本身是何种元素。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS浮动float属性</title> <style type="text/css"> /*定义父元素样式*/ #father { width:400px; background-color:#0C6A9D; border:1px solid silver; } /*定义子元素样式*/ #father div { padding:10px; margin:15px; border:2px dashed red; background-color:#FCD568; } /*定义文本样式*/ #father p { margin:15px; border:2px dashed red; background-color:#FCD568; } #son1 { /*这里设置son1的浮动方式*/ } #son2 { /*这里设置son2的浮动方式*/ } #son3 { /*这里设置son3的浮动方式*/ } </style> </head> <body> <div id="father"> <div id="son1">box1</div> <div id="son2">box2</div> <div id="son3">box3</div> <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，</p> </div> </body> </html>
成为浮动元素，原块元素不在占一行，长度而是由其内容决定。
6.1，设置一个元素浮动
由于box1设置为左浮动，box1变成了浮动元素，
因此此时box1的宽度不再延伸，
其宽度为容纳内容的最小宽度，
而相邻的下一个div元素（box2）就会紧贴着box1，
这是由于浮动引起的效果。
6.2，设置2个元素浮动
由于box2变成了浮动元素，
因此box2也跟box1一样，宽度不再延伸，而是由内容确定宽度。
并且相邻的下一个div元素（box3）变成紧贴着浮动的box2。
为什么这个时候box1和box2之间有一定的距离呢？
其实原因是这样的：
我们在CSS中设置了box1、box2和box3都有一定的外边距（margin:15px;），
如果box1为浮动元素，而相邻的box2不是浮动元素，则box2就会紧贴着box1；
但是如果box1和box2同时为浮动元素，外边距就会生效。
这是由于浮动元素的特性决定的。
ps：同为浮动元素边距才会有效。
6.3，设置三个浮动元素
由于box3变成了浮动元素，因此box3跟box2和box1一样，宽度不再延伸，
而是由内容确定宽度，并且相邻的下一个p元素（box3）变成紧贴着浮动的box3。
由于box1、box2和box3都是浮动元素，box1、box2和box3之间的margin属性生效。
6.4，box3浮动方向改变
7.清除浮动clear
清除浮动都是在设置左浮动或者右浮动之后的元素内设置。
使用clear属性清除浮动，我们比较少使用“clear:left;”或者“clear:right;”来判断是清除左浮动，还是清除右浮动。
我们往往直截了当地使用“clear:both;”来把所有浮动清除，还省事。
也就是说，我们在这一节只要学会“clear:both;”这一个属性就足够啦。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS清除浮动</title> <style type="text/css"> /*定义父元素样式*/ #father { width:400px; background-color:#0C6A9D; border:1px solid silver; } /*定义子元素样式*/ #father div { padding:10px; margin:15px; border:2px dashed red; background-color:#FCD568; } /*定义文本样式*/ #father p { margin:15px; border:2px dashed red; background-color:#FCD568; } #son1 { /*这里设置son1的浮动方式*/ float:left; } #son2 { /*这里设置son2的浮动方式*/ float:left; } #son3 { /*这里设置son3的浮动方式*/ float:right; } </style> </head> <body> <div id="father"> <div id="son1">box1</div> <div id="son2">box2</div> <div id="son3">box3</div> <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，</p> </div> </body> </html>
p{clear:both;}
由于p元素清除了浮动，
所以p元素的前一个元素产生的浮动就不会对后续元素产生影响，
因此p元素的文本不会环绕在浮动元素的周围。
除了使用clear属性来清除浮动，还可以采用“overflow:hidden;”来清除浮动
8,定位布局
浮动布局比较灵活，但是不容易控制。
而定位布局的出现，使得用户精准定位页面中的任意元素成为可能，使得网页布局变得更加随心所欲。
当然由于定位布局缺乏灵活性，也给空间大小和位置不确定的版面布局带来困惑。
浙公网安备 33010602011771号