49-清除浮动1：给父盒子设置高度
给父盒子设置高度，这种方式不灵活，公司的产品修改的时候，要求父盒子高度变大，
不可能去手动修改
尽量不要给父元素去修改高度，不建议这样的方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动1：设置盒子高度</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
        }
        ul{
            list-style-type: none;
        }
        div ul li{
            float: left;
            width: 100px;
            height: 40px;
            
        }
        .box{
            width: 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{
            width: 400px;
        }
        ul{
            list-style-type: none;
        }
        div ul li{
            float: left;
            width: 100px;
            height: 40px;
            
        }
        .box{
            width: 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{
            width: 300px;
            height: 200px;
            
            margin-bottom: 20px ;
        }
        .box2{
            width: 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{
width: 300px;
height: 100px;
border: 1px solid red;
/*设置字体的大小,px是像素的意思*/
/*字体的单位还有rem em %*/
/*em主要是用于移动端的字体样式大小的调节*/
/*rem也是移动端的布局使用*/
font-size: 20px;
}

路飞学城Python-Day48的更多相关文章

  1. 路飞学城—Python爬虫实战密训班 第三章

    路飞学城—Python爬虫实战密训班 第三章 一.scrapy-redis插件实现简单分布式爬虫 scrapy-redis插件用于将scrapy和redis结合实现简单分布式爬虫: - 定义调度器 - ...

  2. 路飞学城—Python爬虫实战密训班 第二章

    路飞学城—Python爬虫实战密训班 第二章 一.Selenium基础 Selenium是一个第三方模块,可以完全模拟用户在浏览器上操作(相当于在浏览器上点点点). 1.安装 - pip instal ...

  3. 路飞学城Python爬虫课第一章笔记

    前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 之前看阮一峰的博客文章,介绍到路飞学城爬虫课程限免,看了眼内容还不错,就兴冲冲报了名,99块钱满足以下条件会返还并送书送视频. 缴 ...

  4. 路飞学城-Python开发集训-第3章

    学习心得: 通过这一章的作业,使我对正则表达式的使用直接提升了一个level,虽然作业完成的不怎么样,重复代码有点多,但是收获还是非常大的,有点找到写代码的感觉了,遗憾的是,这次作业交过,这次集训就结 ...

  5. 路飞学城-Python开发集训-第1章

    学习体会: 在参加这次集训之前我自己学过一段时间的Python,看过老男孩的免费视频,自我感觉还行,老师写的代码基本上都能看懂,但是实际呢?....今天是集训第一次交作业的时间,突然发现看似简单升级需 ...

  6. 路飞学城-Python开发集训-第4章

    学习心得: 学习笔记: 在python中一个py文件就是一个模块 模块好处: 1.提高可维护性 2.可重用 3.避免函数名和变量名冲突 模块分为三种: 1.内置标准模块(标准库),查看所有自带和第三方 ...

  7. 路飞学城-Python开发集训-第2章

    学习心得: 这章对编码的讲解超级赞,现在对于编码终于有一点认知了,但还没有大彻大悟,还需要更加细心的琢磨一下Alex博客和视频,以前真的是被编码折磨死了,因为编码的问题而浪费的时间很多很多,现在终于感 ...

  8. 路飞学城-Python开发-第二章

    ''' 数据结构: menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, '汽车之家' ...

  9. 路飞学城-Python开发-第三章

    # 数据结构: # goods = [ # {"name": "电脑", "price": 1999}, # {"name&quo ...

  10. 路飞学城-Python开发-第一章

    # 基础需求: # 让用户输入用户名密码 # 认证成功后显示欢迎信息 # 输错三次后退出程序 username = 'pandaboy' password = ' def Login(username ...

随机推荐

  1. Noip2011 Mayan游戏 搜索 + 模拟 + 剪枝

    写了一下午,终于AC了. 由于n<=5, 所以不需要太多的剪枝和技巧也能过.可以将操作后的消方块和下落和剪枝函数写到一个结构体中,这样会减少调试难度,更加简洁. 可以采用如下剪枝: 1. 如果当 ...

  2. 路飞学城Python-Day96

    51-数据库表关系之一对多 为什么有多表的概念? 一个Book有单表的时候只能查询Book表中的内容,要想查询更多的出版社的信息,需要再将单表的内容不断更新 导致单表会存储大量的重复的信息,浪费了大量 ...

  3. 前端开发—CSS 盒子、浮动、定位

    盒子模型 margin padding border content margin:            用于控制元素与元素之间的距离:body自带 8 像素的margin 需要手动去除.(快递盒之 ...

  4. mysql新建用户，修改权限

    (1)登录:mysql -u root -p (2)查看现有用户(mysql8.0.1) mysql> select host,user,authentication_string from m ...

  5. CNN实现terecord、数据集、模型训练

    AlexNet(Alex Krizhevsky,ILSVRC2012冠军)适合做图像分类.层自左向右.自上向下读取,关联层分为一组,高度.宽度减小,深度增加.深度增加减少网络计算量. 训练模型数据集 ...

  6. oracle 解除锁表sql

    select b.owner,b.object_name,a.session_id,a.locked_mode from v$locked_object a,dba_objects b where b ...

  7. 不可靠信号SIGCHLD丢失的问题

    如果采用 void sig_chld(int signo) {        pid_t pid;        int stat;                while((pid = waitp ...

  8. poj1035Spell checker

    暴力解决. 先把字典里的每一个单词的长度存起来.在查找的时候.就比較长度,在多一个少一个之间找, #include<stdio.h> #include<string.h> #i ...

  9. winform显示系统托盘，双击图片图表显示窗体，退出窗体是否提示

    private void Form1_FormClosing(object sender, FormClosingEventArgs e) { DialogResult result = Messag ...

  10. 启用QNX系统，海尔智能冰箱或成业界“宝马”

        智能家电正处于迅猛发展的态势,国内眼下有非常多企业都在积极布局智能家电,当中又以海尔最为典型.作为家电领域的领头羊,海尔近年来在智能家电领域的动作不小.近期有消息透露.海尔也许会在IFA展会上 ...