css基础浮动相关知识

 复习第六天的知识

1、元素的隐藏方式：---display：none;     不会占用页面的空间

                   ---visibility:hidden; 占用页面的空间

2、display属性值：

    display：block;显示为块级元素

    display：inline;显示为内联元素

    display：inline-block;显示为行内块级元素

3、overflow属性值及作用

    overflow：hidden;   隐藏

    overflow：visible; 默认值，溢出
overflow：scale;    始终有滚动条
overflow：auto;     自动，当内容溢出时会出现滚动条，否则不会出现

4、float的属性值及含义

    float：none;  默认，不浮动
float：left;  左浮动
float: right; 右浮动

5、BFC的含义是块级格式化环境

今天的知识

1、块级与内联元素的浮动

    块级元素在文档流中的特点：块级元素是独占一行(垂直排列)

                              默认的宽度是父级元素的100%
  默认的高度是所有子元素高度之和
     没有子元素高度为零
块级元素设置为浮动的特点
    默认的高度和宽度为零，但是有效
宽度设置为100%--是相对于父级的
宽度和高度是所有子元素的宽度和高度之和
元素之间是水平排列
    

    内联元素在文档流中的特点：内联元素在页面是水平排列

                              高度和宽度是无效的

                    内联元素设置为浮动时的的特点：
    与块级元素设置为浮动的效果是一致的     

2、清除浮动

    clear：none;  默认值
clear：left;  清除左侧的浮动
clear：right; 清除右侧的浮动
clear：both;  清除两侧的浮动

案列：

    在父级元素结束的前面加div  <div style="clear:both"></div>
给父级选择器加overflow：hidden;清
4000
除父级产生的浮动
给父级加伪元素：.one::after{

                                 content: "";

                                 clear: both;

                                 display: block;}

3、固定定位

   position：fixed;

   元素会脱离文档流，始终相对于当前页面进行定位，

4、绝对定位

   position：absolute;

   两个div元素是父级与子级的关系--子级元素开启了绝对定位

        --父级元素不开启定位，子级元素是相对于页面的定位
    --父级元素开启定位，子级元素是相对于父级元素的定位

   

   元素会脱离文档流，元素会呈现块级元素效果，如果不设置偏移量，元素的位置不会发生改变

5、相对定位

   position：relative;

   相对于元素原本的位置的定义

   

   开启相对定位的元素，不会脱离文档流

   开启相对定位的元素。是相对于该元素在文档流中的定义效果

   开启相对定位的元素，不会改变元素的性质