CSS Day 4th

最新推荐文章于 2024-09-06 09:38:49 发布

Labef_Peppa

最新推荐文章于 2024-09-06 09:38:49 发布

阅读量313

点赞数

文章标签： css

本文链接：https://blog.csdn.net/N374471906/article/details/108804400

版权

今天主要学习了css里的浮动相关内容
首先了解了css布局的三种机制：普通流，浮动和定位。
浮动是指：①脱离普通标准流的控制；②移动到指定的位置。
float具体解释：
浮：漂浮在普通流的上面，脱离了普通标准流
漏：浮动的盒子把自己原来的位置漏给了下面的标准流的盒子，不占有原来位置，是脱离标准流的，也就是脱标
特：float会改变元素的display属性无论什么属性都会更改为block块内元素属性，而且任何元素都可以浮动

浮动之后的元素会相互贴在一起，不会像行内块那样中间留有空白间隙。从而可以根据自己控制是否需要有间隙，可以设置没有也可以通过外边距margin设置有间隙。父级盒子一行装不下的浮动元素会另起一行

一个标准的网页时标准流+浮动+定位来一起完成的。
浮动是脱标的，会影响到下面的标准流，所以一般都是会在浮动的元素外面去添加一个父亲（标准流），来避免对其他标准流元素的影响。由于父级盒子一般是不设置高度的（否则可能因为高度限制内容放不下），而浮动元素又是脱标的，所以浮动元素不会撑开父级盒子，那么如果单纯父级盒子只有浮动元素就会导致其高度为0，那么这样父级元素后面的标准流元素仍然会跑到浮动元素的位置导致重叠，所以这时候就需要清除浮动，清除浮动的四种方法见代码，主要有：
1.clear:both(w3c推荐，但是添加了无意义的标签)
2.父级盒子添加overflow:hidden属性，但是可能会导致内容过长的时候被掩盖
3.after伪元素清除浮动，见代码
4.before和after双伪元素清除浮动，见代码
总结需要清除浮动的条件：
①父级没高度；②子盒子浮动了；③影响后面布局了

浮动的盒子只会影响在其之后的标准流盒子，不会影响在其之前的标准流盒子，而在同一行如果有了一个浮动元素，那么其他所有元素必须都是浮动的，否则就可能会出现布局混乱。

浮动的盒子不会去压住父级盒子的padding和border

最后还学习了ps软件切图的相关知识，具体不展开。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            /* 浮动到靠左，图片被文字环绕 */
            float: left;
        }

        .small{
            width: 600px;
            height: 500px;
            background-color: red;
        }
        .one {
            /* 漂浮在其他标准流盒子的上面 把位置让给下面的普通流的盒子，不再占有原来的位置 */
            /* 相当于把块级转换成了inline-block，但是和行内块不一样 */
            /* 行内块在同一行时之间会有白色空隙，但是浮动转换的之间没有空隙，具体见div.one和two两个显示 */
            float: left;
            background-color: blue;
            height: 100px;
            width: 100px;
        }

        .two {
            float: left;
            background-color: blueviolet;
            height: 100px;
            width: 100px;
        }

        .big{
            margin:0 auto;
            width: 1226px;
            height: 615px;
            background-color: #dee;
        }
        .left {
            height: 615px;
            width: 234px;
            float: left;
            background-color: #cfe;

        }

        .left img{
            width: 234px;
        }

        .right {
            /*设置了宽度之后左浮动右浮动均可，因为左右宽度加起来和父级一样。*/
            float:left;
            width: 992px;
            height: 615px;
            background-color: #eee;
        }
        .son1{
            float: left;
            width: 240px;
            margin-left: 8px;
            margin-bottom:8px;
            height: 303.5px;
            background-color: #fff;
        }

        .son1 a img{
            width: 240px;
            height: 303.5px;
        }

        .son2{
            float: left;
            width: 240px;
            margin-left: 8px;
            height: 303.5px;
            background-color:#fff;
        }

        .son2 a img{
            width: 240px;
            height: 303.5px;
        }


        
        .hong{
            width: 100px;
            height: 100px;
            float: left;
            background-color: blue;
        }
        .lan{
            width: 80px;
            height: 80px;
            float: left;
            background-color: yellow;
        }

        .second{
            background-color: red;
            width: 400px;
            height: 120px;
        }

        /* 1.清除浮动的属性，clear一定要放在那个有浮动的父盒子里面的最后面一个标签 缺点是添加了额外无意义的标签*/
      /*  .clear{
            clear:both;
        }*/

        /* 2.从父级标签来清楚浮动 */
        /*.first{
             overflow:hidden; 
        }*/

        /* 3.使用伪元素after来清除浮动 */
       /* .clearfix:after{
            content: "";
            display:block;
            height:0;
            visibility:hidden;
            clear:both;
        }

        .clearfix{
            /* IE6，IE7专门清除浮动的样式 * /
            *zoom: 1;   
        }  */

        /* 4.使用双伪元素来清除浮动 */
        .clearfix:before,
        .clearfix:after{
            content: "";
            display:table;

        }
        .clearfix:after{
            clear:both;
        }

        .clearfix{
            *zoom:1;
        }



    </style>
