CSS-盒子模型

• 所有的页面元素都可以看成一个盒子，并且占据着一定的页面空间。无论是div、span、还是a都是盒子，但是，图片、表单元素一律看作是文本，它们并不是盒子。比如说，一张图片里并不能放东西，它自己就是自己的内容；
• 盒子模型是由content(内容)、 padding(内边距)、 margin(外边距)、 border(边框)这四个属性组成的。

盒模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当做一个盒装物。对我们来说，只需要理解元素在页面中所占据的位置。

border边框

• 复合样式：border:边框大小 类型 颜色;

border:5px solid #006633；

border-width: 5px;      大小
border-style: solid;    类型
border-color: red;      颜色
border-top:0px;       /*去除上边框*/
border-top:none;      /*去除上边框*/

• border-width：边框大小
  • 四个值：上 右 下 左(顺时针)
  • 三个值：上 左右 下
  • 二个值：上下 左右
  • 一个值：四个方向值相等
  • border-top-width 顶部边框大小
  • border-right-width 右边框大小
  • border-bottom-width 底部边框大小
  • border-left-width 左边框大小
• border-style： 边框类型
  • solid 实线
  • dashed 虚线
  • dotted 点线
  • double 双边框
  • border-top-style 顶部边框类型
  • border-right-style 右边框类型
  • border-bottom-style 底部边框类型
  • border-left-style 左边框类型
• border-color 边框颜色
  • 四个值：上 右 下 左(顺时针)
  • 三个值：上 左右 下
  • 二个值：上下 左右
  • 一个值：四个方向颜色一样
  • border-top-color 顶部边框颜色
  • border-right-color 右边框颜色
  • border-bottom-color 底部边框颜色
  • border-left-color 左边框颜色

padding内边距

边框与内容之间的距离

• 四个值：上 右 下 左(顺时针)
• 三个值：上 左右 下
• 二个值：上下 左右
• 一个值：四个方向值相等
• padding-top 顶部内边距
• padding-right 右内边距
• padding-bottom 底部内边距
• padding-left 左内边距

margin外边距

元素与其他元素的距离（边框以外的距离）

• margin-top 顶部外边距
• margin-right 右外边距
• margin-bottom 底部外边距
• margin-left 左外边距
• 自动水平居中
  • margin:auto; 左右居中
  • margin:20px auto; 上下20px 左右居中
  • margin:20px auto 0; 上20px 左右居中 下0

盒子大小的计算

• content+border+padding盒子大小 = 样式宽 + 内边距 + 边框
• 盒子宽度 = 左border+左padding+width+右padding +右border
• 盒子高度 = 上border+上padding+height+下padding+下border

文档流

文档流是浏览器解析网页的一个重要概念，对于一个XHTML网页，body元素下的任意元素，根据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素顺序去显示他们在网页中的位置。
文档流是浏览器默认显示规则

float浮动

浮动起初作用是为了让文字环绕效果。

• 浮动的定义：使元素脱离文档流 ，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停了下来；
• 文档流 是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置）；
• 脱离文档流 ：在页面内中不占位置，所以浮动元素后面的元素会占据浮动元素本来应该所处的位置。
• 如果水平方向上没有足够的空间容纳浮动元素，则转向下一行

浮动的一般情况

• float:left;
• float:right;
• none;

如果一个元素（无论是块级元素还是行内元素）被设置为float之后，那么它默认会添加属性display:inline-block（行内块级元素），也就是说浮动会让元素变为拥有块级属性的行内元素，这时它的默认宽度不是100%，且给该元素设置padding-top和padding-bottom或者width、height都是有效果的。

清除浮动

• 什么情况下需要清除浮动？
  父元素没有高度（指的是不设值，height:0不算）的情况下，里面的子元素都设置了浮动。
  只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。 但是一般，高度height很少出现。为什么？因为能被内容撑高！
• 为什么需要清除浮动？
  当元素设置浮动属性后，会对相邻的元素产生影响。相邻元素是指紧邻后面的元素。
• 清除浮动办法：

1. overflow: hidden; 是将父元素解除浮动的影响，需要注意这个属性不仅能清除浮动，还有超出隐藏效果。
   给没有设置高度的父元素设置overflow:hidden，一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。

# 时下主流，应该用在包含浮动元素的父元素上；
.clearfix:after{
              content:'';
              display:block;
              clear:both;
              height:0;  
           } 

css给块级元素设上display: inline与float:left的区别是什么？
设了float:left的元素允许它的右边存在任何元素同行显示，不论是内联元素还是块元素。但它的左边还是不允许存在任何元素与之同行显示，哪怕其它的元素的代码在前，除非也给前面的元素加上float:left后，才允许同行显示。
设了display:inline的元素，允许它的前后存在其它的内联元素同行显示。如果要让代码在前面的块元素与之同行显示，则要让前面的元素浮动（不管是左还是右浮动）或设为display:inline，如果要让代码在后面的块元素与之同行显示，则只能设为display:inline，浮动不起作用（无论左浮动还是右浮动）。即允许内联同行，块级要看情况。 给块级元素设上display:inline是解决有名的IE6中双倍浮动的利器。

position定位

规定元素的定位类型

• static 静态定位（没有定位），默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• relative 相对定位，相对于其正常位置进行定位。
  不会脱离文档流；
  不影响元素本身的特性；
  如果没有定位偏移量，对元素本身没有任何影响；
• absolute 绝对定位，最近非static定位的父级进行定位。
  使元素完全脱离文档流；
  没有定位父级则相对于body(整个文档)发生偏移；
  绝对定位一般配合相对定位使用；
• fixed 固定定位，相对于浏览器窗口进行定位。

方位词

• left: 距离左边的距离
• right: 距离右边的距离
• top:距离顶部的距离
• bottom:距离底部的距离
• z-index 规定定位的层级（默认0），仅能在定位元素上奏效。
  值：number 值越大层级越高
  注意：方位词相对于哪个对象偏移的

注意1：float和absolute会脱离文档流，所以对其设置宽高，不会影响其父元素的，切不要想通过设置其来撑开父级元素！

注意2：需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

案例

需求：实现如下效果
①进入的时候界面：

image.png

②鼠标进入里面，两边“耳朵”显示出来：

image.png

③鼠标移动到某个圆，对应圆亮

image.png

    
    
    


    

        
        

            

            

            

            

            

        
        

            
<
            
>