HTML与CSS基础-优快云博客

html div css 是写静态网页的

html的编辑工具：任意的编辑工具都可以编写html语言，保存格式.htm .html

专业的编写工具DW

meta 页面信息的描述

http-equiv="Content-Type" 整个页面的内容类型是什么样子的

content="text/html内容是文本编写的网页

charset=utf-8国际标准字符集 gbk国内标准字符集 gb2312 简体中文字符集

常犯的错误：

1、不加doctype，导致低版本ie解析效果不一致；

2、id为数字，id属性值不能用数字；

3、编码不一致：utf-8，文件编码和实际用的编码要一致，另存的时候要选utf-8，保持一致就不会乱码。

Float:漂浮

浮动起来到上一层

父div的高度不会被子div的高度撑起来

清浮动用clear

田字格实例

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box1{width:40px;height:40px;background:red;float:left;}
.box2{width:40px;height:40px;background:green;float:left;}
.box3{width:40px;height:40px;background:pink;clear:both;float:left;}
.box4{width:40px;height:40px;background:yellow;float:left;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

盒模型

如何更好的控制div，把div的一个块当成一个盒子来看

盒子与盒子之间的距离叫margin 外边距

边框叫border

内容与边框的距离叫内边距padding

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用border做的三角形</title>
<style>
.trip{width:0px;height:0px;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid blue;
}
</style>
</head>
<body>
<div class="trip"></div>
</body>
</html>