6.26 学习笔记

flow浮动

    文档流:文档流是文档中可显示对象在排列时所占用的位置。

    float特性:加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

  float取值:left  right  none(默认）

  Float注意点:

        1、只会影响后面的元素。

        2、内容默认提升半层。

        3、 默认宽根据内容决定。

        4、换行排列。

        5、主要给块元素添加，但也可以给内联元素添加。

 如何清除浮动:

     上下排列:clear属性，表示清除浮动，left   right   both

    嵌套排列消除浮动办法:

         1、固定宽高:  不推荐，不能把高度固定死，不适合做自适应效果。

         2、父元素浮动:  不推荐，因为父容器浮动起来也会影响到后面的元素

         3、overflow:hidden(BFC规范)，如果有子元素溢出，那么会受到影响。

         4、display:Inline-block(BFC 规范)，不推荐，父容器影响到后面元素。

         5、设置空标签:不推荐，会多添加一个标签。

         6、after伟类:推荐，是空标签的加强版，目前各大公司的做法。

            (clear属性只会操作块标签，对内联标签不起作用)

              设置背景顺序，先写的在上面

position定位

   position特性:

     Css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性决定了该元素的最终位置。

   position取值:

     static(默认）  

     relative:绝对定位

        1、 如果没有定位偏移量，对元素本身没有任何影响 

        2、不是元素脱离文档流

        3、 不影响其他元素布局

         4、left， top, right ，bottom是相对于当前元素自身进行偏移的

     absolute: 固定定位

        1、使元素完全脱离文档流

        2、使内联元素支持宽高(让内敛具备块特性)

         3、使块元素默认宽根据内容决定(让快具备内敛的特性)

         4、如果有定位祖先元素，相对于定位组件元素发生偏移，没有定位，主线元素相对于整个文本发生偏移(绝对，相对，固定)

     fixed:

        1、 使元素完全脱离文档流

        2、 使内联元素支持宽高让内敛具备块特性)

        3、 使块元素默认宽根据内容决定(让快具备内敛的特性)

        4、 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

     sticky:粘性定位

          在指定的位置进行黏性操作

     z-index:定位层级

          默认层级为0

          嵌套时候的层级问题

CSS添加省略号

     width:必须有一个固定的宽

     white-space: nowrap:不让内容折行

     overflow:hidden  隐藏溢出的内容

     text-overflow:ellipsis  添加省略号

CSS sprite

     特性:Css雪碧也叫做css精灵，是一种网页图片应用处理方式。他允许你将一个页面涉及到的所有零星图片都包含到一张大图片中去加载。

     好处:1、可以减少图片的质量，网页的图片加载速度快。

              2、减少图片的请求的次数，加快网页的打开

CSS圆角:border-radius给标签添加圆角