前言----- 继续努力
使用css完成首页页面的优化
什么是css？
就是对html进行美化，好比化妆前后的差距。
HTML的块级标签
<div></div>标签：默认独占一行，跟同级兄弟块竖直排列
<span></span>标签：默认同在一行，跟同级兄弟块横向排列
块级标签只有结合css样式才有意义！修饰div标签一般用style属性并使用样式，不赞成用align属性
css的语法格式
最好写在<head></head>标签下
<style type="html/css" rel="stylesheet">
类别选择器{
}
</style>css的类别选择器
元素选择器：span{width:100px; height:50px}
ID选择器：span{width:100px; height:50px}
类选择器：
<span class="ss" id="sq"></span>
<style type="text/css" rel="stylesheet">
<!-- 类选择器-->
.ss{
width:100px;
height:50px;
}
<!-- id选择器-->
#sq{
width:100px;
height:50px;
}
<!-- 元素选择器-->
span{
width:100px;
height:50px;
}
</style>css的其他选择器
属性选择器：
<a href="#" title="aas"></a>
<style type="text/css" rel="stylesheet">
a[title]{ } <!--包含title属性时-->
a[title='aas']{ }<!--属性值等于aas时-->
a[href][title]{ }<!--包含两个属性时-->
a[href][title='aas']{ }<!--包含两个属性,并且一个属性值等于aas-->
</style>后代选择器：如下
子元素选择器：如下
<h1>
This is
<em>儿子</em>
<strong>
<em>孙子</em>
</strong>
</h1>
<style type="text/css" rel="stylesheet">
<!--中间以空格隔开 后代选择器-->
h1 em{color:red;}<!--儿子、孙子全部变红-->
<!--中间以 > 隔开 子元素选择器-->
h1 > em{color:red; }<!--只有儿子变红，孙子没变-->
</style> 伪类选择器：
<style type="css/html">
a:link{color:red;} <!--未访问的链接-->
a:hover{color:#00FF00;} <!--鼠标移动到链接上-->
a:visited{color:#FF00FF;} <!--已访问的链接-->
a:active{color:#0000FF;} <!--选定的链接-->
</style>css的引入
行内嵌入式：
<span style="width:100px; height:50px;"></span>嵌入式：
<html>
<head>
<style type="text/css" rel="stylesheet">
span{
width:100px;
height:50px;
}
</style>
</head>
<body>
<span>哈哈哈</span>
</body>
</html>链接式：
<link href="./css/my.css" rel="stylesheet">导入样式：
<style type="text/css" rel="stylesheet">
@import url(./css/my.css)
</style>样式优先级：遵循就近原则（以修饰的标签为基准）行内样式>id选择器>类选择器>元素选择器
css的块级标签的浮动
属性float：使块级元素脱离文档流进行浮动
（left：向左浮动；right：向右浮动；）
浮动原理：脱离文档流之外，不占用文档流的空间
属性clear：清除浮动
both：两边都不允许浮动
left：左边不允许浮动
right：右边不允许浮动
css属性display
display: none/不显示
display:block/作为块级元素显示，相当于<div>标签，
display:inline-block/作为行内块元素，相当于<span>标签
display:inline/默认，作为内联元素，元素前后没有换行符，没有宽和高的效果
使用div+css进行注册页面的优化
盒模型
margin：外边距（可以为负值）
margin-top：上外边距；margin-bottom：下外边距；margin-left：左外边距；margin-right：右外边距；
margin:10px; 上下左右都是10px
margin:10px 20px 上下10px，左右20px
margin:10px 20px 30px; 上10px，右20px，下30px，左20px
margin:10px 20px 30px 40px; 顺序上右下左
padding：内边距（同上）
border：边框
border-width:边框宽度
border-color:边框颜色
border-style:边框样式（实线solid）
盒模型定位
属性position：定位属性
absolute：绝对定位(top、right、bottom、left),以包含框最外层的包含框为基准进行偏移
relative：相对定位，相对于原来标准流的位置进行定位
fixed：固定定位，以浏览器为窗口进行定位
（盒子在标准流的定位：行内元素水平方向：margin-left+margin-right；块级元素竖直方向：margin-top 和 margin-bottom哪个值大取哪个；盒模型嵌套：子块的margin以父块的内容为参考）