diff --git a/README.md b/README.md new file mode 100644 index 0000000..abc5dfd --- /dev/null +++ b/README.md @@ -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, 百分数, 百分数); 色相, 饱和度, 亮度 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..803d5be --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + + + CSS重点难点 + + + 第1个inline222元素 + 第2个inline2222元素 + 第3个inline元素 + 第4个inline元素 + 第1个inline元素 + 第2个inline元素 + 第3个inline元素 + 第4个inline元素 + 第1个inline元素 + 第2个inline元素 + 第3个inline元素 + 第4个inline元素 + 第1个inline元素 + 第2个inline元素 + 第3个inline元素 + 第4个inline元素 + +
第1个block元素
+
第2个block元素
+
第3个block元素
+
第4个block元素
+ + 第1个ib元素 + 第2个ib元素 + 第3个ib元素 + 第4个ib元素 + 第1个ib元素 + 第2个ib元素 + 第3个ib元素 + 第4个ib元素 + + \ No newline at end of file diff --git a/note.md b/note.md new file mode 100644 index 0000000..ee7ff31 --- /dev/null +++ b/note.md @@ -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, 百分数, 百分数); 色相, 饱和度, 亮度 \ No newline at end of file diff --git a/rainbow.css b/rainbow.css new file mode 100644 index 0000000..7b40b75 --- /dev/null +++ b/rainbow.css @@ -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%; +} \ No newline at end of file diff --git a/ranbow.html b/ranbow.html new file mode 100644 index 0000000..88b5141 --- /dev/null +++ b/ranbow.html @@ -0,0 +1,29 @@ + + + + + + + + 彩虹桥 + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e7091d9 --- /dev/null +++ b/style.css @@ -0,0 +1,12 @@ +span { + border: 1px solid red; +} + +div { + border: 1px solid blue; +} + +.ib { + display: inline-block; + border: 1px solid greenyellow; +}