CSS学习总结（三）

5.浮动

5.1 display

元素分为块级元素和行内元素

块级元素：独占一行

p h1~h6 div 列表…

行内元素：不独占一行
span img a…

<!--
display:block 块元素
        inline 行内元素
        inline-block  是块元素，但是可以内联，在一行！
        none
-->

5.2 左右浮动

float:right 右浮动；
	  left  左浮动；

5.3解决父级边框塌陷问题

1.增加父级元素的大小

#father{
    border:1px solid red;
    height: 600px;
}

2.增加一个空的div标签

.clear{
     clear: both;
     margin: 0px;
     padding: 0px;
 }

3.在父级元素中添加overflow

#father{
    border:1px solid red;
    overflow: hidden;
}

4.添加一个父级伪类

#father:after{
    content: "";
    display: block;
    clear: both;
}

小结：

1. 浮动元素后面增加空div

   简单，代码中尽量避免空div

2. 设置父元素的高度

   简单，元素假设有了固定的高度，就会被限制

3. overflow

   简单，下拉的一些场景避免使用

4. 父类添加一个伪类：after（推荐）

   写法稍微复杂一点，但是没有副作用，推荐使用！

6.定位

在css中，position属性用来定义元素的定位模式

1.相对定位：相对于原来的位置进行指定漂移

position: relative;

2.绝对定位:相对于上一个已经定位的父级元素进行定位

    position:absolute;

3.固定定位:相对于浏览器窗口进行定位

position:fixed;

定位属性中包括：

top:顶部偏移量

bottom：底部偏移量

left：左侧偏移量

right：右侧偏移量

4.z-index

默认情况下，网页是一个二维空间，并根据在DOM中的顺序，从左至右，从上到下，依次排列各元素

z-index属性的值越大，元素离用户越近

z-index属性只对绝对定位、相对定位、或固定定位的元素有效，对静态定位的元素无效