关于html与css

复习一下之前学的html与css

1.html的基本格式

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link rel="stylesheet" type="text/css" href=""/>//与css进行关联
    </head>
    <body>

    </body>
</html>

这里用的是css外部引用的方式，也是我们平常最常用的方式。网页的基本样式都是放在body之间

2.html里面一些常用的标签

标签分为行级标签和块级标签。

块级标签：div h1~h6 ol ul p table form等等

行级标签：a span br small strong img等等（其中img标签比较特殊，虽然是行级标签，但是可以设置宽高）

3.css

（1）css选择器：通配选择器，标签选择器，类选择器，id选择器，层级选择器，群组选择器。

（2）css的三种引用方式

1.<style>标签引入：在</head>上面添加<style>.....</style>
2.标签内部引入方式（行间样式）<div style="....">....</div>
3.外部引用：<link rel="stylesheet" type="text/css" href=""/>

（3）对position的认识

position有三种类型：

relative 相对定位：对标签没有属性改变。设置left,right,top,bottom方向可以偏移位置。有z-index来提高级别，默认后面标签元素覆盖前面元素。

absolute 绝对定位：对标签有属性改变。float无效，有清除浮动的效果。内容撑开宽度，高度。有z-index层级样式。margin:0 auto；无效。默认后面标签元素覆盖前面元素。以父级标签设置relative或者absolute属性后为方向起点。没有父级设置，以body左上角为方向起点。

fixed 固定定位：和绝对定位相似，也改变元素属性。方向固定后，以浏览器窗口为起点定位，不会因为页面滚动而改变位置。

(4)浮动布局

float:left;往左浮动                  float:right;往右浮动

那么怎么清除浮动呢？这里有三种方法

1.给浮动元素的父级添加内容高度
2.给浮动元素的父级添加overflow:hidden;必备条件是有宽度或者高度，需要设置宽或高。但是有高度的话，就不需要设置overflow:hidden了。
3.在浮动元素的下方，同级关系的标签元素设置clear:left/right/both;需要添加额外标签来清除浮动。

(5)标签的一些默认值

1.body:默认margin为8px；

2.div:默认继承父级的宽度，没有高度；

3.ol,ul,dl:默认有margin,padding,list-style-type;

4.h1~h6:默认有margin:top;和margin:bottom;

5.p:默认padding;

6.a:有默认颜色，text-decoration,内容撑开高度；

7.table:表格标签，默认display:table;

(6)lovehate法则

link:当前锚点没有访问过时的状态

visited:访问过后的样式

hover:鼠标悬浮在a标签上的样式

active:鼠标点击未松开的样式

(7)对表格标签的一些理解

1.border-collapse:collapse;合并表格边框。

border-collapse:separate;默认值，不合并表格边框。

2.设置表格内字的位置：vertical-aline:top;/middle;/bottom;上中下。注意：不可以设置像素

text-aline:left/center/right;左中右

div层垂直居中

第一种方法：

position:absolute;
top:50%;
margin-top:-xxpx;//xx为div高度的一半;

第二种方法：

display:table-cell;//把元素变成表格行级
vertical:middle;

哈哈