| CSS

CSS查漏补缺（二）-盒子模型&定位元素

最近在图书馆借了一本CSS方面的书想巩固下CSS基础，书名是《CSS设计指南》,看完感觉是一本还错的CSS基础书籍，然后我便把自己CSS方面还比较薄弱的地方写到了笔记里，以后自己还可以复习下，嘻嘻~

盒子模型

盒子外边距 margin

叠加外边距

当两个盒子的外边距相邻时，会发生外边距叠加，较宽的外边距最终决定两个元素离多远

外边距的单位

外边距的单位可以使用px,em等
使用em的好处是当字体变化时边距也会跟着变大，这样，页面的整体布局就会比较协调一致。

盒子有多大

没有宽度的盒子

当块级元素没有显式的设置width属性时，那么width属性的默认是auto，块级元素的宽度会扩展到与父元素同宽。
此时给盒子设置内边距padding，垂直边框border则会挤压盒子的内容

一个小结论：没有宽度的元素始终会扩展到填满其元素的宽度为止。添加垂直边框，内边距和外边距，会导致内容宽度减少，减少量等于垂直边框，内边距和外边距的和。

有宽度的盒子

内容宽度不变，添加边框，内/外边距只会增加盒子的宽度，不会挤压内容。

结论：盒子的width属性设定的只是盒子内容去的宽度，而非盒子要占据的水平宽度。

浮动与清除

清除浮动的三种方法

浮动元素脱离了文档流，其父元素看不到它了，因此他不会被父元素包围。所以在某些情况下我们需要清除浮动。

  1. 方法一：为父元素添加overflow:hidden
    注意使用overflow:hidden后，超大的子内容可能会被父容器切掉
  2. 方法二：同时浮动父元素
  3. 方法三：添加非浮动的清除元素（即添加一个clearfix类）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>清除浮动的三种方法</title>
    	<style type="text/css">
            *{margin: 0;padding: 0;}
            section{
            	border: 1px solid blue;margin: 0 0 10px 0;
            	/*方法一：为父元素添加ovreflow:hidden*/
            	/*overflow: hidden;*/
            	/*方法二：同时浮动父元素*/
            	/*float: left;*/
            }
            /*方法三添加clearfix类*/
            .clearfix:after{
            	content: ".";
            	display: block;
            	height: 0;
            	visibility: hidden;
            	clear: both;
            }
            img{float: left;}
            footer{border: 1px solid red;/*clear: left;*/}
    	</style>	
    </head>
    <body>
         <section class="clearfix">
         	<img src="http://e.zohar.com.cn/imooc/%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/img/1.jpg" width="380px" height="380px">
         	<p>Is's fun to float</p>
         </section>
         <footer>这里是页尾</footer>
    </body>
    </html>

定位属性

静态定位

块级元素默认定位方式

相对定位

position:relative
相对于块级元素的原位置进行位置偏移

绝对定位

position:absolute
完全脱离文档流慎用，脱离文档流后元素就不方便控制
相对于祖先元素（body）或者父元素的定位属性不是默认static属性的块级元素进行位置偏移

绝对定位

position:fixed
完全脱离文档流
相对于浏览器窗口进行偏移
一般用于固定导航栏