高度塌陷:
父元素高度由子元素撑起,给子元素设置浮动,父元素发生高度塌陷
解决方案:
1.给父元素设置高度
2.给父元素清除浮动 使用伪元素清除浮动
::after{
display:block;
content:"";
clear:both;
}
3.在父元素最后设置一个空的一个标签 给空标签清浮动
外边距合并:
1.兄弟元素外边距合并
原因:一个兄弟设置上外边距,另一个兄弟设置了下外边距
解决:1.只给其中一个兄弟元素设置外边距
2.给下方兄弟元素开启BFC 设置一个display:inline-block
3.给其中一个兄弟元素设置父元素 给父元素开启BFC
3.父子元素外边距合并
原因:父子元素同时设置了同一方向外边距
解决:1.给父元素设置内边距,不给子元素设置外边距
2.给父元素设置一个border属性
3.给父元素开启BFC overflow:hidden
BFC(Block Formatting Context)块级格式化上下文 ************
相当于是元素的一种属性,有了这种属性,容器就成为独立的渲染区域,
容器内的元素不会影响容器外的元素
1.触发BFC
1.html
2.float不为none
3.position为absolute和fixed
4.display:inline-block
5.overflow不为visible auto hidden
2.作用:
1.避免外边距重叠
2.清除浮动(给父元素清除浮动、给兄弟元素清(会改变兄弟元素位置))
4.两列布局(左侧定宽右侧自适应)
5.三列布局(左右定宽 中间自适应)
CSS布局机制 定位position 1.脱不脱离文档流 2.参照点定位
1.静态定位 默认所有元素在浏览器都是静态定位
position:static
2.相对定位 position:relative
特点:1.不脱离文档流 2.参照自身在浏览器位置定位
3.绝对定位 position:absolute
特点:1.脱离文档流 原先位置不保留 飘在文档流上方
2.无论有没有父元素或者祖先元素 参照浏览器视口区域定位
3.给父元素或者祖先元素设置定位 参照父元素或者祖先元素定位
4.固定定位 position:fixed
特点:1.脱离文档流 原先位置不保留 飘在文档流上方
2.参照浏览器视口区域定位
5.粘滞定位 position:sticky
特点:1.不脱离文档流
2.没有达到指定阈值之前是相对定位 达到阈值后是固定定位
z-index 更改元素堆叠顺序
兄弟元素同时开启定位流 谁的z-index较大 谁的优先级高
父子元素同时开启定位流:
1.如果两个同时设置 无论父元素z-index值多大 子元素优先级高
2.只给父元素设置 无论z-index值多大 子元素优先级高
3.只给子元素设置 同时z-index<0 父元素优先级高
CSS水平垂直居中方案:
1.通过margin挤压 给子元素设置margin 左右margin=父width-子width/2
上下margin=父height-子height/2
2.通过padding挤压 给父元素设置 给父元素设置border-box
3.子绝父相 配合属性设置为0 top left bottom right 全部为0 margin:auto
4.子绝父相 top:50% left:50% margin-left:-width/2 margin-top:-height/2
代码版本控制工具
gitee 码云
个人使用:
1.初始化本地git仓库 (首次)
git init
2.新建远程仓库 (首次)
全局配置用户名和邮箱
git config --global user.name "willsonkang1"
git config --global user.email "2681091754@qq.com"
3.将本地git仓库和远程仓库进行绑定(首次)
git remote add origin xxx.git
查看绑定远程仓库 git remote -v
4.git add ./git add * 跟踪文件有无修改
5.git status 查看提交状态
6.git commit -m '[xxxxxx]' 将暂存区文件提交到本地仓库
7.git push origin master 将文件提交远程仓库
后续使用
git add . 提交文件到暂存区
git commit -m '[xxx]' 将暂存区文件提交到本地仓库
git push origin master 将文件提交到远程仓库
邀请大家加入远程仓库
1.克隆我的远程仓库
git clone xxxx.git
2.上传到远程仓库
更新远程仓库笔记 git pull origin master
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{
width: 100px;
height: 100px;
background-color: red;
}
div:first-child{
float: left;
}
div:last-child{
background-color: blue;
clear: both;
} */
.parent{
border: 10px solid red;
/* 给父元素开启BFC */
overflow: hidden;
}
.child{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/* .clear{
clear: both;
} */
/* 给父元素设置伪元素 */
/* .parent::after{
display: block;
content: "";
clear: both;
} */
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<!-- <p class="clear"></p> -->
</div>
</body>
</html>
两列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left{
background-color: red;
width: 300px;
float: left;
}
.right{
background-color: blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left">左侧定宽</div>
<div class="right">
自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应
</div>
</body>
</html>
三列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left,.right{
width: 300px;
height: 300px;
background-color: red;
}
.center{
background-color: blue;
height: 600px;
overflow: hidden;
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
</head>
<body>
<div class="left "></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
/* 静态定位默认 */
position: static;
}
div:first-child{
background-color: red;
}
div:nth-child(2){
background-color: blue;
/*
相对定位 position:relative
1.不脱离文档流
2.参照自身在浏览器的位置
注意:同一方向属性不可以同时设置
*/
position: relative;
top: 20px;
left: 20px;
}
div:last-child{
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.parent:first-child{
background-color: red;
}
/* div:nth-child(2){
background-color: blue; */
/*
绝对定位 position:absolute
1.脱离文档流 原先位置不保留,飘在文档流上方
2.无论有没有父元素或者祖先元素,我们都是参照浏览器的视口区域定位
3.如果我们的父元素或者祖先元素也设置定位,我们就参照父元素进行定位
*/
/* position: absolute;
} */
.child{
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
}
.parent:nth-child(2){
background-color: orange;
position: relative;
}
.parent:last-child{
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent"></div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent"></div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fixbox{
width: 100px;
height: 100px;
background-color: yellow;
/*
固定定位
1.脱离文档流,原先位置不保留,飘在文档流方
2.参考浏览器的视口区域定位
*/
position: fixed;
bottom: 20px;
right: 20px;
}
.two{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div>段落标签</div>
<div class="fixbox">
<a href="#">回到顶部</a>
</div>
<div class="two"></div>
</body>
</html>
粘滞定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 1200px;
margin: 0 auto;
}
.container>div{
width: 1200px;
height: 700px;
}
.container>div:nth-child(odd){
background-color: pink;
}
.container>div:nth-child(even){
background-color: #fff;
}
aside.left,aside.right{
width: 200px;
height: 500px;
background-color: red;
/* 粘滞定位 不脱离文档流
relative+fixed组合 没有达到阈值钱是相对定位,达到阈值之后是固定定位*/
position: sticky;
top: 50px;
}
aside.right{
float: right;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<aside class="right"></aside>
<aside class="left"></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
水平垂直对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
/* 1.通过margin挤压
border: 1px solid red; */
/* 2.通过padding挤压 要设置为边框盒子
padding: 50px;
box-sizing: border-box; */
/*3. 给父元素设置相对定位
position: relative; */
/* 4.父元素相对定位 */
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: blue;
/* margin: 50px; */
/* 子元素绝对定位 配合属性全部为0 margin为auto
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto; */
/* 给子元素设置绝对定位
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px; */
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
兄弟元素堆叠shunxu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:first-child{
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 5;
}
div:last-child{
width: 100px;
height: 100px;
background-color: blue;
margin-left: 50px;
margin-top: -50px;
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
父子元素堆叠顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 200px;
height: 200px;
background-color: red;
position: relative;
/* z-index: 5; */
}
.child{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
z-index: -2;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>