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. nginx安装http2.0协议

    1.HTTP2协议 HTTP 2.0 的主要目标是改进传输性能,实现低延迟和高吞吐量.从另一方面看,HTTP 的高层协议语义并不会因为这次版本升级而受影响.所有HTTP 首部.值,以及它们的使用场景都 ...

  2. windows远程桌面无法复制粘贴的解决方案

    方法一:在网上最常见的方法,就是杀掉 rdpclip.exe进程后重启. 在远程桌面的任务栏,右键启动任务管理器 这时候进程列表中已经没有看到rdpclip.exe了,桌面左下方点击[开始]--> ...

  3. maven引入spring相关依赖

    <!--spring相关包--> <dependency> <groupId>org.springframework</groupId> <art ...

  4. ORM对象关系型映射的用法

    ORM对象关系型映射的用法 -- Django模型 1.什么是ORM关系型映射 ORM 全拼Object-Relation Mapping. 中文意为 对象-关系映射. 主要实现模型对象到关系数据库数 ...

  5. CodeForcesGym 100641E Inspectors

    Inspectors Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on CodeForcesGym. O ...

  6. 最大团&稳定婚姻系列

    [HDU]   1530 Maximum Clique 1435 Stable Match 3585 maximum shortest distance 二分+最大团 1522 Marriage is ...

  7. Java 学习（9）：java Stream & File & IO

    Java 流(Stream).文件(File)和IO Java.io 包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io 包中的流支持很多种格式,比如:基本类 ...

  8. 继续过Hard题目.0209

    http://www.cnblogs.com/charlesblc/p/6372971.html 继续过Hard模式的题目吧.   # Title Editorial Acceptance Diffi ...

  9. PHP--规范化的文件上传

    <form action="" method="post" enctype="multipart/form-data"> < ...

  10. HDU 1042.N!【高精度乘法】【8月24】

    N! Problem Description Given an integer N(0 ≤ N ≤ 10000), your task is to calculate N!   Input One N ...