</head>

<body>
    <div>

        <img src="zly.png" />
        赵丽颖，1987年10月16日出生于河北省廊坊市，中国内地影视女演员、歌手。
        2006年，因获得《雅虎搜星》比赛冯小刚组冠军而进入演艺圈 [1] ；同年，在冯小刚
        执导的广告片《跪族篇》中担任女主角 [2] 。2011年，因在古装剧《新还珠格格》中
        饰演晴儿一角而被观众认识 [3] 。2013年，凭借古装剧《陆贞传奇》获得更多关注。
        2014年10月，在第10届金鹰电视艺术节举办的投票活动中被选为“金鹰女神” [4] ；12
        月，凭借都市爱情剧《杉杉来了》获得第5届国剧盛典内地最具人气女演员奖；同年，成
        立海润传媒赵丽颖工作室。

        2015年，主演的仙侠剧《花千骨》打破中国内地周播剧收视纪录 [5] ，而其个人则凭
        借该剧先后获得第6届澳门国际电视节金莲花最佳女主角奖、第6届国剧盛典最具收视号
        召力演员奖、第22届上海电视节白玉兰奖最佳女主角奖提名、第28届中国电视金鹰奖观
        众喜爱的女演员奖 [6-8] 。2017年，凭借电影《乘风破浪》获得第24届北京大学生电
        影节最受大学生欢迎女演员奖 [9] ；同年主演的古装剧《楚乔传》成为中国内地首部
        在播期间网络播放量突破400亿次的电视剧 [10] 。2018年，主演的都市剧《你和我的
        倾城时光》播出 [11-12] 。
        2019年5月，凭借古装剧《知否知否应是绿肥红瘦》获得第25届上海电视节白玉兰奖最佳
        女演员提名 [13] 。2020年，主演古装武侠剧《有翡》


    </div>
    <div class="small">
        <div class="one">
        </div>


        <div class="two">
        </div>

    </div>

    <div class="big">

        <div class="left">
            <img src="mi1.png"  />

        </div>

        <div class="right">
            
            <div class="son1">
                <a href="#"><img src="mi2.png" /></a>
            </div>
            <div class="son1">
                <a href="#"><img src="mi2.png" /></a>
            </div>
            <div class="son1">
                <a href="#"><img src="mi2.png" /></a>
            </div>
            <div class="son1">
                <a href="#"><img src="mi2.png" /></a>
            </div>
            <div class="son2">
                <a href="#"><img src="mi2.png" /></a>
            </div>
            <div class="son2">
                <a href="#"><img src="mi2.png" /></a>
            </div>
            <div class="son2">
                <a href="#"><img src="mi2.png" /></a>
            </div>
            <div class="son2">
                <a href="#"><img src="mi2.png" /></a>
            </div>
        </div>
    </div>

    <div class="floatc">
        <div class="first clearfix">
            <div class="hong"></div>
            <div class="lan"></div>
            <!-- <div class="clear"></div>     清除浮动添加的额外标签-->
        </div>
        <div class="second">

        </div>
        
    </div>
</body>

</html>

效果图：
在这里插入图片描述

Labef_Peppa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Day 4th

今天主要学习了css里的浮动相关内容首先了解了css布局的三种机制：普通流，浮动和定位。浮动是指：①脱离普通标准流的控制；②移动到指定的位置。float具体解释：浮：漂浮在普通流的上面，脱离了普通标准流漏：浮动的盒子把自己原来的位置漏给了下面的标准流的盒子，不占有原来位置，是脱离标准流的，也就是脱标特：float会改变元素的display属性无论什么属性都会更改为block块内元素属性，而且任何元素都可以浮动浮动之后的元素会相互贴在一起，不会像行内块那样中间留有空白间隙。从而可以根据自己控制
复制链接

扫一扫