前端第五天

1. 内联元素的盒模型
   内容区域(content area):指的是一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子(character box)；但是图片这样的替换元素，其显示内容不是文字，因此内容区域可以看成是元素自身。
   内联盒子(inline box):不会让内容成块显示，而是排成一行，这里的内联盒子指的是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”
   行框盒子(line box):每一行就是一个行框盒子，每个行框盒子都是由一个个内联盒子组成，注意：line-height是作用在行框盒子上的，并最终决定高度(替换元素除外，后面会讲解什么是替换元素)。
   包含盒子(containing box):此盒子由一行一行的“行框盒子”组成（css规范中，并没有“包含盒子”的说法，更准确的称呼是“包含块”(containing block)。
   width的默认值是auto，auto在不同场景会有不同的表现：
   fill-available：充分利用可用空间
   fit-content:收缩到合适，典型代表浮动、绝对定位（有例外，设置了对立属性：left、right、top、bottom时，宽度和高度由祖先元素position非static的元素决定，但是替换元素除外：img、video、canvas等）、inline-block、table。利用这个特性我们可以实现，文字整体居中，多行则居左显示
   min-content:收缩到最小。
   max-content:超出容器限制，内容很长的连续英文或数字，或者内联元素被设置为了white-space: nowrap。
   height的默认值也是auto，height: 100%。如果父元素height为auto，则子元素height:100%是无效的,想子元素height: 100%生效，则:
   父元素设定显式高度值
   使用绝对定位（绝对定位元素的百分比是根据padding box计算的，非绝对定位元素百分比是根据content box计算的)

2. display_visibility
   隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
   CSS Display - 块和内联元素
   块元素是一个元素，占用了全部宽度，在前后都是换行符
   visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

3. overflow
   规定当内容溢出元素框时发生的事情，所有主流浏览器都支持 overflow 属性。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。可能的值:
   visible:默认值。内容不会被修剪，会呈现在元素框之外。
   hidden:内容会被修剪，并且其余内容是不可见的。
   scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
   auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
   inherit:规定应该从父元素继承 overflow 属性的值。

4. 文档流

   指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
   定位属性positon:　　position的值为absolute、fixed的元素脱离文档流，static、relative没有脱离文档流

5. 浮动
   设置浮动以后依次浮动之后会跟在前面浮动的元素后面，并且浮动以后层级提高，后面的元素会排上去，浮动元素有可能会盖在未浮动元素的上面
   float属性:
   left:元素向左浮动
   right:元素向右浮动
   none:默认值；元素不浮动，并且显示在其文本中的出现位置。
   设置浮动以后依次浮动之后会跟在前面浮动的元素后面，并且浮动以后层级提高，后面的元素会排上去，浮动元素有可能会盖在未浮动元素的上面

6. 文字绕图
   在一个图文并茂的网页上，文字环绕图片可以使布局美观紧凑。
   浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果

7. 内联元素的浮动

   1. 支持部分样式（不支持宽、高、margin上下、padding上下）

   2. 宽高由内容决定

   3. 盒子并行一行

   4. 代码换行，盒子之间会产生间距

   5. 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

   6. 去掉内联元素之间的换行

   7. 将内联元素的父级设置font-size为0，内联元素自身再设置font-size

8. 简单布局
   

....................................................................................................................................

                                            导航条

• 首页
• 新闻
• 联系
• 关于
• 首页
• 新闻
• 联系
• 关于