盒子模型
margin
padding
可以将上面的图片看成一个盒子
红色箭头：
margin: 上右下左
margin-top
margin-right
margin-bottom
margin-left
网页布局可以看成是一块一块组合起来的，那么两个盒子直接间距就是通过这个margin控制的
padding:上右下左
padding-top
padding-right
padding-bottom
padding-left
在盒子里面肯定是有内容的，红色框的线宽度虽然只有2mm这个就是控制盒子跟盒子内部文本距离的
相对定位、绝对定位
盒子参照物是什么这个很重要；
要想将盒子放在页面正中间，那么一定要先给盒子指定一个具体的参照物；
行内元素、块级别元素
div p ul li...都是块级别的元素
span 行内元素
CSS样式的两种方式，第一种就是放在html文件的<head></head>中间
<style type="text/css">
</style>
第二种就是引入.css 文件
<link rel="stylesheet" type="text/css" href="" />
常用的属性跟值
* {
margin: 0;
padding: 0;
}
850px;
宽度
height: 90px;
line-height: 90px;
当高度跟行高后面的值一样的时候，这个时候显示的文本会垂直居中；
background:#fff;
背景颜色
color:red;
字体颜色
font-size:14px;
字体大小
ul{
list-style-type:none;
}
去除列表标签前面的点
text-indent:10px;
text-align:right;
text-align:center;
text-align:left;
盒子里面的文本到底是居中还是具有
display:block;
行内元素转成块元素
display:inline;
块元素转成行内元素
float:right;
float:left;
浮动
为什么要有浮动？
要是你想让亮哥div(块级别元素)放在一行，那么就必须要浮动，块级别的元素默认是霸占一行的，不管它的width是否有整个页面宽
clear:both;
清除浮动
border-top
border-right
border-bottom
border-left
盒子四边的宽度控制，也是能设置是实现还是虚线还有颜色的border-bottom:1px solid red;
text-decoration:none;
超链接下划线去掉
text-decoration:underline;
超链接下划线加上
找元素(html文件就是一个树，你要找到树的那个枝，就需要一步步定位到枝，通过选择器)
这个比较关键
id选择器
class选择器
元素选择器
eg:
#newslist ul li a {
color:#666;
text-decoration:none;
}
就是找到id选择器是：newslist 下面的ul ul下面的li li下面的a标签，这样一级级找
没有好的办法只能慢慢试，熟练之后就知道怎么找了；
下面是一个例子：
新建一个后缀是.html的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML CSS</title>
<style type="text/css">
* {
/*
目的就是去掉所有标签的自身的margin padding默认值
不这么干由于浏览器对各种标签的margin padding默认值不一样调起来相当头疼
*/
margin: 0;
padding: 0;
}
#main {
850px;
/*宽度*/
height: 500px;
/*高度*/
margin: 0 auto;
/*表示的意思是：margin-top:0 margin-bottom:0 左右两边自动*/
border: 1px solid red;
/*给盒子边框 1表示的是边框的宽度，solid是实线，deshed是虚线，后面是边框颜色*/
position: relative;
}
#main div.show {
500px;
height: 300px;
border: 1px solid blue;
position: absolute;
top: 50px;
left: 200px;
}
</style>
</head>
<body>
<div id="main">
<div class="show">
class:show要是想相对定位的话，那么先要给class:show设置一个参照物；
<br /> 设置参照物需要在参照物盒子样式里面加上：position: relative;
<br /> 准备绝对定位的盒子自己样式里面需要加上：position: absolute;
<br />
<br /> 在自己样式里面利用top left bottom right设置要放到什么位置即可
</div>
</div>
</body>
</html>
实际案例：css文件
@CHARSET "UTF-8";
body,h1,h2,h3,p,form,ul,li,dl,dt,dd {
padding:0;
margin:0;
}
body {
960px;
margin:0 auto;
background:#fff;
font-size:12px;
color:#666;
}
ul {
list-style-type:none;
}
h2 {
font-size:12px;
height:26px;
line-height:26px;
text-indent:10px;
color:#360;
background:url(../images/lbg.png);
letter-spacing:1px;
}
#top {
height:26px;
background:url(../images/top_bg.png);
margin:0 0 10px 0;
text-align:right;
}
#top a {
display:inline-block;
padding:5px 10px 0 0;
color:red;
}
#header {
height:80px;
margin:0 0 10px 0;
}
#header h1 {
250px;
height:80px;
background:url(../images/logo.png) no-repeat;
font-size:12px;
float:left;
}
#header h1 a {
height:80px;
display:block;
text-indent:-9999px;
}
#header div.adver {
690px;
height:80px;
float:right;
border:1px solid #ccc;
}
#header div.adver img {
display:block;
border:none;
}
#nav {
height:35px;
background:url(../images/nav_bg.png);
border:1px solid #ccc;
border-bottom:none;
}
#nav ul {
height:35px;
line-height:35px;
font-size:14px;
font-weight:bold;
padding:0 0 0 10px;
}
#nav ul li {
display:inline;
padding:0 10px;
}
#nav ul li a {
color:#369;
text-decoration:none;
}
#nav ul li a:hover {
color:#f60;
}
#search {
height:25px;
margin:0 0 10px 0;
border:1px solid #ccc;
border-top:none;
padding:5px 0 0 5px;
}
#search form {
float:left;
}
#search form select {
background:#fff;
}
#search form input.text {
200px;
height:16px;
background:#fff;
}
#search form input.submit {
45px;
height:22px;
font-size:12px;
cursor:pointer;
}
#search strong {
float:left;
padding:5px 0 0 15px;
}
#search ul {
float:left;
padding:5px 0 0 0;
}
#search ul li {
float:left;
padding:0 8px 0 0;
}
#search ul li a {
color:green;
text-decoration:none;
}
#search ul li a:hover {
color:#f60;
}
#user {
268px;
height:398px;
float:right;
margin:0 0 10px 0;
border:1px solid #ccc;
}
#user form {
position:relative;
}
#user form label {
display:block;
padding:8px 0 5px 12px;
}
#user form label input.text {
180px;
height:20px;
border:1px solid #666;
background:#eee;
}
#user form label input.code {
100px;
}
#user form img {
position:absolute;
top:82px;
left:170px;
}
#user form p {
padding:5px 0;
text-align:center;
}
#user form p input.submit {
45px;
height:20px;
cursor:pointer;
font-size:12px;
}
#user form p a {
color:green;
text-decoration:none;
}
#user form p a:hover {
text-decoration:underline;
}
#user h3 {
font-size:12px;
padding:8px 10px;
}
#user h3 span {
color:#ccc;
}
#user dl {
72px;
float:left;
padding:0 0 0 12px;
}
#user dl dt img {
display:block;
}
#user dl dd {
padding:5px;
text-align:center;
}
#news {
378px;
height:398px;
border:1px solid #ccc;
float:right;
margin:0 10px 10px 0;
padding:0 10px;
}
#news h3 {
text-align:center;
padding:10px;
color:#333;
font-size:16px;
}
#news h3 a {
color:#333;
text-decoration:none;
}
#news h3 a:hover {
text-decoration:underline;
}
#news p {
line-height:150%;
}
#news p a {
color:#333;
text-decoration:none;
}
#news p a:hover {
text-decoration:underline;
}
#news p.link {
color:green;
padding:4px 0;
border-bottom:1px dashed #999;
}
#news p.link a {
color:green;
display:inline-block;
padding:0 0 5px 0;
}
#news ul {
padding:5px 2px 0 2px;
}
#news ul li {
height:24px;
line-height:24px;
background:url(../images/pointer.png) no-repeat left center;
padding:0 0 0 10px;
}
#news ul li em {
float:right;
font-style:normal;
font-family:Tahoma;
}
#news ul li a {
color:#666;
text-decoration:none;
}
#news ul li a:hover {
text-decoration:underline;
}
#pic {
270px;
height:195px;
float:left;
margin:0 0 10px 0;
}
#pic img {
display:block;
border:1px solid #ccc;
}
#rec {
268px;
height:193px;
float:left;
margin:0 0 10px 0;
border:1px solid #ccc;
}
#rec ul {
padding:2px 10px 0 10px;
}
#rec ul li {
height:23px;
line-height:23px;
background:url(../images/pointer.png) no-repeat left center;
padding:0 0 0 10px;
}
#rec ul li em {
float:right;
font-style:normal;
font-family:Tahoma;
}
#rec ul li a {
color:#666;
text-decoration:none;
}
#rec ul li a:hover {
text-decoration:underline;
}
#sidebar-right {
270px;
height:835px;
float:right;
margin:0 0 10px 0;
}
#sidebar-right div.adver {
270px;
height:200px;
margin:0 0 10px 0;
}
#sidebar-right div.adver img {
display:block;
}
#sidebar-right div.hot,#sidebar-right div.comm,#sidebar-right div.vote {
border:1px solid #ccc;
height:200px;
margin:0 0 10px 0;
}
#sidebar-right div.vote {
margin:0;
}
#sidebar-right div.vote h3 {
padding:10px;
text-align:center;
font-size:14px;
color:#369;
border-bottom:1px dashed #ccc;
80%;
margin:5px auto;
}
#sidebar-right div.vote form label {
display:block;
padding:2px 0 2px 20px;
}
#sidebar-right div.vote form p {
text-align:center;
padding:5px;
}
#sidebar-right div.vote form p input {
45px;
height:20px;
margin:0 3px;
cursor:pointer;
font-size:12px;
}
#sidebar-right ul {
padding:3px 10px 0 10px;
}
#sidebar-right ul li {
height:24px;
line-height:24px;
background:url(../images/pointer.png) no-repeat left center;
padding:0 0 0 10px;
}
#sidebar-right ul li em {
float:right;
font-style:normal;
font-family:Tahoma;
}
#sidebar-right ul li a {
color:#666;
text-decoration:none;
}
#sidebar-right ul li a:hover {
text-decoration:underline;
}
#picnews {
678px;
height:198px;
border:1px solid #ccc;
float:left;
margin:0 0 10px 0;
}
#picnews dl {
156px;
float:left;
padding:10px 0 0 11px;
}
#picnews dl dt {
border:1px solid #999;
padding:2px;
}
#picnews dl dt img {
border:none;
display:block;
}
#picnews dl dd {
padding:5px;
text-align:center;
}
#picnews dl dd a {
color:#666;
text-decoration:none;
}
#picnews dl dd a:hover {
text-decoration:underline;
}
#newslist {
680px;
height:625px;
float:left;
margin:0 0 10px 0;
}
#newslist div.list {
49%;
height:306px;
border:1px solid #ccc;
float:left;
}
#newslist div.list h2 a {
float:right;
padding:0 10px 0 0;
}
#newslist div.list h2 a {
color:green;
text-decoration:none;
}
#newslist div.list h2 a:hover {
text-decoration:underline;
}
#newslist ul {
padding:8px 10px 0 10px;
}
#newslist ul li {
height:24px;
line-height:24px;
background:url(../images/arrow.png) no-repeat left center;
padding:0 0 0 10px;
}
#newslist ul li em {
float:right;
font-style:normal;
font-family:Tahoma;
}
#newslist ul li a {
color:#666;
text-decoration:none;
}
#newslist ul li a:hover {
text-decoration:underline;
}
#newslist div.right {
float:right;
}
#newslist div.bottom {
margin:0 0 10px 0;
}
#link {
958px;
height:108px;
border:1px solid #ccc;
float:left;
margin:0 0 10px 0;
}
#link span {
float:right;
font-weight:normal;
padding:0 10px 0 0;
}
#link span a {
color:#360;
text-decoration:none;
}
#link span a:hover {
color:#f60;
}
#link ul {
padding:0 0 0 10px;
height:30px;
line-height:30px;
border-bottom:1px dashed #999;
98%;
margin:0 auto;
}
#link ul li {
display:inline;
padding:5px 5px 0 5px;
}
#link ul li a {
color:#666;
text-decoration:none;
}
#link ul li a:hover {
text-decoration:underline;
}
#link dl {
padding:10px 0 0 8px;
}
#link dl dd {
padding:0 8px;
float:left;
}
#link dl dd img {
border:none;
display:block;
}
#footer {
960px;
height:40px;
float:left;
}
#footer p {
text-align:center;
line-height:150%;
font-family:Tahoma;
color:#333;
}
#footer p span {
color:#06f;
}