Skip to content

Commit

Permalink
css盒模型学习与实践
Browse files Browse the repository at this point in the history
  • Loading branch information
NLxs committed Aug 16, 2020
0 parents commit e8ec26a
Show file tree
Hide file tree
Showing 6 changed files with 286 additions and 0 deletions.
58 changes: 58 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
# rainbow-html-css
## 纯CSS和HTML制作的简易版彩虹
# 几个重要概念
1. 文档流Normal Flow
2. 块、内联、内联块
3. margin合并
4. 两种盒模型(border-box较为符合人类思维)

# 文档流
## 流动方向
1. inline 元素从左到右, 到达最右边才会换行
2. block 元素从上到下, 每一个都另起一行
3. inline-block 从左到右, 当一行末尾不能放下一个元素的时候会另起一行
## 宽度
1. inline 宽度为内部inline元素的和, 不能用width指定
2. block 默认自动计算宽度, 可以使用width指定
2. inline-block 结合前两者特点, 可用width
## 高度
1. inline 高度由line-height 间接确定, 跟height无关
2. block 高度由内部文档流元素确定, 可以设height
2. inline-block 跟block类似, 可以设置height

# 注意
1. inline元素不能含有block元素
2. div的宽度是能有宽就多宽, 不一定是100%, 在设置div宽度的时候不要设置100%
3. 元素脱离文档流
1. float
2. position: absolute / fixed

# CSS盒模型
1. 两种盒模型: content-box, border-box
2. content-box的宽度只包含content
2. border-box的宽度含border、margin、padding、content

* content-box 内容盒-内容就是盒子的边界
* border-box 边框盒-边框才是盒子的边界
* content-box: width = 内容宽度
* border-box: width = 内容宽度 + padding + border
* border-box 好用
* 同时指定padding、width、border就知道为什么了

# margin合并
1. 父子margin合并
2. 兄弟margin合并
# 如何阻止合并
1. 父子合并用 padding / border挡住
2. 父子合并 overflow: hidden 挡住
3. 父子合并 display: flex
4. 兄弟合并是符合预期的
5. 兄弟合并可以用inline-block消除

# 颜色取值
1. 颜色英语名称
2. 颜色16进制代码
3. rgb
4. rgba a 代表透明度, 取值范围0-1, 1是完全不透明, 0是完全透明
5. 透明简写 transparent
6. hsl (0-360, 百分数, 百分数); 色相, 饱和度, 亮度
42 changes: 42 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>CSS重点难点</title>
</head>
<body>
<span>第1个inline222元素</span>
<span>第2个inline2222元素</span>
<span>第3个inline元素</span>
<span>第4个inline元素</span>
<span>第1个inline元素</span>
<span>第2个inline元素</span>
<span>第3个inline元素</span>
<span>第4个inline元素</span>
<span>第1个inline元素</span>
<span>第2个inline元素</span>
<span>第3个inline元素</span>
<span>第4个inline元素</span>
<span>第1个inline元素</span>
<span>第2个inline元素</span>
<span>第3个inline元素</span>
<span>第4个inline元素</span>

<div>第1个block元素</div>
<div>第2个block元素</div>
<div>第3个block元素</div>
<div>第4个block元素</div>

<span class="ib">第1个ib元素</span>
<span class="ib">第2个ib元素</span>
<span class="ib">第3个ib元素</span>
<span class="ib">第4个ib元素</span>
<span class="ib">第1个ib元素</span>
<span class="ib">第2个ib元素</span>
<span class="ib">第3个ib元素</span>
<span class="ib">第4个ib元素</span>
</body>
</html>
56 changes: 56 additions & 0 deletions note.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# 几个重要概念
1. 文档流Normal Flow
2. 块、内联、内联块
3. margin合并
4. 两种盒模型(border-box较为符合人类思维)

