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. Bash中文速查表

    最好用的中文速查表(Cheatsheet) 来源:https://github.com/skywind3000/awesome-cheatsheets 感谢网友们的贡献! ############## ...

  2. SQLAlchemy小知识点

    1.创建数据库模型的时候增加添加上注释SQLAlchemy1.2新增了comment参数telephone = db.Column(db.String(11), nullable=False, com ...

  3. uni-app 之验证码

    手机APP---验证码 最近公司在开发手机APP,app避不可免的就是登录了,emmmm 登录验证码那必须的是有的,我们公司发给我们的图片是酱紫的~~ 这个要求大家应该都能看懂,做这个手机号啊,验证码 ...

  4. Ajax发送GET和POST请求案例

    使用ajax实现菜单联动 通常情况下,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据. 需求:选择第一个下拉框的值,根据第一个下拉框的值显示第二个下拉框的值 首先使用GET方式. ...

  5. ExtJs之Ext.XTemplate:数组填充，访问父对象

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  6. nodejs-配置vs code的插件

    在windows上安装好npm后,再在终端里使用npm安装express,再安装express-generator  进入express的目录, 在终端中执行 npm install 启动expres ...

  7. codevs——T3657 括号序列

    http://codevs.cn/problem/3657/  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description ...

  8. [ASP.NET]EF跨项目调用问题

    在一个项目中调用另一个项目中的模型,在该项目中添加一个模型,解决自动提示问题using问题

  9. Android Drawable 那些不为人知的高效使用方法

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43752383,本文出自:[张鸿洋的博客] 1.概述 Drawable在我们平时的 ...

  10. AWR系列之中的一个——AWR简单介绍

    AWR的全称是Automatic Workload Repository(自己主动负载知识库). 它是通过对照两次快照的方式收集到统计信息.来生成txt或者html页面形式的报告. 通常,通过AWR报 ...