css 浮动

目录

01 css中一些细碎的小知识

02浮动

01 css中一些细碎的小知识

1.样式初始化:

        页面很多标签自带margin和padding

        实际开发中 默认取消自带的效果 :             

  p,h1,h2,h3,h4,h5,h6,body,html,ul,ol,form{
        margin:0;

        padding:0

  }

        平时偷懒就写如下图效果：   

 *{

        margin:0;

        padding:0

    }

2.取消ul 和ol自带的序号 ：list-style:none;

3.行内块和文本之间无法对齐  使用属性：vertical-align:middle;

4.圆角边框：border-radius:4px;

        如果使用圆角边框属性设置实心小圆点 border-radius的值需要时宽高的一半.

5.text属性

        text开头的属性:

               1. text-indent:2em(代表两个字符长度) 首行缩进  第一行文本缩进指定的距离  

               2. text-decoration:文本修饰

                        underline下划线 | line-through删除线 | over-line上划线 | none取消文本修饰

                3. text-align:left(默认) center right  文本横向对齐方式

                        针对行内 行内块 文本 在一个有宽度的元素里面 横向的对齐方式

        overflow:  当前元素内部的内容如果超出了当前盒子

                visible(默认值) 溢出可见

                hidden(溢出隐藏)

                scroll(溢出时可以滚动)

                auto(只有溢出时才显示滚动效果)

6.opacity和rgba的区别

        opacity:0~1设置元素的透明度  0是透明 1是不透明

        opacity针对元素透明 表示当前元素以及内部所有内容一起半透明或者透明了

        rgba设置透明颜色 只针对当前颜色透明

7.css隐藏元素的方式

        css隐藏元素的几种方式：

                不占位：

                display:none;(实际开发中用的最多的)

                width:0;height:0;overflow:hidden; 只能针对行内块和块级元素

                占位：

                opacity:0

                visibility:hidden

                margin-left:- 很大的数

8.css精灵图

        css Sprite（css精灵图） 又叫 雪碧图

        使用原理：

            把多张小图片 放到一张大图上面

           向服务器请求一次 就可以把一张大图下载下来 大图上的小图就不用去向服务器请求了,可以提高网上冲浪的速度

                通过元素的backgroun-image和background-position 再加上元素的宽高来实现的

02浮动

1.标准文档流：

            标准的情况下 文档的流向

            在不进行任何修改的前提下：

                块级元素默认的排列方向 从上向下

                行内和行内块元素的排列方向是从左向右

2.浮动

        浮动：

                float:left right none(不浮动默认值)

                元素设置浮动 能够让当前元素脱离标准文档流(脱标)

                比如  块级元素 设置浮动之后 可以放在一行显示

                设置浮动的元素相当于具有了行内块的效果

        浮动分类：

                左浮动：元素往左排列

                右浮动：元素往右排列

        浮动元素的特点：

            1.  浮动影响后面的元素

                浮动的元脱投标了 不占有原来的位置了 所以对后面的元素造成影响

            2.  浮动找浮动 不浮动找不浮动

                浮动元素脱标了 就会在二楼 不浮动的元素 不脱标 在一楼

                如果两个元素都浮动了 还是遵循之前的规则

            3.  浮动以元素顶部为基准

                浮动会以父元素的顶部为基准 无法浮动超出父元素

        块级元素脱标会让块级元素在一行显示  

        浮动可以实现模式转换

3.浮动带来的影响

        1.会对后面的文字产生影响： 出现文字绕图的效果

        2.会对父元素带来影响：

                当父元素没有设置高度的时候，高度是由子元素撑开的，

                当子元素浮动之后，会导致父元素的高度为0

        3.清除浮动带来的影响：overflow：hidden；