HTML和CSS总结(一）
初识HTML
html的骨架结构
- html标签：网页的整体
- head标签：网页的头部
- body标签：网页的身体
- title标签 ：网页标题
<html>
<head>
<title>网页标题</title>
<head>
<body>
网页的主体内容
</body>
</html>
HTML的标签
排版标签
h1~h6标题标签
p段落标签 、 ul li 无序列表 、div标签 、
水平线标签
视频标签
<video src="./video.mp4" controls></video>
视频属性
src:视频路径
controls:视频控件
autoplay:自动播放
loop: 循环播放
浮动 Float
为什么需要浮动？
可以制作网页布局，可以改变网页元素默认样式。
让多个块级元素一行排列
浮动的特性：
- 脱离文档流
- 浮动的盒子不再保留原先位置
- 多个盒子都设置浮动可以一行排列
- 方便CSS布局制作网页、
清除浮动：
-
父盒子有高度不需要清除浮动；清除浮动后，父级会根据浮动的子盒子自动 检测高度，父级有了高度，则不会一项项下面的标准流了。
-
父级添加overflow属性
给父级添加overflow属性，将其属性值设置为hidden、auto或scroll 【缺点：无法显示溢出部分 】
-
父级添加after伪元素
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*IE6、7专有*/
*zoom: 1;
}
- 父级添加双伪元素
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
盒子模型
盒子模型是有四部分组成：content（内容）、margin（外边距）、border（边框）、padding（内边距）。
居中实现方式
margin：0 auto; 水平居中。text-align:center;文本水平居中，line-height:1;垂直居中
文字样式
font样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体</title>
<style>
h1{
/*字体大小为18px*/
font-size:18px;
/* 字体颜色为red */
color:red;
/* 字体粗细 */
font-weight: 700;
/* 字体类型 */
font-family: '宋体';
/* 字体样式为 */
}
</style>
</head>
<body>
<h1>我的HTML知识点</h1>
</body>
</html>
元素显示模式
块级元素（block）、
display:block;
行内元素(inline)
display:inline;
行内块元素 (inline-block)
display:inline-block;
定位
相对定位
position: absolute;
绝对定位
position: relative;
固定定位
position:filx;
浮动
float：left;
float:right;
