CSS重点整理

01.浮动简介

浮动（float）

    浮动是一种布局手段，会使元素脱离文档流

    元素在文档流的时候，会分块元素，行内元素，行内块元素，各自都有一定的特点

   

    设置元素浮动，可以用float样式

      可选值：

         none  默认值，不浮动

         left  向左浮动

         right 向右浮动

   

    设置浮动后的一些特点：（第一类特点）

      1、设置元素浮动后，元素会脱离文档流，就不会再占据原来在文档流的位置

          浮动元素后面的元素就向上

      2、设置元素浮动后，元素会尽可能向左或者向右浮动

         浮动元素不会超过它前一个兄弟，最多一边齐

      3、如果浮动元素前一个兄弟没有浮动，浮动的元素不会跑上去

      4、浮动的元素不会超出父元素

02.浮动特点

特点1:

      浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，

      所以我们可以通过浮动来设置文字环绕图片的效果

特点2:

      当浮动的元素碰到了文字，浮动的元素不会盖住文字，

      文字会环绕在浮动元素的周围，从而做出了文字环绕图片的效果

      这也是浮动最开始的功能

特点3:

    设置元素浮动后，元素脱离文档流，元素原来在文档流中分类，特点就不复存在

    也就是说行内元素可以设置宽高了，块元素也不会独占一行了，

        行内块元素也没有三像素的问题

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变

      脱离文档流的特点

      块元素：

        1:块元素不再独占页面的一行

        2:块元素的宽高被内容撑开

      行内元素：

        1:浮动过后的行内元素更像行内块元素,因问一行可以显示多个，并且默认宽度为内容的宽度

     总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内

03.盒子的大小 

默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

          设置width，height特指内容区的宽高

        box-sizing  用来设置盒子尺寸的计算方式  用来规定width，height指的谁

          可选值：

            content-box  width，height指的是内容区宽高，默认值

            border-box   width，height指的就是内容区，内边距，边框加起来的大小

04.阴影和圆角

知识点1:

      box-shadow

          用来设置元素的阴影效果，不会影响到页面布局

            第一个值：水平偏移量  正->右  负->左  必写

            第二个值：垂直偏移量  正->下  负->上  必写

            第三个值：模糊半径   选写，默认值是0

            第四个值：颜色       选写，默认值是黑色

知识点2:

           1、border-radius 用来设置圆角  

             可以同时设置多个值，规则跟我们之前归纳的border-width一样

           2、单独设置某一角的圆角

              border-top-left-radius:;

              border-top-right-radius:;

              border-bottom-left-radius:;

              border-bottom-right-radius:;

           3、设置圆形

           border-radius: 50%;