1.关于doctype文档
如果浏览器不支持html5，可以添加
2.网页先布局切豆
从大到小，从上往下，从左到右
div占块
3.用css来控制div（css描述html标签样子）
4.因为div总是独占一行，所以要使用浮动，float使它们左右并排。
左右浮动，父级不给高度，父亲的兄弟会上移。
兄弟关系中，如果浮动其他div，普通div会被上面的盖住。（实践证明，父子级也如此）
5.清除浮动clear。
clear：both；clear：left；clear：right；
6.和模型（外边距margin，边border，内边距padding）。
margin：0 0 0 0（上右下左）顺时针来
margin：0 0 （上下，左右）没有的取值对边。
margin：0 0 0 （上，下， 左右）
7.左右浮动，给父级高度，即可显示父级兄弟，不被隐藏。
8.盒模型border：宽border-width 形状（实线，虚线）border-style 颜色border-color
单独设置某个方向的边：border-top：10px solid red；
9. css控制div画三角形
width:0px;height:0px;border-top:50px solid red;border-left:50px solid red;border-right:50px solid pink;border-bottom:50px solid red;10. padding
主要为了控制内在的文字。盒子与文字常用padding。padding与背景，padding会让div变大 。
11. 盒子模型总结
一个盒子有margin，border，padding时，实际占多少空间？
竖直方向：height+padding_top+padding_bottom+border_top+border_bottom+margin_top+margin_bottom。
横向同理。
11. 利用margin让内容居中。
margin：0 auto；
12. margin重叠现象。
相邻的普通元素，上线边距，并非简单的相加，而是取其中较大的边距。
父子div也会发生重叠，不止兄弟。
13. 块状元素与内联元素（文字多大，背景多大，不会因为给高度会宽度而改变）相互转化
内联变块状：display：block；
块状变内联：display：inline；
display：none，div消失不见。
14. css控制锻炼文本。p标签表示一段话。
text-indent:首行缩进
text-align:center；左右居中。
letter-spacing:控制字间距。
15. 文本控制
color：字体颜色； font-style：italic，斜体；font-size；字体大小；font-weight：粗细；line-height，行高；font-family：字体样式。
font：#fff italic bold 23px/46px “宋体”
16. 文字设计技巧
新闻标题：sans-serif（无衬线字体）黑体，微软雅黑
宋体，seift （有衬线字体）
你设置的字体，客户机器上未必有。
font-family：‘黑体’，‘微软雅黑’，sans-serif； 如果没有黑体，微软雅黑，就从系统中选择无衬线字体。
17. 背景图片
background-image：url（small,jpg）;
background-repeat:no-reapeat; （图片不重复）
background-attachment:fixed;（图片固定在浏览器某个位置）
背景图和背景色都设置，显示背景图。
background-position：center center；（水平居中，数值居中）
18. 高级背景图片位置设置
默认情况下div的左上角和背景图的左上角重合。
计算机左上角是原点：0 0。
background-position：x（） y（上为负值，下为正值）
background-position：top right bottom left；
19.css选择器
id选择器,class选择器，标签选择器，派生选择器（标签的上下级关系）
20.css优先级
id>class>标签21.css的四种引入方式
1.）外部链接一个css文件，我们再html头部标明：
2.）头部直接写css： div{ margin:0 10px;}
3.)外部多个css文件时：@import url(my.css);
4.)直接在html标签写入
22.css的初始化
相同的元素，li，在不同的浏览器下，效果不同；是因为，浏览器对各元素的margin，border，font-size等略有不同；为了杜绝这种情况，我们通过css强制让所有元素的属性值都一样，这样浏览器显示就一致，减少了不兼容情况的发生。
可以直接查找：网易，淘宝，腾讯的初始化代码。
23.h标签和p标签
h1-6系列，表示1-6号标题，字越来越小。
p表示段落，在新闻网站中，h与p经常一起出现，新闻标题一般用h表示，而新闻的每一个短内容，适合用p标签
24.img图片标签
特殊的内联标签，可以给宽和高。
可以通过：display：block；
24.有序和无序列表
无序：ul前面可以是小圆点，可以是空心圆，还可以是小方块，一般是用背景图
有序：ol 也可以出现罗马数字
25.整齐的表格tr是行，td是列。
border-collapse：collapse；去除表格之间的间隙。
border-collapse：separate；为默认的值。
border-spacing：20px；是每个单元格的相对距离，相当于margin。
以上属性写在table里。
都在td里写。
表格添加描边
表格描边
.table1{background:#C7D0D7;}
.table1 td{background:#ffffff;}
12345
67890
12345
67890
12345
67890
12345
67890
简单说来就是给整个表格一个背景，然后每一个小格子和其他背景一样，那要小格子和整个table的间隙就变成了描边。
26.伪类
css允许我们针对a标签的四种状态设置各自的css特性，叫做css伪类。
a可以作为锚点，有四种状态，默认，鼠标指上去，鼠标点下去，点击过后
网友评论