# 文档流
## 流动方向
1. inline 元素从左到右, 到达最右边才会换行
2. block 元素从上到下, 每一个都另起一行
3. inline-block 从左到右, 当一行末尾不能放下一个元素的时候会另起一行
## 宽度
1. inline 宽度为内部inline元素的和, 不能用width指定
2. block 默认自动计算宽度, 可以使用width指定
2. inline-block 结合前两者特点, 可用width
## 高度
1. inline 高度由line-height 间接确定, 跟height无关
2. block 高度由内部文档流元素确定, 可以设height
2. inline-block 跟block类似, 可以设置height

# 注意
1. inline元素不能含有block元素
2. div的宽度是能有宽就多宽, 不一定是100%, 在设置div宽度的时候不要设置100%
3. 元素脱离文档流
1. float
2. position: absolute / fixed

# CSS盒模型
1. 两种盒模型: content-box, border-box
2. content-box的宽度只包含content
2. border-box的宽度含border、margin、padding、content

* content-box 内容盒-内容就是盒子的边界
* border-box 边框盒-边框才是盒子的边界
* content-box: width = 内容宽度
* border-box: width = 内容宽度 + padding + border
* border-box 好用
* 同时指定padding、width、border就知道为什么了

# margin合并
1. 父子margin合并
2. 兄弟margin合并
# 如何阻止合并
1. 父子合并用 padding / border挡住
2. 父子合并 overflow: hidden 挡住
3. 父子合并 display: flex
4. 兄弟合并是符合预期的
5. 兄弟合并可以用inline-block消除

# 颜色取值
1. 颜色英语名称
2. 颜色16进制代码
3. rgb
4. rgba a 代表透明度, 取值范围0-1, 1是完全不透明, 0是完全透明
5. 透明简写 transparent
6. hsl (0-360, 百分数, 百分数); 色相, 饱和度, 亮度
89 changes: 89 additions & 0 deletions rainbow.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
/*
.rainbow > div rainbow里面的第一个div
.rainbow div rainbow里面的所有的div
去掉border后回外边距合并
color: hsl(180, 50%, 50%); 色相, 饱和度, 亮度
*/

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
/* border: 1px solid yellowgreen; */
background-color: #fff;
}

.rainbow { /* 类名为rainbow的div */
height: 200px;
overflow: hidden;
}

.rainbow div {
overflow: hidden;
}

.rainbow > div { /* rainbow 后面第一个div */
/* border: 1px solid #ff0000; */
background-color: #ff0000;
width: 400px;
height: 400px;
border-radius: 50%;
}

.rainbow > div > div {
/* border: 1px solid #ffa500; */
background-color: #ffa500;
height: 380px;
margin: 10px;
border-radius: 50%;
}

.rainbow > div > div > div {
/* border: 1px solid #ffff00; */
background-color: #ffff00;
height: 360px;
margin: 10px;
border-radius: 50%;
}

.rainbow > div > div > div > div {
/* border: 1px solid #008000; */
background-color: #008000;
height: 340px;
margin: 10px;
border-radius: 50%;
}

.rainbow > div > div > div > div > div {
/* border: 1px solid #0000ff; */
background-color: #0000ff;
height: 320px;
margin: 10px;
border-radius: 50%;
}

.rainbow > div > div > div > div > div > div {
/* border: 1px solid #4b0082; */
background-color: #4b0082;
height: 300px;
margin: 10px;
border-radius: 50%;
}

.rainbow > div > div > div > div > div > div > div {
/* border: 1px solid #ee82ee; */
background-color: #ee82ee;
height: 280px;
margin: 10px;
border-radius: 50%;
}

.rainbow > div > div > div > div > div > div > div > div {
background-color: #fff;
height: 260px;
margin: 10px;
border-radius: 50%;
}
29 changes: 29 additions & 0 deletions ranbow.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="rainbow.css">
<title>彩虹桥</title>
</head>
<body>
<div class="rainbow">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div></div><!--实现空心-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
12 changes: 12 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
span {
border: 1px solid red;
}

div {
border: 1px solid blue;
}

.ib {
display: inline-block;
border: 1px solid greenyellow;
}

0 comments on commit e8ec26a

Please sign in to comment.