计算盒子模型的尺寸、display属性、块级和内联元素、浮动、overfloat

计算盒子模型的尺寸

 盒子实际高度=上下外边距+上下边框+上下内边距+内容高度

 盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度

box-sizing属性

 content-box

   盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框

 border-box

   盒子的实际高度和段杜包括元素内容、边框和内边距

问题：求“马”所在div的宽度

样式： .class1{

          Width:200px;

          Height:300px;

          Border:5px;

       }

<div class=”class1”><img src=”image/1.jpg” ></div>

注意：1、这里的200px不是指马的宽度，而是这个div，所以宽度为200+5*2=210px

      2、 .class1{

           box-sizing:content-box；   谷歌浏览器可以这样写，但其他浏览器要加前缀

           padding：20px；

          }

          .class2{

           Padding：20px；

          }

          .class3{

           box-sizing:border-box;

           padding:20px;

          }

          上面样式1和样式2效果一样，说明box-sizing是加padding的。它会使包容它的那个块边大。

          而样式3会使包容它的那个块小一点

      3、.class4{

           Width:300px;

           Border:5px;

         }

         <div class=”class4”>

            <img src=”image/2.jpg”>

         </div>

说明：在div中放入一张图片，求这个div的宽度？300px+5*2=310px

       若在样式中添加”padding:20px;”则这个div的宽度：300+5*2+20*2=350px（乘以2是左右内边距）

       若在样式中再添加”box-sizing:content-box;”宽度为：300+5*2+20*2=350px会把div撑宽

    若在样式中再添加“box-sizing:border-box;”宽度为300px，在内容中缩小，所以比原本div宽要小，导致那张图片的宽度会被挤小点（图片宽度为：300-5*2-20*2=250px）

结论：

 

 

应用：制作京东快报

 

display属性

 技能目标

   会使用float属性布局网页并定位网页元素

   会使用clear属性清除浮动

   会使用overflow进行溢出处理

块级元素 <div>  <p> 独占一行，可以设置宽高

内联（行内）元素 <a> <img> <span> 内容是多少，宽度就是多少，并不会独占一行

                                 设置宽高但不起作用,设置padding、margin也不起作用

 

块级元素和内联元素能否互相转换呢？使用display

 

 

标准文档流的组成

 块级元素

    <h1>...<h6>、<p>、<div>、列表

 内联(行内)元素

<span>、<a>、<img/>、<strong>...

display属性

  控制元素的显示和隐藏

  块级元素与行内元素的转变

      值            说明

     none    设置元素不会被显示

     inline  元素会被显示为内联元素

     block   元素会被显示为块级元素

     inline-block 行内块元素         让内联元素拥有块级元素的特点（宽高，padding，margin的效果）

 Display=none  一般用于网上购物时，比如鼠标移动到购物车有你购买的商品显示，移走就被隐藏了

 Div,span{

      Width：100px；

      Height：100px

      Border:1px red soild;

   }

   .class1{

      Display:inline                  加了这句会导致这个div块级元素变为内联元素，

   }                               因此特性：不会独占一行、设置宽高不起作用

<div class="class1">这是一个div块级元素</div>

<span class=”class2”>这是一个内联元素span</span>

将块级元素设置为内联元素加display:inline;

将内联元素设置为块级元素加display:block;

 

要想一个内联元素宽高起作用，则加display:inline-block;

   .class1{

     Display:inline-block;

   }

<span class=”class1”>行内块元素</span>

<span>内联元素</span>

  这里网页效果是”行内块元素”和”内联元素”是占一行的，说明行内块元素原本是内联元素，但是他能设置宽高。

应用：京东顶部的导航条

1、导航条用<ul><li>..</li><ul>制作，但是呈现竖直，要想变为水平则样式中ul li{display:inline-block}  为什么而不是inline，以为导航名之间要设置内边距，效果更好看

2、盒子模型对行内元素不起作用

总结：先判断元素是行内元素还是块元素，要使它起作用是否要使它变为行内元素还是块元素

常见的网页布局  上为导航，中为内容，下为版权

  上下结构

  上中下结构

  上左右下结构：1-2-1结构          内容分左右部分

  上左中右下结构：1-3-1结构

浮动 -float属性(可以查看京东导航条，列表项所在的div样式)

  属性值       说明

   left      元素向左浮动

   right     元素向右浮动

   none      默认值，元素不浮动

 当我让元素浮动起来，停止浮动的条件：如果浮动元素遇到父容器的边，它就会停止。遇到前一个浮动元素也会停止

 

clear属性

  属性值          说明

   left        在左侧不允许浮动元素

   right       在右侧不允许浮动元素

   both        在左右两侧不允许浮动元素

   none        默认值。允许浮动元素出现在两侧

 

一个div里面有几个div，父元素包含几个子元素，如何让父容器随子元素的高度自适应？

因为浮动的原因，脱离了文档流，父元素起不了包裹的作用，而父容器还老实巴交在文档流待着，两者的层级不一样。

  方法一：在父容器中添加一个空的div。样式为：clear：both，让父元素和子元素拉到一个层级

  方法二：给父容器填加一个样式。样式为：overfloat：hidden；

两种扩展盒子高度的区别

  使用overflow属性扩展盒子高度减少代码量，也减少了空的HTML标签，使代码更加简洁，清晰，从而提高了代码的可读性和网页性能

  如果页面中有定位元素，并且元素超出了父级的范围，就必须使用clear属性来清除浮动来扩展盒子高度

Overflow是对父容器的内容溢出了怎么处理