zoukankan      html  css  js  c++  java
  • 路飞学城Python-Day48

    49-清除浮动1:给父盒子设置高度
    给父盒子设置高度,这种方式不灵活,公司的产品修改的时候,要求父盒子高度变大,
    不可能去手动修改
    尽量不要给父元素去修改高度,不建议这样的方式
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>清除浮动1:设置盒子高度</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                 400px;
            }
            ul{
                list-style-type: none;
            }
            div ul li{
                float: left;
                 100px;
                height: 40px;
                
            }
            .box{
                 200px;
                height: 100px;
                
            }
        </style>
    </head>
    <body>
            <div>
                <ul>
                    <li>
                        Python
                    </li>
                    <li>
                        web
                    </li>
                    <li>
                        linux
                    </li>
                </ul>
            </div>
            <div class="box">
     
            </div>
    </body>
    </html>

    50-清除浮动2-clear:both
    给浮动元素最后面加一个空的div,并且该元素不浮动,这样的方式称为内墙法,然后设置clear:both->清除所有的浮动影响,这样的方式无缘无故加了div标签,结构冗余,不推荐使用
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>清除浮动2:clear</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                 400px;
            }
            ul{
                list-style-type: none;
            }
            div ul li{
                float: left;
                 100px;
                height: 40px;
                
            }
            .box{
                 200px;
                height: 100px;
                
            }
            .clear{
                clear: both;
            }
        </style>
    </head>
    <body>
            <div>
                <ul>
                    <li>
                        Python
                    </li>
                    <li>
                        web
                    </li>
                    <li>
                        linux
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
            <div class="box">
     
            </div>
    </body>
    </html>

    51-清除浮动3-伪元素清除法(常用)
            .clearfix:after{
                content: '';
                clear: both;
                display: block;
            }

    52-清除浮动4-overflow:hidden(常用)
    overflow: hidden;是在内容超出部分就隐藏
    overflow: scorll:不论是否需要,用户代理都会提供一种滚动机制,而且是有可能(不是一定)会出现滚动条,这样会导致在写代码的时候导致前端的页面不可控

    53-margin垂直方向塌陷问题
    当给两个兄弟盒子设置垂直方向上的margin,那么排列的时候会以较大的为准,我们称为这种现象为塌陷
    如果是浮动的盒子,垂直的方向上不塌陷
            .box1{
                 300px;
                height: 200px;
                
                margin-bottom: 20px ;
            }
            .box2{
                 400px;
                height: 300px;
                
                margin-top: 50px;
            }

    54-margin:0 auto水平居中盒子
    1.水平居中的盒子一定要有宽度,要有明确的width,否则就会继承父标签的宽度,浮动的时候是不能用的,
    2.只有标准流下的盒子才能使用margin,当一个盒子浮动了,固定定位、绝对定位了,margin 0 auto就不能使用
    3.居中盒子,而不是居中文本,文字水平居中使用text-align:center

    55-善于使用父亲的padding,而不是margin

    56-文本属性和字体属性
    div{
    300px;
    height: 100px;
    border: 1px solid red;
    /*设置字体的大小,px是像素的意思*/
    /*字体的单位还有rem em %*/
    /*em主要是用于移动端的字体样式大小的调节*/
    /*rem也是移动端的布局使用*/
    font-size: 20px;
    }
    Win a contest, win a challenge
  • 相关阅读:
    使用memset()要注意
    UPC快速学习笔记之Collective Operations
    二叉搜索树(结点添加、后继搜索、前驱搜索、结点删除)
    十分愚蠢的错误记录(C++创建对象时new的问题)
    BFS和DFS分别用于有向图和无向图的一点心得和总结
    不要在if判断语句中同时声明变量,注意在if中同时赋值和判断的优先级
    C++内存泄漏姿势之——eof()和delete释放内存
    C++中"was not declared in this scope"问题记录;以及通过正则表达式提取文件中数字的方法
    论fork()函数的进阶使用
    页面的修改、添加,以及验证控件的常见应用
  • 原文地址:https://www.cnblogs.com/pandaboy1123/p/9490498.html
Copyright © 2011-2022 走看看