vertical-align

1　float属性

　　浮动 float 可以让盒子并排，并且可设置宽高，之间无空白空隙

　　默认值 float:none;

　　特点：1）相互贴靠贴靠时，后边的会往前找可以贴靠的兄弟，若空间不够，则继续向前查找

　　　　　2）浮动元素可以设置宽高

　　　　 3）脱离标准流（简称脱标）标准流--文档中默认规定的各元素特性（浮动元素已经不区分块、行内、行内块元素了）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 去掉浏览器默认添加的 padding margin */

padding: 0;

margin: 0;

}

.wrap div{

width: 200px;

height: 200px;

/* display: inline-block; */

background-color: red;

float: left;

/* float: none; */

margin-right: 10px;

}

.box1{

height: 3000px;

}

/* .wrap div.box4{

margin-right: 0;

} */

/* 脱标后则不再区分块/行内/行内块元素 */

span{

width: 120px;

height: 150px;

float: left;

margin: 10px 10px 0 0;

background-color: royalblue;

}

</style>

</head>

<body>

<!-- 两个有宽高的盒子实现并排

思路1：将两个盒子转换为行内块

效果：实现并排但是盒子之间有空隙

思路2： float 浮动可以让元素并排并且可以设宽高

效果：实现并排，相互贴靠且没有空隙

特点：1 相互贴靠,遇到后面空间不够时换行；

兄弟6贴靠5，5贴4 ... eg:当6贴不到5时，会贴4，还不行则一直找到1，仍然不行则换行

2 浮动的元素可以设置宽高

3 脱离标准流（脱标）

-->

</div>

</body>

</html>

　　浮动会对网页布局造成影响: 浮动元素可能会对后续元素布局产生影响，所以一般清除浮动

　　清除浮动的方法：1）给浮动的元素的父亲设置高度

　　　　　　　　　　　　不灵活需要提前知道子元素的高；一般父亲是靠儿子撑开的

　　　　　　　　　　2) 给父亲增加一个子元素，给子元素设置一个属性clear:both

　　　　　　　　　　　　会增加一个html结构一般尽量少一些html结构，否则影响页面渲染的性能

　　　　　　　　　　3）overflow:hidden 本意：隐藏多余的东西

　　　　　　　　　　　　给父级添加该属性可以清除浮动

　　　　　　　　　　4）第二种方法升级用css给父级添加一个伪元素

　　　　　　　　　　　　优点：可清除浮动，且不增加html结构缺点：不能复用

　　　　　　　　　　　　.wrap:after{

　　　　　　　　　　　　　　　contant:' ';

　　　　　　　　　　　　　　　display:block;

　　　　　　　　　　　　　　　clear:both;

　　　　　　　　　　　　}

　　　　　　　　　　5) 用class类解决，可复用，但是有兼容性问题

　　　　　　　　　　　　.clearfix:after{　　　　　ie7以下不兼容　　　　

　　　　　　　　　　　　　　　　contant:' ';

　　　　　　　　　　　　　　　　display:block;

　　　　　　　　　　　　　　　　clear:both;

　　　　　　　　　　　　}

　　　　　　　　　　　　.clearfix{ 低版本专用 eg:ie6

　　　　　　　　　　　　　　*zoom:1;

　　　　　　　　　　　　}

　<!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>
        /* 浮动的元素 可能会对后续元素布局产生影响，所以一般清除浮动  
        
            清除浮动方法：
            1 给浮动元素的父亲设置高度-----有高度的盒子可以关闭浮动
              缺点 ：不灵活  该方法需要提前知道儿子的高度；通常情况下，父亲靠儿子撑开 

            2  clear:both
                在父亲末尾添加一个元素  给这个元素设置属性clear:both
                可以清除浮动，并且父亲的高度也被撑开
                缺点：多了 html结构   宁可多css代码，html结构尽量少，否则影响页面渲染

            3 overflow:hidden; 原始作用：将多余的东西隐藏
                给浮动元素的父亲增加一个属性 overflow:hidden;  

            4   用css加元素  即第二种方法的升级 
                用css 在 父级增加一个伪元素
                优点：清除浮动，且不会增加 html结构
                缺点：不能复用

                 .wrap:after{
                        content: '';     伪元素不要内容，但 一定要写
                        display: block;
                        clear: both;
                    }
            
            5  最优方法 用class类解决，可复用    ie7以下不兼容  after伪元素
                    
        
        */
        *{
            padding: 0;
            margin: 0;
        }

        .wrap{
            border: 4px solid blue;
            /* height: 200px; */           
            /* overflow: hidden; */         
        }
        .wrap div.box1,
        .wrap div.box2{
            width: 200px;
            height: 200px;
            float: left;
        }


        .wrap .box1{
            background-color: salmon;
        }

        .wrap .box2{
            background-color:red;
        }

       
        .wrap2{
            widows: 300px;
            height: 200px;
            background-color: seagreen;
        }

        /* .cleardiv{          
            clear: both;
        } */

        .wrap:after{
            content: '';
            display: block;   /*不写时  添加的默认为行内元素*/
            clear: both;
        }

        /* after 伪元素 ie7以下不兼容 */
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }

        /* 低版本浏览器专用 eg：ie6 */
        .clearfix{
            *zoom: 1;
        }

    </style>
</head>
<body>
    <div class="wrap clearfix">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <!-- <div class="cleardiv"></div>    -->
    </div>
   
    <div class="wrap2"></div>
</body>
</html>

overflow 和 vertical-align属性的用法

<!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>
        .box{
            border: blueviolet 2px solid;
            width: 400px;
            height: 100px;
            /* 让溢出的内容隐藏 */
            overflow: hidden;
            /*  默认值 显示  */
            overflow: visible;     
             /*   滚动  显示滚动条  溢出可以显示滚动条，否则不可用 */ 
            overflow: scroll;     
            /* 内容溢出则显示滚动条  不溢出不显示滚动条 */
            overflow:auto; 
            
        }
        
        /* 行内元素  行内块元素 对齐方式
            文字与图片 垂直 方向的对齐方式
            图片与图片 垂直方向的对齐方式
        
         */

        img.img1{
            /* 默认值 基线对齐 */
            vertical-align: baseline;

            vertical-align: middle;

            vertical-align: top;

            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <!-- overflow 示范 -->
    <div class="box">
        这是内容这是内容这是内容这是内容这是内容这是内容
        这是内容这是内容这是内容这是内容这是内容这是内容
        这是内容这是内容这是内容这是内容这是内容这是内容
        这是内容这是内容这是内容这是内容这是内容这是内容
        这是内容这是内容这是内容这是内容这是内容这是内容
        这是内容这是内容这是内容这是内容这是内容这是内容
        这是内容这是内容这是内容这是内容这是内容这是内容
        这是内容这是内容这是内容这是内容这是内容这是内容
    </div>
    
    <!-- vertical-align 示范 -->
    <span>123</span>
    <div class="box2"> 
       <img class="img1" src="dog.jpeg" alt="" height="50px">
       <img src="person.jpg" alt="" height="50px">
    </div>

    
</body>
</html>

posted @ 2020-08-01 10:42 NodeHzi 阅读(387) 评论(0) 收藏举报

刷新页面返回顶部

NodeHzi

css-浮动/清除float/overflow/vertical-align

公告