02-CSS基础与进阶-day7_2018-09-07-20-25-28

盒子模型布局稳定性
1 什么时候用内边距什么时候用外边距
绝大多数情况下可以混用，想用什么就用什么，但是总有一个
最好用的，建议
优先使用width > padding > margin
浮动(float)
1 标准流（文档流普通流）
一个网页的标签元素正常是从上往下，从左到右排列，块级元素独占一行，行内元素按照顺序依次前后排列
三种布局标准流浮动定位
2 什么是浮动
元素设置了浮动属性会脱离标准流的控制(脱标)
float:left
float: right
float: none
3 浮动特性
* 脱离标准流不占位置会影响标准流
* 子盒子浮动不会压住父盒子的padding和margin
* 浮动元素改变元素的模式,无论行内元素还是块级元素设置浮动后都具有行内块元素特性

02浮动最初的作用.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
              width: 500px;
              height: 500px;
              border: 1px solid #ccc;
              margin: 0 auto;
       }

       img {
              float: right; /*浮动最初 用文字环绕效果的*/
       }
    </style>
</head>
<body>
    <div>
    1991年1月，发行专辑《一起走过的日子》，专辑同名主打歌获得十大劲歌金曲奖以及十大中文金曲奖[116-117] ；2月，发行粤语专辑《爱不完》[118]  ；该专辑发行首日录音带的销量达到16万张，而激光唱片的销量则有7.2万张[119] ；6月，发行国语专辑《我和我追逐的梦》；同年，获得十大劲歌金曲奖最受欢迎男歌手奖[116] 。 1992年，在洛杉矶、旧金山等地举行美加巡回演唱会；9月，发行加入 刘德华 刘德华(3张) 华纳唱片公司以后的首张专辑《真我的风采》；该专辑发行后销量达到40万张[119] ；同年，在提前录制的央视春晚视频中，刘德华与毛阿敏合唱歌曲《心中常驻芳华》[120] 
        <img src="images/img.jpg" height="220" width="171" alt="">；此外，他还发行了专辑《谢谢你的爱》，同名主打歌曲获得第十六届十大中文金曲奖[121] 。 1993年1月至2月，在香港红磡体育馆举行20场“真我的风采演唱会”；4月，推出加入飞碟唱片公司后的首张专辑《真情难收》，其中的主打歌曲《一辈子的错》由刘德华作词；11月，推出专辑粤语专辑《答案就是你》，专辑中的歌曲《永远寂寞》获得第16届十大中文金曲获奖[121] 。 1994年，发行国语专辑《忘情水》，同名主打歌获得第17届十大中文金曲奖最受欢迎国语歌曲金奖以及第1届华语榜中榜Channel [V]中文Top 20榜中榜歌曲奖[122-123] ；8月6日至25日，在香港红磡体育馆举行20场演唱会；11月25日，发行国语专辑《天意》；专辑中表达友情的主打歌曲《友谊历久一样浓》是刘德华个人填词的作品；同年，获得十大劲歌金曲奖最受欢迎男歌手奖[11] 。
        </div>
</body>
</html>

03浮动初体验.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
             width: 200px;
             height: 200px;
             background-color: red;
            /*  display: inline-block; *//* 转化为行内块 并排并且宽高有效 元素之间有间隙 不方便处理*/
            float: right;
       }
    </style>
</head>
<body>
    <div>111</div>
    <div>222</div>
    <div>333</div>
</body>
</html>

04浮动全解.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div:first-child {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left; /* 浮动的元素漂在标准流的上面 压住标准流*/
        }

        div:last-child {
            height: 320px;
            width: 140px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

05浮动特性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .fa {
             width: 500px;
             height: 500px;
             background-color: red;
             border: 8px solid green;
             padding: 20px;
             margin: 10px;
        }

        .son {
            width: 100px;
            height: 100px;
            float: left;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>
</html>

06浮动特性续.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       section {
             width: 800px;
             height: 500px;
             background-color: #f40;
       }

       section div:first-child {
                width: 200px;
                height: 200px;
                background-color: pink;
       }
       /*
         熊大熊二都浮动 会顶对齐
         熊大不浮动 熊二浮动 熊二会下一行
       */
       section div:last-child {
                width: 249px;
                height: 300px;
                background-color: skyblue;
                float: left;
       }
    </style>
</head>
<body>
    <section>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>
</html>

07浮动元素改变显示模式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
              height: 200px;
              width: 400px;
              background-color: pink;
              float: left; /* 块级元素设置浮动 具有行内块元素的特征*/
       }

       span {
             height: 200px;
             width: 100px;
             float: left;
             background-color: red;
       }
    </style>
</head>
<body>
    <div>刘强东上头条</div>
    <span>抹茶妹妹</span>
</body>
</html>

02-CSS基础与进阶-day7_2018-09-07-20-25-28

猜你喜欢