HTML7

第七章
 1.标准文档流
  1.1 标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
  1.2 标准文档流组成
   a.块级元素（block）
    <h1>…<h6>、<p>、<div>、列表
   b.内联元素（inline）
    <span>、<a>、<img/>、<strong>...
  注意:内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立.
 2.display属性
  2.1 属性值
   block：块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
   inline：内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
   inline-block：行内块元素，元素既具有内联元素的特性，也具有块元素的特性
   none：设置元素不会被显示
  2.2 display特性
   a.块级元素与行级元素的转变（block、inline）
   b.控制块元素排到一行（inline-block）
   c.控制元素的显示和隐藏（none）
 3.浮动float
  3.1 浮动属性值
   left：元素向左浮动
   right：元素向右浮动
   none：默认值。元素不浮动，并会显示在其文本中出现的位置
  3.2 清除浮动
   left：在左侧不允许浮动元素
   right：在右侧不允许浮动元素
   both：在左、右两侧不允许浮动元素
   none默认值。允许浮动元素出现在两侧

 4.父边框塌陷
  4.1 原因
   浮动元素脱离标准文档流就可能导致父边框塌陷.
  4.2 解决方案
   a.浮动元素后面加空div
    例:<div id="father">
       <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
       <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
       <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
       <div class="layer04">浮动的盒子……</div>
       <div class="clear"></div>
     </div>
     .clear{  clear: both;  margin: 0; padding: 0;}
   b.设置父元素的高度
    #father {height: 400px; border:1px #000 solid; }
   c.父级添加overflow属性
    #father {overflow: hidden;border:1px #000 solid; }
   d.父级添加伪类after
    <div id="father" class="clear">
      <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
      <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
      <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
      <div class="layer04">浮动的盒子……</div>
    </div>
    .clear:after{
        content: '';          /*在clear类后面添加内容为空*/
        display: block;      /*把添加的内容转化为块元素*/
        clear: both;         /*清除这个元素两边的浮动*/
    }
 5.溢出处理overflow
  visible： 默认值。内容不会被修剪，会呈现在盒子之外
  hidden：内容会被修剪，并且其余内容是不可见的
  scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
  auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

 

转载于:https://www.cnblogs.com/ZhouTao2620/p/7861325.html