From b8da265696e58125082bf66ff5d578c320c9f439 Mon Sep 17 00:00:00 2001
From: oo <1483839097@qq.com>
Date: Sun, 20 Oct 2024 23:58:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../202401017-\346\265\256\345\212\250.md"    | 148 ++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 "\346\254\247\345\272\255\347\200\232/\350\257\276\345\240\202\347\254\224\350\256\260/202401017-\346\265\256\345\212\250.md"

diff --git "a/\346\254\247\345\272\255\347\200\232/\350\257\276\345\240\202\347\254\224\350\256\260/202401017-\346\265\256\345\212\250.md" "b/\346\254\247\345\272\255\347\200\232/\350\257\276\345\240\202\347\254\224\350\256\260/202401017-\346\265\256\345\212\250.md"
new file mode 100644
index 0000000..076ba09
--- /dev/null
+++ "b/\346\254\247\345\272\255\347\200\232/\350\257\276\345\240\202\347\254\224\350\256\260/202401017-\346\265\256\345\212\250.md"
@@ -0,0 +1,148 @@
+### 标准文档流的特性
+1. 空白折叠现象：无论多少个空格、换行、tab，都会折叠为一个空格
+2. 高矮不齐，底边对齐
+3. 自动换行，一行写不满，换行写
+
+### 行内元素和块级元素
+**行内元素和块级元素的`区别`：**（非常重要）
+
+1. 行内元素：
+
+- 与其他行内元素并排
+- 不能设置宽、高。默认的宽度，就是文字的宽度
+
+2. 块级元素：
+
+- 霸占一行，不能与其他任何元素并列
+- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%
+
+**行内元素和块级元素的`分类`：**
+
+从html上看
+
+- 文本级标签：p、span、a、b、i、u、em。
+- 容器级标签：div、h系列、li、dt、dd。
+
+> PS：p里面只能放文字、图片、表单元素，不能放h和ul，也不能放p。所以为文本级标签
+
+从css上看
+
+- 行内元素：除了p之外，所有的文本级标签，都是行内元素
+- 块级元素：所有的容器级标签都是块级元素，包括p标签
+
+### 行内元素和块级元素的相互转换
+通过`display`属性（显示模式）将块级元素和行内元素进行相互转换
+```css
+display: inline;/*行级元素*/
+display: block;/*块级元素，如果不设置宽度，将撑满父亲*/
+```
+
+css中一共有三种手段，使一个元素脱离标准文档流：
+
+- 浮动
+- 绝对定位
+- 固定定位
+
+## 浮动的性质
+1. 浮动的元素脱标(脱离标准流)
+    - 一旦一个元素浮动了，那么将能够并排，并且能够设置宽高，无论它原来是div还是span
+    - 所有标签浮动后，就不区分行内、块级了
+2. 浮动的元素互相贴靠
+3. 浮动的元素有“字围”效果
+    - 标准流中的文字不会被浮动的盒子遮挡住（div浮动，p不浮动，div挡住了p，但不会挡住p中的文字）
+    - 永远不是一个东西单独浮动，浮动都是一起浮动
+4. 收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度
+
+## 浮动的清除——清除浮动与浮动之间的影响
+> 一个网页有header、content、footer三部分。如果设置content的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里
+
+清除浮动的方法：
+
+1. 给浮动元素的祖先元素加高度
+    - li的**父亲div没有设置高度**，导致这两个div的高度均为0px
+    - 给div设置高度（大于儿子），如果div自己的高度小于孩子的高度，也会出现不正常的现象
+    - 如果一个元素要浮动，那么它的祖先元素一定要有高度
+    - 只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素
+2. clear:both;
+    - 不允许左侧和右侧有浮动对象
+    - 它所在的标签，margin属性失效了（本质原因：高度为零）
+3. 隔墙法：为防止第二个div贴靠到第一个div，可以在两个div中间用一个新的div隔开，然后给新的div设置`clear: both;`属性；新的div无法设置margin属性，可以给它设置height，以达到margin的效果
+    - 内墙法：![内墙法公式](http://img.smyhvae.com/20170802_1123.png)：一个父亲是不能被浮动的儿子撑出高度的
+    - 与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度，高度可以自适应内容
+    - 外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content
+4. overflow:hidden;
+
+## 浏览器的兼容性问题
+### 兼容性1（微型盒子）
+**兼容性的第一条**：IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大。IE 6不支持微型盒子
+
+解决方法：将盒子的字号大小，设置为小于盒子的高
+```
+height: 10px;
+_font-size:0;
+```
+
+浏览器hack：hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
+
+IE6留了一个**后门**：只要给css属性之前，加上**下划线**，这个属性就是IE6的专有属性
+
+### 兼容性2
+**兼容性的第二条：**IE6不支持用`overflow:hidden;`来清除浮动。
+
+解决办法：
+```css
+overflow: hidden;
+_zoom:1;/*触发浏览器hasLayout机制*/
+```
+
+### margin塌陷/margin重叠
+**标准文档流中，竖直方向的margin不叠加，取**较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)
+
+如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的
+
+### 盒子居中`margin:0 auto;`
+```css
+margin-left: auto;
+margin-right: auto;
+```
+简写：
+```
+margin:0 auto;
+```
+1. 只有标准流的盒子，才能使用`margin:0 auto;`居中。当盒子浮动、绝对定位、固定定位，都不能使用margin:0 auto;
+2. 使用`margin:0 auto;`的盒子，必须有明确的width
+3. `margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;`
+
+## 关于margin的IE6兼容问题
+### IE6的双倍margin的bug：
+当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign
+
+解决方案：
+
+1. 使浮动的方向和margin的方向，相反
+```
+	float: left;
+	margin-right: 40px;
+```
+2. 使用hack，单独给队首的元素，写一个一半的margin
+```html
+<li class="no1"></li>
+```
+```css
+ul li.no1{
+	_margin-left:20px;
+}
+```
+
+## Fireworks和others
+### Fireworks
+fireworks是Adobe公司的一个设计软件,默认文件格式是png
+
+标尺的快捷键：Ctrl + Alt+ R
+
+### others
+首行缩进两个汉字：
+```
+text-indent: 2em;
+```
+em就是汉字的一个宽度,indent的意思是缩进
\ No newline at end of file
-- 
Gitee