目录
一、盒子模型
1. 盒子模型简介
2. 边框及其复合样式
3. 内边距及其复合样式
4. 内边距及其复合样式
5. 外边距(大块包小块)
二、CSS浮动
1.CSS浮动简介
2.浮动样式
3.浮动的特点
4.解决高度坍塌的办法
三、CSS定位
1.CSS定位介绍
2.relative 相对定位
3.absolute 绝对定位
4.fixed 固定定位
5.定位层级
四、重叠样式
一、盒子模型
1.盒子模型简介
所有的HTML元素可以看做盒子,在CSS中,“box model”这一术语是用来设计和布局时使用。
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,由外边距(margin),边框(border),内边距(padding)和内容(context)四部分组成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
#box1{width: 150px;height: 200px;border:5px solid #cc847a; }
#box2{width: 100px;height: 150px;border:1px solid gray;background-color: pink }
/*
边框(border)
内边距(padding):边框与内容之间的距离(父级边框与子级的距离也称之内边距)
外边距(margin):块与块之间的距离(子级与父级边框的距离也称之外边距)
内容(context:)
盒子的大小:边框+内边距+内容(文字、标签)
*/
</style>
</head>
<body>
<div id="box1">
<!-- 内容-->
<div id="box2">
</div>
</div>
</body>
</html>
2.边框及其复合样式
边框样式包括:
复合样式(border),边框颜色(border),边框宽度(border-width),边框样式(border-style),左边框(border-left),右边框(border-right),上边框(border-top)和下边框(border-bottom)。
其中边框的样式有:solid(实线),dashed(虚线),dotted(点线)和double(双实线)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框(border) 、复合样式</title>
<style>
/*html{border: 1px solid green;}*/
body{height: 600px;
/*复合样式书写边框
边框的样式:solid(实线),dashed(虚线) dotted(点线) double(双实线)
*/
border: 1px double green;
}
div{width: 400px;height: 400px;
/*边框单个拆分书写*/
/*边框的厚度*/
/*border-width: 3px; !*只写厚度不展示任何边框样式*!*/
/*边框样式*/
/*border-style:solid ; !*默认继承字体颜色*!*/
/*边框颜色*/
/*border-color: orange;*/
/*边框弧度*/
/*左上角顺时针一直到左下角设置弧度*/
/*border-radius: 50%;*/
/*左上角和右下角,右上角和左下角*/
/*border-radius: 25px 15px;*/
/*左上角 、右上角和左下角、右下角*/
/*border-radius: 35px 15px 5px;*/
/*左上角顺时针一直到左下角设置弧度*/
/*border-radiu