外边距折叠现象
外边距正常现象
水平布局的盒子,左右margin正常,互不相影响,
最终的距离为margin左右的和.
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
display: inline-block;
width: 200px;
height: 300px;
}
.box1 {
background-color: pink;
margin-right: 20px;
}
.box2 {
background-color: green;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
外边距折叠-合并现象
垂直布局的块级元素，上下的margin会合并，最终两者的距离为margin最大值 解决方案：实际开发避免即可，只给其中一个盒子设置margin即可
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 300px;
}
.box1 {
background-color: pink;
margin-bottom: 20px;
}
.box2 {
background-color: green;
margin-top: 60px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
外边距折叠-塌陷现象
互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上
解决方案: 1 给父元素设置border-top; 2 给父元素设置padding-top; 3 给父元素设置 overflow: hidden; 4 转换为行内块元素; 5设置浮动; 注意：浮动 绝对定位 固定定位的盒子不会有嵌套块级元素塌陷问题.
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box1 {
/* display: inline-block; */
width: 400px;
height: 400px;
background-color: green;
/* border-top: 1px solid #000; */
/* padding-top: 1px; */
overflow: hidden;
}
.box2 {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
行内元素内外边距无效
注意：
- 行内元素 我们只能给左右的内外边距，不能给上下的内外边距。
- 如果非要给，请转换为块级元素或者行内块元素。
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
/* display: inline-block; */
/* 水平方向 有效 */
/* margin:0 20px; */
/* 垂直方向 无效*/
/* margin: 30px 0; */
padding: 50px 30px;
}
</style>
</head>
<body>
<a href="#">百度</a>|<a href="#">新浪</a>|<a href="#">谷歌</a><a href="#">小米</a>|
</body>
</html>
结构伪类
作用:根据元素在HTML中的结构关系查找元素(根据html结构选择标签)
好处:选择方便,省去了很多类名
<!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>Document</title>
<style>
/* 选中ul里面第一个li */
ul li:first-child {
background-color: pink;
}
/* 选中ul里面最后一个li */
ul li:last-child {
background-color: green;
}
/* 选中ul里面某个li 如果写（5）就是第五个li */
ul li:nth-child(5) {
background-color: hotpink;
}
/* 选中ul里面倒数第几个li (3)就是倒数第三个 */
ul li:nth-last-child(3) {
background-color: lawngreen;
}
</style>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
<li>我是第8个li</li>
<li>我是第9个li</li>
<li>我是第10个li</li>
</ul>
</body>
</html>
E:nth-child(n)
注意事项:
E:nth-child(n) 只能写n 不能写其他字母。写n表示选中所有孩子
E:nth-child(n) 不能完全取代 E:first-child E:last-child
<!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>Document</title>
<style>
/* 如果直接写n 表示选中所有的孩子 */
/* E:nth-child(n) 只能写n 不能写其他字母*/
/* n为 0 1 2 ..... */
/* .box li:nth-child(n) {
background-color: pink;
} */
/* n可以直接写 数字 表示选择第几个孩子 */
/* .box li:nth-child(6) {
background-color: blue;
} */
/* n为关键字 even(偶数 ) odd(奇数)*/
.box li:nth-child(even) {
background-color: blue;
}
.box li:nth-child(odd) {
background-color: pink;
}
</style>
</head>
<body>
<ul class="box">
<li>我是li里面的第1个孩子</li>
<li>我是li里面的第2个孩子</li>
<li>我是li里面的第3个孩子</li>
<li>我是li里面的第4个孩子</li>
<li>我是li里面的第5个孩子</li>
<li>我是li里面的第6个孩子</li>
<li>我是li里面的第7个孩子</li>
<li>我是li里面的第8个孩子</li>
<li>我是li里面的第9个孩子</li>
<li>我是li里面的第10个孩子</li>
</ul>
</body>
</html>
n为公式:
<!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>Document</title>
<style>
/* 2n 表示选中偶数 */
.box li:nth-child(2n) {
/* background-color: pink; */
}
/* 2n+1 表示选中奇数数 */
.box li:nth-child(2n+1) {
/* background-color: blue; */
}
/* 3n 表示3的倍数 */
.box li:nth-child(3n) {
/* background-color: orange; */
}
/* n+5 表示从第5个开始 一直到最后 包含第5个*/
.box li:nth-child(n+5) {
/* background-color: orange; */
}
/* -n+5 选中前5个 包含第5个 */
.box li:nth-child(-n+5) {
background-color: orange;
}
</style>
</head>
<body>
<ul class="box">
<li>我是li里面的第1个孩子</li>
<li>我是li里面的第2个孩子</li>
<li>我是li里面的第3个孩子</li>
<li>我是li里面的第4个孩子</li>
<li>我是li里面的第5个孩子</li>
<li>我是li里面的第6个孩子</li>
<li>我是li里面的第7个孩子</li>
<li>我是li里面的第8个孩子</li>
<li>我是li里面的第9个孩子</li>
<li>我是li里面的第10个孩子</li>
</ul>
</body>
</html>
注意事项:
E:nth-child(n) 只能写n 不能写其他字母。写n表示选中所有孩子
E:nth-child(n) 不能完全取代 E:first-child E:last-child
<!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>Document</title>
<style>
/* 如果直接写n 表示选中所有的孩子 */
/* E:nth-child(n) 只能写n 不能写其他字母*/
/* n为 0 1 2 ..... */
/* .box li:nth-child(n) {
background-color: pink;
} */
/* n可以直接写 数字 表示选择第几个孩子 */
/* .box li:nth-child(6) {
background-color: blue;
} */
/* n为关键字 even(偶数 ) odd(奇数)*/
.box li:nth-child(even) {
background-color: blue;
}
.box li:nth-child(odd) {
background-color: pink;
}
</style>
</head>
<body>
<ul class="box">
<li>我是li里面的第1个孩子</li>
<li>我是li里面的第2个孩子</li>
<li>我是li里面的第3个孩子</li>
<li>我是li里面的第4个孩子</li>
<li>我是li里面的第5个孩子</li>
<li>我是li里面的第6个孩子</li>
<li>我是li里面的第7个孩子</li>
<li>我是li里面的第8个孩子</li>
<li>我是li里面的第9个孩子</li>
<li>我是li里面的第10个孩子</li>
</ul>
</body>
</html>
n为公式:
<!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>Document</title>
<style>
/* 2n 表示选中偶数 */
.box li:nth-child(2n) {
/* background-color: pink; */
}
/* 2n+1 表示选中奇数数 */
.box li:nth-child(2n+1) {
/* background-color: blue; */
}
/* 3n 表示3的倍数 */
.box li:nth-child(3n) {
/* background-color: orange; */
}
/* n+5 表示从第5个开始 一直到最后 包含第5个*/
.box li:nth-child(n+5) {
/* background-color: orange; */
}
/* -n+5 选中前5个 包含第5个 */
.box li:nth-child(-n+5) {
background-color: orange;
}
</style>
</head>
<body>
<ul class="box">
<li>我是li里面的第1个孩子</li>
<li>我是li里面的第2个孩子</li>
<li>我是li里面的第3个孩子</li>
<li>我是li里面的第4个孩子</li>
<li>我是li里面的第5个孩子</li>
<li>我是li里面的第6个孩子</li>
<li>我是li里面的第7个孩子</li>
<li>我是li里面的第8个孩子</li>
<li>我是li里面的第9个孩子</li>
<li>我是li里面的第10个孩子</li>
</ul>
</body>
</html>
伪元素
伪元素就是由css模拟出来的盒子
::before 在父元素内容的最前面添加一个元素
::after 在父元素内容的最后面添加一个元素
注意事项
伪元素必须要指定 content属性 伪元素插入的元素属于行内元素 设置宽高无效 伪元素的权重和标签一致 0001
css2伪元素是单冒号
C333伪元素是双冒号就是伪了区分伪类和伪元素,但是单冒号仍然有效的.
<!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>
<!-- 伪元素就是由css模拟出来的创建的标签或者盒子-->
<style>
/* ::before 在父元素内容的最前面添加一个元素 */
.box::before {
display: inline-block;
width: 100px;
height: 50px;
background-color: orange;
content: '前面';
}
/* ::after 在父元素内容的最后面添加一个元素 */
.box::after {
content: '后面';
display: inline-block;
width: 100px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">伪元素</div>
</body>
</html>
标准流
网页布局： 标准流 + 浮动 + 定位
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
1.块级元素：从上往下，垂直布局，独占一行
2.行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动
为什么需要浮动
- 想要把多个块级元素放在一行显示,打破常规布局.
使用行内元素布局页面有一定的局限性,中间会有空白间隙.
实际开发中盒子之间 间隙会有严格的要求.
浮动的特点
1.浮动元素会脱标，在标准流中不占位置
2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高
浮动布局注意事项:
1.浮动一般情况下和标准流的父盒子一起搭配使用.
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
2 .浮动的时候,当父元素装不下浮动的子元素时,此时子元素会换行显示
3.一个元素浮动了，理论上其余的兄弟元素也要浮动,以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
一浮全浮
